Bootstrap

Getting Started With Bootstrap

Introduction

In this tutorial you will learn how to create a basic Bootstrap template using the Twitter Bootstrap v3.2.0 .

Here, you will learn how easy it is to create a web page using Twitter Bootstrap. Before beginning, be sure to have a code editor (Notepad, Dreamweaver and so on) and some working knowledge of HTML and CSS.

What Bootstrap is

Twitter Bootstrap is a very popular and powerful front-end framework currently. It is self-generated for faster and easier web development. Twitter Bootstrap comes prepared with HTML, CSS and JavaScript for various web and user interface components. Bootstrap provides iconography, dropdowns, navigation, alerts, popovers and much more. This is covered in detail in the section Layout Components.

Why to use Bootstrap

  • Mobile First Approach: Since Bootstrap 3, the framework consists of Mobile first styles throughout the entire library instead of in separate files.
  • Browser Support: It is supported by all popular browsers.
  • Easy to Get Started: With just the knowledge of HTML and CSS anyone can get started with Bootstrap.
  • Responsive Design: Bootstrap's responsive CSS adjusts to Desktops, Tablets and Mobiles.
  • Provides a clean and uniform solution for building an interface for developers.
  • It contains beautiful and functional built-in components that are easy to customize. It also provides web based customization.

Downloading the Bootstrap Files

You can download Bootstrap files from here. Compiled download contain compiled and minified CSS, JavaScript and fonts.

Understanding the File Structure

After downloading the Bootstrap files, unzip the compressed folder to see the structure. You'll find the following file structure and contents.




You can see that the compiled version of Bootstrap provides compiled CSS and JavaScript files (bootstrap.*), as well as compiled and minified CSS and JavaScript (bootstrap.min.*).
  
There are four font files (glyphicons-halflings-regular.*) inside the fonts folder. These fonts files includes 200 icons from the Glyphicon Halflings set.
  
Creating Your First Web Page with Twitter Bootstrap
  
You have learned the structure and the purposes of Bootstrap files, now we'll create a basic Bootstrap template that includes everything we specified in the file structure. You will have made an HTML file that displays "Welcome Bootstrap" message in your web browser.
  
Step 1: Creating a Basic HTML File
  
Open up your code editor and create a new HTML file. Start with an empty window and type the following code:

  1. <!DOCTYPE html >  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Basic HTML</title>  
  6. </head>  
  7. <body>  
  8.     <h1>Welcome Bootstrap</h1>  
  9. </body>  
  10. </html> 

Result:

Step 2: Making this HTML File a Bootstrapped Template
 
 To make this HTML file a Bootstrapped template, just include the appropriate Bootstrap CSS and JavaScript files.
 
 Note: You should include JavaScript files at the bottom of the page; before closing the <body> tag (in other words </body>) to improve the performance of your web pages. 
  1. <!DOCTYPE html >   
  2.  <html>   
  3.  <head>   
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5.  <title>HTML with Bootstrap</title>   
  6.  <!-- compiled and minified CSS -->   
  7.  <link rel="stylesheet" href="css/bootstrap.min.css">   
  8.  <!-- Optional theme -->   
  9.  <link rel="stylesheet" href="css/bootstrap-theme.min.css">   
  10.  </head>   
  11.  <body>   
  12.      <h1>Welcome Bootstrap</h1>   
  13.      <!-- compiled and minified JavaScript -->   
  14.      <script type="text/javascript" src="js/bootstrap.min.js"></script>   
  15.  </body>   
  16.  </html> 
Result:

Bootstrap Grid System

The Twitter Bootstrap grid system provides the fastest and easiest way to create layouts of web pages. It introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or view port size increases. It includes predefined grid classes for making grid layouts for various types of devices, like phones, tablets, desktop, and so on, as well as powerful mixings for generating more semantic layouts.

The Grid Sizes

It has four tiers of classes xs, sm, md and lg. You can use any combination of these classes to create more dynamic and flexible layouts. The following is the breakdown of the various sizes of these classes.

Classes Devices Size
.col-xs-* Extra Small Phones Less than 768px
.col-sm-* Small Devices Tablets 768px and Up
.col-md-* Medium Devices Desktops 992px and Up
.col-lg-* Large Devices Large Desktops 1200px and Up

Structure of Bootstrap Grid Layout

Working of Bootstrap Grid System

Grid systems are used for creating page layouts through a series of rows and columns . Here's how the Bootstrap grid system works:

  • Rows must be placed within a .container and .container-fluid class for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixings can also be used for more semantic layouts.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

