The Grid Layout in Bootstrap

One of the great things about Bootstrap is that it simplifies the task of creating grid layouts in your web applications. Developers with basic knowledge of front-end web development hate fiddling around with CSS to position content into rows and columns and can greatly benefit with Bootstrap’s ability to control how they appear on different screen resolutions.

The one rule of Bootstrap grids is that each row can have a maximum of 12 columns. There are a number of predefined CSS classes that help you specify the number of columns in a specific row and how much horizontal space each column occupies. Let’s take a look at some examples:

Example 1: Row with Two Columns (50/50 Split)

The code snippet below shows how we can create a row with two columns of equal width. I have defined a <div> tag with a class of “row” which contains two <div> tags that each have a class of “col-md-6”. Remember that each row can have a maximum of 12 columns, so we are specifying that each column takes up 6 units.

<div class="row">
    <div class="col-md-6">
        <h1>LEFT</h1>

        <p>
            This content appears on the left side
        </p>
    </div>
    <div class="col-md-6">
        <h1>RIGHT</h1>

        <p>
            This content appears on the right side
        </p>
    </div>
</div>

The “md” applies this CSS style to medium-sized screens (maximum width 992px). If we drop the window size so that it is less than 992px, the divs will no longer be side-by-side, and instead will be stacked on top of one another.

If we want to keep the 50/50 split on all sized screens, we can use the class “col-xs-6” where the “xs” stands for “extra-small”. Other options include “sm” (small) or “lg” (large).

clip_image002

clip_image004

If we wanted to have three columns of equal width within our row, we can simply use a class of “col-md-4”.

Example 2: Row with Three Columns (One Large and Two Small)

Here’s an example of how we can take the code snippet above and easily modify it to include three columns where the left-most column takes up half the screen.

<div class="row">
    <div class="col-md-6">
        <h1>LEFT</h1>

        <p>
            This content appears on the left side
        </p>
    </div>
    <div class="col-md-3">
        <h1>MIDDLE</h1>

        <p>
            This content appears in the middle
        </p>
    </div>
    <div class="col-md-3">
        <h1>RIGHT</h1>

        <p>
            This content appears on the right side
        </p>
    </div>
</div>

The screenshot below shows what this markup would output on a medium-sized screen.

clip_image002[4]

Again, if we drop the window size, the columns are stacked evenly on top of one another.

clip_image004[4]

Example 3: Grid Layouts on Mobile Browsers

I mentioned above that we can prevent the columns from stacking top to bottom by using the “col-xs-…” class. This is useful if we want to maintain column layout on smaller devices such as tablets or smartphones. Here is the same code snippet from example one with “xs” used in place of “md” on a very small window size that would be fit for a smartphone.

clip_image005

That’s all there is to it! There are some variations that you can add to the row/column layout to make your web applications more interactive. We will take a look at these in my next few blog posts.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s