Post
Ask Question

Creating a Webpage In BootStrap

Twitter Bootstrap provides built-in CSS that makes it very quick and easy to add clean and functional interface elements to your page. Using Bootstrap you can make a web page (such as a home page) quickly. Any web page has mainly the three parts header, body and footer. Here I created a sample start up page with a very common layout used by many developers. First we create the header, the body and the footer using some built in CSS classes. At the end of the article we combine all the three parts (header, body and footer) in a web page.

In this article, I'm going to show you how to create a start up page with Bootstrap.

What is Bootstrap?

Twitter Bootstrap was created by two guys at Twitter who wanted to speed up and bootstrap their workload and code. The Bootstrap framework is used to develop front facing web applications and sites. When we work on the project there are many things that are required in nearly every project. For example a Grid, Tables, Forms, Buttons and so on. These are the common requirements of any project. With these you can get a web project up and running quickly and easily. The Bootstrap framework provides you all those components. The entire framework is module based, you can customize it with your own bit of CSS. It also provides JavaScript plugins for things like tooltips, popovers, modals and more.

Download Bootstrap

To get your application running quickly with Twitter Bootstrap, let us start by downloading and installing Bootstrap. You can download that from here.

Bootstrap File Structure

After downloading Bootstrap from the preceding link, you will see a Zip folder. Once unzipped, you will find that there are several files and folders available within the root folder bootstrap.

Bootstrap File 

Now add these folders to the Visual Studio folder structure and expand every folder, it will look such as the following:

Bootstrap File Structure

It contains a set of files, namely CSS, js and font.

The CSS folder has a style sheet to design the Twitter Bootstrap project.

The js folder has JavaScript files with various JavaScript plugins in separate files that we will use in our website designs.

The last folder Font contains two sets of images, both are exactly the same except for their foreground color.

Include with HTML

Next up is it's time to include them in the project. So let's imagine we have a blank HTML file that goes something like this:

HTML file

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
  2. <html>  
  3.    <head>  
  4.         <title></title>  
  5.    </head>   
  6.   <body>   
  7.   </body>   
  8. </html> 

Now we need to add a reference to the bootstrap CSS file and JS file with the HTML file.

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
  2. <html>   
  3.      <head>   
  4.            <title></title>   
  5.         <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>   
  6.         <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />   
  7.         <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>   
  8.          </head>   
  9.       <body>              
  10.      </body>   
  11. </html> 

Note: Also don't forget to include jQuery if you'll be using Bootstraps JS plugins.

Creating Menu(Header)

Using Twitter Bootstrap, you may create static navigation menus. To create a menu using Bootstrap open up the bootstrap.css file and check out the CSS class navbar-nav. The HTML file looks such as in the following:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4.     <title></title>   
  5.     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>   
  6.     <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />   
  7.     <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>   
  8. </head>   
  9. <body>   
  10.     <div class="Container">   
  11.         <ul class="nav navbar-nav">   
  12.             <li><a href="#">Home</a></li>   
  13.             <li><a href="#about">Technologies</a></li>   
  14.             <li><a href="#contact">Article</a></li>   
  15.             <li><a href="#contact">blog</a></li>   
  16.             <li><a href="#contact">News</a></li>   
  17.         </ul>   
  18.     </div>     
  19. </body>   
  20. </html>   

The HTML will be rendered with Bootstrap as in the following:

Menu

Adding login with the page using Form Tag(Body)

To make the forms more attractive using Bootstrap, open up the bootstrap.css file and check out the following Bootstrap CSS class. Now first we use the form tag with label and TextBox.

Using bootstrap CSS class="form-control"  

All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%. You can do this by simply applying the Bootstrap's class form-control.  

The HTML file looks such as in the following:

  1. <div style="margin-top: 50px">  
  2.         <div align="center">  
  3.             <form>  
  4.             <div class="form-group">  
  5.                 <label for="inputUserName">  
  6.                     Login Page</label>  
  7.             </div>  
  8.             <div class="form-group">  
  9.                 <label for="inputUserName">  
  10.                     UserName</label>  
  11.                 <input type="email" id="inputEmail" placeholder="UserName">  
  12.             </div>  
  13.             <div class="form-group">  
  14.                 <label for="inputPassword">  
  15.                     Password</label>  
  16.                 <input type="password" id="inputPassword" placeholder="Password">  
  17.             </div>  
  18.             <button type="submit">  
  19.                 Login</button>  
  20.             </form>  
  21.         </div>  
  22.     </div>   

The HTML will be rendered with Bootstrap as in the following:

Login

Creating Footer

Using Twitter Bootstrap, you may create static footer menus. To create a footer using Bootstrap open up the bootstrap.css file and check out the following CSS class and update it with the following code.

.container {
width: 100%;
}

.text-muted {
color: Black;
background-color:red;
height:40px;
text-align:center;
}

The HTML file looks such as in the following:

  1. <div id="footer">  
  2.        <div class="container">  
  3.            <p class="text-muted credit">  
  4.             CONTACT US     PRIVACY POLICY      TERMS & CONDITIONS    SITEMAP</p>  
  5.       </div>  
  6. lt;/div>    

The HTML will be rendered with Bootstrap as in the following:

Footer

Creating a Webpage with Twitter BootStrap

In the preceding part of the article we have explained separately the header, body and footer. Now combine all the preceding parts of the article. The complete code will be displayed as below:

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>  
  6.     <link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />  
  7.     <script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>  
  8. </head>  
  9. <body>  
  10.     <div class="Container">  
  11.         <ul class="nav navbar-nav">  
  12.             <li><a href="#">Home</a></li>  
  13.             <li><a href="#about">Technologies</a></li>  
  14.             <li><a href="#contact">Article</a></li>  
  15.             <li><a href="#contact">blog</a></li>  
  16.             <li><a href="#contact">News</a></li>  
  17.         </ul>  
  18.     </div>  
  19.     <div style="margin-top: 50px">  
  20.         <div align="center">  
  21.             <form>  
  22.             <div class="form-group">  
  23.                 <label for="inputUserName">  
  24.                     Login Page</label>  
  25.             </div>  
  26.             <div class="form-group">  
  27.                 <label for="inputUserName">  
  28.                     UserName</label>  
  29.                 <input type="email" id="inputEmail" placeholder="UserName">  
  30.             </div>  
  31.             <div class="form-group">  
  32.                 <label for="inputPassword">  
  33.                     Password</label>  
  34.                 <input type="password" id="inputPassword" placeholder="Password">  
  35.             </div>  
  36.             <button type="submit">  
  37.                 Login</button>  
  38.             </form>  
  39.         </div>  
  40.     </div>  
  41.     <div style="height: 50px">  
  42.     </div>  
  43.     <div id="footer">  
  44.         <div class="container">  
  45.             <p class="text-muted credit">  
  46.                 CONTACT US     PRIVACY POLICY       
  47.                 TERMS & CONDITIONS    SITEMAP</p>  
  48.         </div>  
  49.     </div>  
  50. </body>  
  51. </html> 

The HTML will be rendered with Bootstrap as in the following:

Web Page


Similar Articles