#bootstrap grid

Web design has truly advanced since the early, basic days of static websites. Now, it’s all about reaching people on any device they use – whether it’s their phone, tablet, laptop, or desktop, each with its own screen size and display. A good website today needs to be responsive, meaning it cleverly changes its look to fit any screen perfectly, without making it hard to read or use. To make a…

In a large browser window you'll see the container centered and white space on the left and right. In a small browser window you'll see horizontal scroll bars. With no other settings in place, the fixed grid in a container will always use 940 pixels of horizontal space. The HTML will give us the following layout (text-centering added by me):Īs you can see, span12 will give you a single column layout, and using different combinations of spans and offsets can give you 2 column layouts, 3 column layouts, and layouts with offsets and white space. The goal is use a total of 12 units per "row" container.įor a visual example, consider the following HTML: span1 is 1 unit wide, and span7 is 7 units wide. Create a row in the grid using the "row" class, and create columns inside using span1 through span12 classes. Bootstrap is one of the more recent CSS frameworks to include a grid system amongst its features.īy default, the Bootstrap grid consists of 12 columns and is 940 pixels wide. These included Blueprint, 960.gs, YUI grids, and others. As CSS became more mature the web world started to avoid tables for layout, and eventually a number of CSS frameworks for grid based layout started to appear. In the late 1990s I (unknowingly) built pages with a grid based layout using elements and arranging content into table cells. As the browser changes size, the grid can expand or contract, and also match the various display sizes of today’s devices. Every HTML element is a rectangle, and a grid can easily constrain and arrange rectangles. Web browsers and grids work together well. Usability thrives on consistency, which makes consistency a high priority, despite what Ralph Waldo says. The grid itself is not a visible component, but only exists to provide order, alignment, and consistency. Grids also provide an intuitive structure for viewers, because it is easy to follow a left to right (or a right to left) flow of content moving down a page. For web designers a grid defines the horizontal and vertical guidelines for arranging content and enforcing margins. Grids are popular for several reasons, but primarily grids are about providing structure. One popular approach to page layout in both print and the web has been the grid based layout. The term “page layout” makes me think about arranging content on a web page, but page layout has been around since humans started writing on papyrus, so “page layout” predates the web by several centuries. Try resizing the browser window or visit the page with a small device to see how the different layouts react with and without the responsive design style sheet. Using the sample you can see how the Bootstrap grid and fluid grid behave inside and outside of the Bootstrap container. The initial load will not have Bootstrap in place, so all the grid columns pile on top of each other. The sample will let you dynamically add and remove the Bootstrap style sheet and the Bootstrap responsive style sheet. If you just want to play with layouts using the Bootstrap grid system, try my Bootstrap layout sample. See the Pen Bootstrap grid demo, 2 columns by SitePoint ( on CodePen.The Bootstrap grid system makes page layout fast and easy. This way, we maintain the limit of 12 virtual Bootstrap columns for a single row. To create 2 columns of equal widths, we should assign 6 virtual Bootstrap columns to each one of them. Let’s now create a 2-column layout for smaller devices and check out its behaviour in larger devices and extra-small devices. Therefore, a column defined for extra smaller devices will work in all types of devices. In Bootstrap, if a column is defined for a particular type of device then it is guaranteed to behave similarly in larger devices as well. You must be wondering why I used the class prefix that belonged to extra smaller devices, which is. This is because every column in Bootstrap has a padding of 15px. In the above demo, you will also see the 15px padding reappear to push the element away from the container. Hence, this column’s width will be the width of the row. col-xs-12 to create a single column that spans across 12 virtual Bootstrap columns. See the Pen Bootstrap Grid demo with row and column by SitePoint ( on CodePen. So, let’s create our first Bootstrap column: These prefixes are shown in the table below: Class Prefix Bootstrap uses different column class prefixes for different sized devices.