Create Layouts with Bootstrap Grid System

In the preceding image there are 4 rows. The first row contains 12 columns. The second row contains 4 columns. The third row contains 3 columns. And the last row contains 2 columns. Now we create a HTML file for the above grid image structure.

HTML Code

  1. <!DOCTYPE html >   
  2. <html>   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5. <title>Bootstrap Grid System</title>   
  6. <!-- compiled and minified CSS -->   
  7. <link rel="stylesheet" href="css/bootstrap.min.css">   
  8. <!-- Optional theme -->   
  9. <link rel="stylesheet" href="css/bootstrap-theme.min.css">   
  10. </head>   
  11.   
  12. <body>   
  13.     <div class="container">   
  14.         <!-- First Row -->   
  15.         <div class="row">   
  16.             <h3>First Row</h3>   
  17.             <div class="col-md-1">1</div>   
  18.             <div class="col-md-1">1</div>   
  19.             <div class="col-md-1">1</div>   
  20.             <div class="col-md-1">1</div>   
  21.             <div class="col-md-1">1</div>   
  22.             <div class="col-md-1">1</div>   
  23.             <div class="col-md-1">1</div>   
  24.             <div class="col-md-1">1</div>   
  25.             <div class="col-md-1">1</div>   
  26.             <div class="col-md-1">1</div>   
  27.             <div class="col-md-1">1</div>   
  28.             <div class="col-md-1">1</div>   
  29.         </div>   
  30.   
  31.         <!-- Second Row -->   
  32.         <div class="row">   
  33.             <h3>Second Row</h3>   
  34.             <div class="col-md-3">3</div>   
  35.             <div class="col-md-3">3</div>   
  36.             <div class="col-md-3">3</div>   
  37.             <div class="col-md-3">3</div>   
  38.         </div>   
  39.   
  40.         <!-- Third Row -->   
  41.         <div class="row">   
  42.             <h3>Third Row</h3>   
  43.             <div class="col-md-4">4</div>   
  44.             <div class="col-md-4">4</div>   
  45.             <div class="col-md-4">4</div>   
  46.         </div>   
  47.   
  48.         <!-- Fourth Row -->   
  49.         <div class="row">   
  50.             <h3>Fourth Row</h3>   
  51.             <div class="col-md-6">6</div>   
  52.             <div class="col-md-6">6</div>   
  53.         </div>   
  54.     </div>   
  55.   
  56. <!-- compiled and minified JavaScript -->   
  57. <script type="text/javascript" src="js/bootstrap.min.js"></script>   
  58. </body>   
  59. </html> 

Result:


Now it's time to customize our layout for other devices. For other device's layout we use the sm, xs and lg class tier depending on the device. For a tablet we will use the same design layout structure so we use the .col-sm-* class as well as .col-md-*, for example:
  1. <div class="col-md-1">1</div> 
Is changed to:
  1. <div class="col-md-1 col-sm-1">1</div> 
Now we have customized our layout for extra small devices. For extra small devices we use the .col-xs-* class. In a tablet and a desktop device we have a total of 21 columns. Now we break the grid system as:

