Bootstrap Basics

Bootstrap and Skeleton Frameworks help you create responsive websites very quickly and easily. With this brief lesson, you will be shown some very basic tips for creating and working with the Bootstrap framework.

Using the Framework

In order to use the Bootstrap Framework, you need to download it from http://getbootstrap.com/ and move the core folders into your document root. Thus, you will have the three folders; css, fonts and js.

The next step is to add a link into the head of your HTML file.

<link href="css/bootstrap.min.css" rel="stylesheet">

At this point, you can start using Bootstrap. Since this is a very basic tutorial, I will attempt to explain the very basic classes that can be used to give solid, desirable, responsive results.

Container Class

The container class is the parent class that holds everything together and normally exists after the opening ‘<body>’ tag. It is a one time deal.

<div class="container">
</div>

Row Class

The row class contains a responsive group. Think of it like a class that holds one or more columns and puts them in order for a specific screen size. The first row can be used to create columns and a sidebar for the entire document.

You can have as many row classes as you want and they will present themselves to the viewer in the same order they are coded. Thus, if the first ‘row’ class has two columns and the second class has three columns, you will see all items of the first row class appear before you will see any items of the second ‘row’ class.

For example, on a home PC, you may see the first row class with 2 columns followed by the second row with 3 columns while the mobile phone user may see 7 single columns; all in order as they are coded.

In order as coded means that the first column in the ‘row’ class always appears first, followed by the second and so forth.

<div class="row">
</div>

Column Class

The column class, or classes, are children classes to the ‘row’ class. They are name with ‘col-md-*’. For example, they could named something like ‘col-md-12’, ‘col-md-6’, ‘col-md-4’.

The key to using these classes are to remember that all children classes that are used must add up to 12. For example, If you plan to have two columns, you would have two classes that are both named ‘col-md-6’. Meanwhile, a three column layout would use ‘col-md-4’.

The code belows shows a column that would expand the entire width.

<div class="col-md-12">
</div>

Putting it all together

<div class="container">

    <div class="row">

        <div class="col-md-12">
        </div>

    </div>

</div>

Other Possibilities

With those basics in mind, you can create layouts with multiple columns. To go one step further, you could make custom layouts within a row. Thus, you could have a large column that represents the main body with a class like ‘col-md-8’ and a sidebar with a class like ‘col-md-4’.

Below, is another example to create your main page and sidebar. This example uses the wrapper id, sidebar-wrapper-id and page-content-wrapper id.

<div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
    </div>

    <!-- Main Page -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <!-- Main Body Goes Here -->
            </div>
        </div>
    </div>

</div>

Bootstrap Basics

Our Skills

About

Strict Coding Standards

Service List

Contact Us

SEO Services

Links