Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to Develop Websites using Bootstrap 3

See in this article a brief introduction to Twitter Bootstrap 3. Well see the main innovations and changes included in this new version of the framework

Before starting the development of any page, it is important to require time to understand the real need and goal that need to be created. This is one of the most important stages of the life cycle of a project and constantly neglected by developers, mainly because of the desire of having a product to be used in a short time.

But stop a bit and think: don’t use a well-developed page if it does not meet the goal of its creator or the real needs of the user.

As a case example, we will develop a website in order to disclose personal and professional information of an individual. The design phase, then, happens to meet those data and their importance (to already have an idea of the organization and arrangement of the contents).

Let’s see the data to be provided: name, title, photo, abstract, phone, email, location, professional experiences, skills, passions and hobbies.

If you want to learn more about Bootstrap, please refer some of our other articles/courses:

Define the structure of the layout thinking on grids

Once the design is planned, it's time to define the layout, i.e. the visual structure of your site. Remember to always think of grids! Bootstrap works with up to 12 columns and its layout must respect these limits.

Through simple drawings (called wireframes) made by hand or on the computer itself, you define where and how it will become part of your site like navigation menu, footer, content and what else you have.

Preparing the environment

In its simplest use form, prepare an environment using Bootstrap is extremely easy and fast.

Visit the official page framework (see Links section) and download your compiled version. Unzip the zip file in the desired location and your environment is ready!

Creating the HTML structure

Create the "index.html" file in the root directory and enter the 'standard' Bootstrap framework code available at Listing 1.

Listing 1. Creating our index.html

 <!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Bootstrap - Template basic</title>
 
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
 
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1>Hello World!</h1>
 
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Encoding the structure of the layout and grids

For example, let's divide this step into four steps:

1. Defining the main componentes

Our layout has 3 horizontal components:

2. header;

3. section;

4. footer.

The code to be inserted into the of our "index.html" file to accomplish this separation is quite simple (Listing 2).

Listing 2. Code to insert into body tag.

<header>
    <nav>HEADER > NAV</nav>
</header>
 
<section>
    <aside>SECTION > ASIDE</aside>
    <article>SECTION > ARTICLE</article>
</section>
 
<footer>FOOTER</footer> 

With horizontal structures ready, we can go to the encoding of each component and its divisions in grids, i.e. divisions in layout columns.

Encoding header with the navigation bar

Bootstrap already has a navbar as a ready to use component (and that means you do not need to code a single line for this).

Just enter the available documentation on the official website and look for navbar in the component page.

Copy and paste the code of the navigation bar within your header.

Note that the documentation provides some customizations for each component, an example is the possibility of making the fixed navigation bar at the top or use it with its colors reversed, as it is our case.

Two important points to note:

  • In order to get the elements centered on the page, we simply use the "container" class in the upper elements of each section.
  • When we use the fixed navigation bar at the top, you need to add spacing (margin-top) to the lower element to prevent that it overlaps the navbar.

The code for this example looks like Listing 3.

Listing 3. Main code example.

<header><!-- Your hearder -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"> site name</a>
            </div>
 
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container -->
    </nav>
</header><!-- hearder-finally -->

Encoding the central component (section) and its grids

It is time to work effectively with the grids (since we do not need it in the header, once we use the ready component).

Just like the layout design, the central component defined in the structure of the HTML as a section, you should receive two columns:

  • aside (element left): where will be placed the details of the professional like a photo, name, email, phone, etc;
  • article (element right): main element, where will the texts and more detailed descriptions be placed.

Recalling the rules of the grid system: the columns must be included inand the sum thereof may not exceed 12.

For example, we use the following proportion: 'md-3' for the element aside and 'md-9' for the article (summing 12 in total, filling thereby the width of the page).

Note: the margin-top was added to the section, avoiding that it overlaps the navigation bar.

The code of our section therefore looks like Listing 4.

Listing 4. Code of our section.

<section class="container" style="margin-top:100px;">
    <aside class="col-md-3">
        aside
    </aside>
    <article class="col-md-9">
        article
    </article>
</section>

Encoding footer

Our footer will follow the same logic as the previous element (section), but the proportions are reversed. We will use 'md-9' to the date of last update column and 'md-3' for the column of credits.

In the end, we will have the following code in Listing 5.

Listing 5. Code for our footer.

<footer class="container">
    <hr>
    <div class="row">
        <div class="col-xs-9">Last updated</div>
        <div class="col-xs-3 text-right">Credits</div>
    </div>
</footer>

Code complete

The result is the following code in Listing 6.

Listing 6. Final code of our example.

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap - Basic Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/estilo.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
</head>

<body>

    <header>
        <!-- Header -->
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
					  	</button>
                    <a class="navbar-brand" href="#">website name</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                        <li><a href="#">Link 4</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
    </header>
    <!-- Header-fim -->

    <section class="container">
        <aside class="col-md-3">
            <img class='imagem_artigo' src="imgs/photo.jpg" class="img-responsive img-rounded">
            <h1>Professional name</h1>
            <h5>Main charge</h5>
            <p><strong>Email:</strong> email@email.com<br>
                <strong>Fone:</strong> (xx) xxxx-xxxx<br>
                <strong>Mobile:</strong> (xx) xxxx-xxxx</p>
        </aside>
        <article class="col-md-9">
            <p>Presentation text</p>
            <hr>
            <h2>Title h2</h2>
            <h3>Title h3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <h3>Title h3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <hr>
            <h2>Title h2</h2>
            <h3>Title h3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </article>
    </section>

    <footer class="container">
        <hr>
        <div class="row">
            <div class="col-xs-9">Last update in XX/XX/XX</div>
            <div class="col-xs-3 text-right">Credits</div>
        </div>
    </footer>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>

</html>

Layout coded, now just insert the content and publish. In the end, you will have a result similar to Figure 1.


Figure 1. Result view.

Links

Bootstrap official webpage: http://www.getbootstrap.com/



Web developer and passioned for web design, SEO and front end technologies.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login