Bootable Template

3-column Theme + Layout for Bootstrap 3.

New Stories

Bootstrap 3 is Here.

In simple terms, a responsive web design figures out what resolution of device it's being served on. Flexible grids then size correctly to fit the screen.

Read our migration guide for help with upgrading to Bootstrap 3.

Top Members

John Chapman
Max Axleton
Devin Skelly
Katie Kowalski
Amet Deberge
Modal
Examples using the Bootstrap modal.
87
Carousel
How to use the Bootstrap slider.
322
Typography
See the various textual elements and options.
44
@Media
Use @media queries to get the layout you want.
119
Top Stories

The Year of Responsive Design.

2013 was marked as the year of Responsive Web Design (RWD). The Web is filled with big brands, galleries and magical examples that media queries demonstrate the glory of responsive design.

Aug 15 / John Pierce

Web design has come a long way since 1999.

Aug 15 / Wilson Traiker

The "flat" look was a big trend this year.

"Mobile first" and "unobtrusive JavaScript" (AKA: "progressive enhancement") are strategies for when a new site design is being considered. These are related concepts that predated RWD: browsers of basic mobile phones do not understand JavaScript or media queries, so the recommended practice is to create a basic web site then enhance it for smart phones and PCs—rather than try "graceful degradation" to make a complex, image-heavy site work on the most basic mobile phones.

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen). It became a W3C recommended standard in June 2012.[1] and is a cornerstone technology of Responsive Web Design.

Centered Text

This was a 2.x challenge that seems a little easier in 3.

CSS3

To understand the RWD approach, you must first understand CSS - the basis of responsive design. CSS enables the developer to use percentage-based (AKA fluid or proportion-based) grids, CSS3 media queries. The web site then adapts to multiple devices (desktop, laptop, tablet, smartphone) and display conditions such as browser size and screen resolution.

There is still a lot to be said about the Responsive Web.

Responsive Text

Have you ever seen large text blocks overflow their container, or get cut-off? One way to handle this is to ensure the text content wraps inside the container. But the more "responsive" way is to scale font-sizes accordingly as the size of the viewing area (viewport) changes. Creators of FitText have mastered this in the form of a plugin.

Well..

Does anyone know why @mdo or @fat would name this element a "well"?

Responsive Images

The sizing "grid" is not the only aspect of responsive design. Making images and media object scale correctly is another consideration for responsive developers.

Bootstrap 3 is the latest "Mobile-first" release of the Bootstrap framework that offers a starter foundation for Web designers and developers. Bootstrap consists of a CSS and JavaScript library. To use Bootstrap, you simply include (reference) in the HTML of your Web page. There is also a CDN for Bootstrap that serves pages faster.
This theme was made at Bootply. Bootply is a HTML, JavaScript and CSS editor app built just for Bootstrap. Bootply enables developers to easily apply the Bootstrap Framework to their projects using a beautiful hand-coding interface. The browser-based Bootply editor lets developers select and paste Bootstrap friendly code snippets. Bootply can be used to test, manage and share any Bootstrap code, from small snippets to entire Bootstrap-ready themes. Find it at http://bootply.com

Edit on Bootply