In the preceding image there are 10 rows. Now we create a HTML file for the above grid image structure.
 
 HTML Code
  1. <!DOCTYPE html >   
  2. <html>   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5. <title>Bootstrap Grid System</title>   
  6. <!-- compiled and minified CSS -->   
  7. <link rel="stylesheet" href="css/bootstrap.min.css">   
  8. <!-- Optional theme -->   
  9. <link rel="stylesheet" href="css/bootstrap-theme.min.css">   
  10. </head>   
  11.   
  12. <body>   
  13.     <div class="container">   
  14.         <!-- First Row -->   
  15.         <div class="row">   
  16.             <h3>First Row</h3>   
  17.             <div class="col-md-1 col-sm-1 col-xs-3">1</div>   
  18.             <div class="col-md-1 col-sm-1 col-xs-3">1</div>   
  19.             <div class="col-md-1 col-sm-1 col-xs-3">1</div>   
  20.             <div class="col-md-1 col-sm-1 col-xs-3">1</div>   
  21.             <div class="col-md-1 col-sm-1 col-xs-3">1</div>   
  22.             <div class="col-md-1 col-sm-1 col-xs-3">1</div>   
  23.             <div class="col-md-1 col-sm-1 col-xs-3">1</div>   
  24.             <div class="col-md-1 col-sm-1 col-xs-3">1</div>   
  25.             <div class="col-md-1 col-sm-1 col-xs-3">1</div>   
  26.             <div class="col-md-1 col-sm-1 col-xs-3">1</div>   
  27.             <div class="col-md-1 col-sm-1 col-xs-3">1</div>   
  28.             <div class="col-md-1 col-sm-1 col-xs-3">1</div>   
  29.         </div>   
  30.   
  31.         <!-- Second Row -->   
  32.         <div class="row">   
  33.             <h3>Second Row</h3>   
  34.             <div class="col-md-3 col-sm-3 col-xs-6">3</div>   
  35.             <div class="col-md-3 col-sm-3 col-xs-6">3</div>   
  36.             <div class="col-md-3 col-sm-3 col-xs-6">3</div>   
  37.             <div class="col-md-3 col-sm-3 col-xs-6">3</div>   
  38.         </div>   
  39.   
  40.         <!-- Third Row -->   
  41.         <div class="row">   
  42.             <h3>Third Row</h3>   
  43.             <div class="col-md-4 col-sm-4 col-xs-12">4</div>   
  44.             <div class="col-md-4 col-sm-4 col-xs-12">4</div>   
  45.             <div class="col-md-4 col-sm-4 col-xs-12">4</div>   
  46.         </div>   
  47.   
  48.         <!-- Fourth Row -->   
  49.         <div class="row">   
  50.             <h3>Fourth Row</h3>   
  51.             <div class="col-md-6 col-sm-6 col-xs-12">6</div>   
  52.             <div class="col-md-6 col-sm-6 col-xs-12">6</div>   
  53.         </div>   
  54.     </div>   
  55. <!-- compiled and minified JavaScript -->   
  56. <script type="text/javascript" src="js/bootstrap.min.js"></script>   
  57. </body>   
  58. </html> 
Result:

Similarly you can customize the layout for a larger device like a large desktop screen. For a larger device you can used .col-lg-* classes.
 
In the grid system of bootstrap, you notice that every row has an equal number of classes . You can see that in the following image:



Twitter Bootstrap Responsive Utilities Classes

You can use the following responsive classes to enable the element's visibility depending on the device screen sizes.

Class Description
.visible-xs-* Visible the elements only on extra small devices having screen width less than 768px. Hidden on others.
.visible-sm-* Visible the elements only on small devices having screen width greater than or equal to 768px. Hidden on others.
.visible-md-* Visible the elements only on medium devices having screen width greater than or equal to 992px. Hidden on others.
.visible-lg-* Visible the elements only on larger devices having screen width greater than or equal to 1200px. Hidden on others.

Note: You can also mix these classes to make the elements visible on multiple devices.

HTML Code

  1. <!DOCTYPE html >   
  2. <html>   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5. <title>Responsive</title>   
  6. <!-- compiled and minified CSS -->   
  7. <link rel="stylesheet" href="css/bootstrap.min.css">   
  8. <!-- Optional theme -->   
  9. <link rel="stylesheet" href="css/bootstrap-theme.min.css">   
  10. </head>   
  11.   
  12. <body>   
  13.     <p class="visible-xs-block">This paragraph is visible only on extra small devices.</p>   
  14.     <p class="visible-sm-block">This paragraph is visible only on small devices.</p>   
  15.     <p class="visible-md-block">This paragraph is visible only on medium devices.</p>   
  16.     <p class="visible-lg-block">This paragraph is visible only on large devices.</p>   
  17.     <!-- compiled and minified JavaScript -->   
  18.     <script type="text/javascript" src="js/bootstrap.min.js"></script>   
  19. </body>   
  20. </html> 

Similarly you can use these hidden utility classes to hide the elements depending on the devices.

 

Class Description
.hidden-xs-* Hide the elements only on extra small devices having screen width less than 768px. Visible on others.
.hidden-sm-* Hide the elements only on small devices having screen width greater than or equal to 768px. Visible on others
.hidden-md-* Hide the elements only on medium devices having screen width greater than or equal to 992px. Visible on others.
.hidden-lg-* Hide the elements only on larger devices having screen width greater than or equal to 1200px. Visible on others.

Code:
  1. <p class="hidden-xs">This paragraph is hidden only on extra small devices.</p>   
  2. <p class="hidden-sm">This paragraph is hidden only on small devices.</p>   
  3. <p class="hidden-md">This paragraph is hidden only on medium devices.</p>   
  4. <p class="hidden-lg">This paragraph is hidden only on large devices.</p> 
