How to Create an Awesome web page using Bootstrap

What is a Web Page


A web page is a document that can be viewed using a web browser. A browser uses monitors or mobile devices to display a web page. Some of the famous web browsers are Internet Explorer, Mozilla Firefox, Chrome and Opera.

So Why bootstrap


In order to create web pages you need HTML (Hyper Text Markup Language).  HTML  is the standard markup language used to create web pages. And to style the look and feel of your web page CSS (Cascading Style Sheets language) needs to be used.  This is where bootstrap comes handy, Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components.

How to use bootstrap


1. First need to go to http://getbootstrap.com/ and download the bootstrap package






2. Next extract the downloaded zip file


In the folder you will see css, javascript and different font files. These are the important files that you will be requiring when creating your web page.


Now Let's see how to use bootstrap to create a simple web page


Let's look at a simple design that we are going to create 






In this design there is a main Navigation bar section which includes some tabs. And there is a header section, a description area, a 3 column table and a footer area.

According to the above design we should first create the main structure. So this page has to be divided into 4 main rows. 

This is where the actual coding part begins

1. Open a text editor like notepad or notepad++
2. Link the previously downloaded bootstrap css files to your page header section.


3. Make the Structure by adding 4 main rows and a footer area according to the bootstrap classes.

<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
</head>

<body>

<div class="container">
<div class="row">
 <p>row 1</p>
</div>

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

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

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

</div>

</body>
</html>

4. After adding the main navigation bar and key content area this is how it will look like


the html code

<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
</head>

<body>

<div class="row">
<div class="container">

<!--Main Navigation Bar-->
<div class="row">
<ul class="nav nav-tabs">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">Profile</a></li>
 <li><a href="#">Messages</a></li>
 <li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
 Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
 ....
</ul>
 </li>
</ul>
</div>
<!--End Main Navigation Bar-->

<!--Main key content on your site-->
<div class="row">
 <div class="jumbotron">
 <h2>Hello, world!</h2>
 <p>Sub Heading</p>
 <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
</div>
<!--End key content on your site-->

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

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

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

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

</div>
</div>

</body>
</html>

5. After adding all the other information this is how the final output will look like



And I have included the complete code which will generate the above design.

<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
</head>

<body>

<div class="row">
<div class="container">

<!--Main Navigation Bar-->
<div class="row">
<ul class="nav nav-tabs">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">Profile</a></li>
 <li><a href="#">Messages</a></li>
 <li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
 Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
 ....
</ul>
 </li>
</ul>
</div>
<!--End Main Navigation Bar-->

<!--Main key content on your site-->
<div class="row">
 <div class="jumbotron">
 <h2>Hello, world!</h2>
 <p>Sub Heading</p>
 <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
</div>
<!--End key content on your site-->

<!--Description area-->
<div class="row">
 <div class="col-md-12"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>
</div>
<!--End Description area-->

<!--Table and important info area-->
<div class="row">
 <div class="col-md-8">
 <h3>Some heading for the table</h3>
<table class="table table-hover">
 <tbody>
<tr>
 <td>Jill</td>
 <td>Smith</td> 
 <td>50</td>
</tr>
<tr>
 <td>Eve</td>
 <td>Jackson</td> 
 <td>94</td>
</tr>
<tr>
 <td>Jill</td>
 <td>Smith</td> 
 <td>50</td>
</tr>
<tr>
 <td>Eve</td>
 <td>Jackson</td> 
 <td>94</td>
</tr>
 </tbody>
</table>

 </div>
 
 <div class="col-md-4">
 
<div class="panel panel-info">
 <div class="panel-heading">
<h3 class="panel-title">Important info</h3>
 </div>
 <div class="panel-body">
<p>You can provide some important information here</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
 </div>
</div>

 </div>
 
</div>
<!--End Table and important info area-->

</div>

<div>

</div>
</div>
<!--Footer area-->
<footer style="background: #000; bottom:0px; height:50px;">
 <p style="color:#fff;">Footer info goes here</p>
</footer>
<!--End Footer area-->
</body>

</html>

So the beauty about using bootstrap for web designing is that is gives a very unique clean and awesome finish to the design. Play around these things and you will end up designing some amazing web pages. 

4 comments:

  1. You made some good points there. I did a search on the topic and found most people will agree with your blog..

    Also Visit this site for to learn more about Bootstrap Training

    ReplyDelete
  2. Thank you.Well it was nice post and very helpful information on Big Data Hadoop Online Training

    ReplyDelete
  3. You made some good points there. I did a search on the topic and found most people will agree with your blog..
    SAP GRC Online Training

    SAP Hana admin Online Training

    SAP QM Online Training

    ReplyDelete