Creating Fixed Layout with Bootstrap

With Bootstrap you can create layouts of web pages based on a fixed number of pixels. To create the fixed yet responsive layout you should start the container with the .container class. Then create the row with the .row class to wrap the horizontal groups of columns. Rows must be placed within a container for proper alignment and padding. Further columns can be created within rows using the predefined grid classes like .col-xs-*, .col-sm-*, .col-md-* and .col-lg-* where * represents a grid number.

The following code creates a fixed width responsive layout that is 970px wide on a medium device like desktop and laptop having screen width ≥992px and 1170px wide on large devices like large desktops having screen width ≥1200px. However the layout width will be automatically calculated for devices that has a screen width <768px like tablets and cell phones.

HTML Code
  1. <!DOCTYPE html >   
  2. <html>   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5. <title>Fixed Layout with Bootstrap</title>   
  6. <!-- compiled and minified CSS -->   
  7. <link rel="stylesheet" href="css/bootstrap.min.css">   
  8. <!-- Optional theme -->   
  9. <link rel="stylesheet" href="css/bootstrap-theme.min.css">   
  10. </head>   
  11.   
  12. <body>   
  13.     <div class="container">   
  14.         <div class="jumbotron">   
  15.             <h1>Fixed Layout with Bootstrap </h1>   
  16.             <p>With Bootstrap you can create layouts of web pages based on fixed number of pixels.
    To create the fixed yet responsive layout you should starts container with the .container class.   
  17. After that create row with the .row class to wrap the horizontal groups of columns.   
  18. Rows must be placed within a container for proper alignment and padding. Further columns can be create within rows
    using the predefined grid classes like .col-xs-*, .col-sm-*, .col-md-* and .col-lg-* where * represent grid number.</p>   
  19.         </div>   
  20.         <div class="row">   
  21.             <div class="col-sm-4">   
  22.                 <h2>HTML</h2>   
  23.                 <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will
    help you understand the basics of HTML, so that you can create your own web pages or website.    </p>   
  24.             </div>   
  25.             <div class="col-sm-4">   
  26.                 <h2>CSS</h2>   
  27.                 <p>CSS is used for describing the presentation of web pages. The CSS tutorial section will
    help you learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.    </p>   
  28.             </div>   
  29.             <div class="col-sm-4">   
  30.                 <h2>Bootstrap</h2>   
  31.                 <p>Bootstrap is a powerful front-end framework for faster and easier web development. The Bootstrap
    tutorial section will help you learn the techniques of Bootstrap so that you can quickly create your own website.    </p>   
  32.             </div>   
  33.         </div>   
  34.         <hr>   
  35.     </div>   
  36.   
  37.     <!-- compiled and minified JavaScript -->   
  38.     <script type="text/javascript" src="js/bootstrap.min.js"></script>   
  39. </body>   
  40. </html> 
Result:

On a tablet, desktop and larger device:

Mobile Device



Creating Fluid Layout with Bootstrap
 
With Bootstrap you can create a Fluid layout. For creating the fluid layout you can use the class .container-fluid to utilize the 100% width of the view port. The class .container-fluid simply applies the horizontal margin with the value auto and left and right padding of 15px on the element to offset the left and right margin of -15px used on the .row.
 
 The following code creates a fluid layout that covers the entire width of the screen.
 
 HTML Code

  1. <div class="container-fluid">   
  2.     <div class="jumbotron">   
  3.         <h1>Fluid Layout with Bootstrap </h1>   
  4.         <p>With Bootstrap you can create Fluid layout. For Creating the fluid layout you can use the class .container-fluid
    in order to utilize the 100% width of view port. The class .container-fluid simply applies the horizontal margin with the
    value auto and left and right padding of 15px on element to offset the left and right margin of -15px used on .row.    </p>   
  5.     </div>   
  6.     <div class="row">   
  7.         <div class="col-sm-4">   
  8.             <h2>HTML</h2>   
  9.             <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help you
    understand the basics of HTML, so that you can create your own web pages or website.    </p>   
  10.         </div>   
  11.         <div class="col-sm-4">   
  12.             <h2>CSS</h2>   
  13.             <p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you learn
    the essentials of CSS, so that you can fine control the style and layout of your HTML document.    </p>   
  14.         </div>   
  15.         <div class="col-sm-4">   
  16.             <h2>Bootstrap</h2>   
  17.             <p>Bootstrap is a powerful front-end framework for faster and easier web development. The Bootstrap tutorial
    section will help you learn the techniques of Bootstrap so that you can quickly create your own website.    </p>   
  18.         </div>   
  19.     </div>   
  20.     <hr>   
  21. </div> 

Creating Responsive Layout with Bootstrap
 
Responsive web design is a process of designing and building websites to provide better accessibility and an optimal viewing experience for the user. Responsive layouts automatically adjust and adapt to any device screen size, whether it is a desktop, a laptop, a tablet, or a mobile phone.
 
With the new Twitter Bootstrap 3 mobile first grid system creating the responsive and mobile friendly websites has become much easier. As opposed to previous versions you don't need to include any additional style sheet to enable the responsive feature.
 
 HTML Code

  1. <!DOCTYPE html >   
  2. <html>   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5. <title>Responsive Layout with Bootstrap</title>   
  6. <!-- compiled and minified CSS -->   
  7. <link rel="stylesheet" href="css/bootstrap.min.css">   
  8. <!-- Optional theme -->   
  9. <link rel="stylesheet" href="css/bootstrap-theme.min.css">   
  10. </head>   
  11.   
  12. <body>   
  13.     <div class="container-fluid">   
  14.         <div class="jumbotron">   
  15.             <h1>Responsive Layout with Bootstrap </h1>   
  16.             <p>Responsive web design is a process of designing and building websites to provide better accessibility
    and optimal viewing experience to the user.Responsive layouts automatically adjust and adapts to any device screen size,
    whether it is a desktop, a laptop, a tablet, or a mobile phone.    </p>   
  17.         </div>   
  18.         <div class="row">   
  19.             <div class="col-sm-6 col-md-4 col-lg-2">   
  20.                 <h2>Column-1</h2>   
  21.                 <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will help
    you understand the basics of HTML, so that you can create your own web pages or website.    </p>   
  22.             </div>   
  23.             <div class="col-sm-6 col-md-4 col-lg-2">   
  24.                 <h2>Column-2</h2>   
  25.                 <p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you
    learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.    </p>   
  26.             </div>   
  27.             <div class="clearfix visible-sm-block"></div>   
  28.             <div class="col-sm-6 col-md-4 col-lg-2">   
  29.                 <h2>Column-3</h2>   
  30.                 <p>Bootstrap is a powerful front-end framework for faster and easier web development. The Bootstrap
    tutorial section will help you learn the techniques of Bootstrap so that you can quickly create your own website.    </p>   
  31.             </div>   
  32.             <div class="clearfix visible-md-block"></div>   
  33.             <div class="col-sm-6 col-md-4 col-lg-2">   
  34.                 <h2>Column-4</h2>   
  35.                 <p>HTML is a markup language that is used for creating web pages. The HTML tutorial section will
    help you understand the basics of HTML, so that you can create your own web pages or website.    </p>   
  36.             </div>   
  37.             <div class="clearfix visible-sm-block"></div>   
  38.             <div class="col-sm-6 col-md-4 col-lg-2">   
  39.                 <h2>Column-5</h2>   
  40.                 <p>CSS is used for describing the presentation of web pages. The CSS tutorial section will help you
    learn the essentials of CSS, so that you can fine control the style and layout of your HTML document.    </p>   
  41.             </div>   
  42.             <div class="col-sm-6 col-md-4 col-lg-2">   
  43.                 <h2>Column-6</h2>   
  44.                 <p>Bootstrap is a powerful front-end framework for faster and easier web development. The Bootstrap
    tutorial section will help you learn the techniques of Bootstrap so that you can quickly create your own website.    </p>   
  45.             </div>   
  46.         </div>   
  47.     </div>   
  48.   
  49. <!-- compiled and minified JavaScript -->   
  50. <script type="text/javascript" src="js/bootstrap.min.js"></script>   
  51. </body>   
  52. </html> 

In the HTML above you can see the use of 6 columns for larger devices like desktops, 3 columns for medium devices like laptops, 2 columns for small devices like tablets and 1 columns for extra small devices like phones. For clarity the float property from .col-* classes we can used the .clearfix class depending on conditions using the .visible-* class.
 
 Result:
 
 Large Device (Desktop)



Medium Device (Laptop)



Small Device (Tablet)



Extra Small Device (Phone)

Summary

This article explained the basics of Bootstrap, installing Bootstrap in your HTML page, Bootstrap Grip and Layout of Bootstrap. In the further article you will learn styling and formatting of text content, table, form, list, image and icons in Bootstrap. Thanks for reading.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs