Programming Tutorials

  • View all tutorials
  • Using Bootstrap
    Bootstrap is a CSS and JavaScript framework that helps create mobile-friendly and responsive websites. It also comes with some basic themes to help you design website features more quickly.

    Installing Bootstrap

    To use Bootstrap, you can either download the source code from the website and include it locally, or you can include the CDN hosted links:
    <!DOCTYPE html>
    <html>
    
      <head> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title> Testing Bootstrap </title>   
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
        <!-- our own styles will go in style.css -->  
        <link rel="stylesheet" href="style.css">
        <!-- bootstrap styles and scripts included below -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>      
      </head>
    
      <body>
      </body>
    
    </html>
    

    Grid System

    Now that we have Bootstrap installed, we can start using some of its styles and properties via classes. We can attach specific class names to elements and they will behave in certain ways. For example, first we'll cover the Bootstrap grid system. Bootstrap allows you to easily split a row of the web page up into a grid. There can be up to 12 cells on a single row, see photo below for reference (source). To start off, all of the Bootstrap classes we add must be within a .container class (or a .container-fluid class which takes up the full width of the page [source]). Then to create a row with a specific number of cells in the grid, we use the .row class and the .col-*-* class. The first asterisk can be either: xs (for phones) sm (for tablets) md (for desktop) lg (for large desktops) The second asterisk can be a number ranging from 1 to 12 representing the number of cells in a row (the numbers in a row must add up to 12). Below is an example with 3 cells in a row:
    <!DOCTYPE html>
    <html>
    
      <head> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title> Testing Bootstrap </title>   
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
        <!-- our own styles will go in style.css -->  
        <link rel="stylesheet" href="style.css">
        <!-- bootstrap styles and scripts included below -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>      
      </head>
    
      <body>
        <div class="container">
          <h1>My First Bootstrap Page</h1>
          <div class="row">
            <div class="col-sm-2">A</div>
            <div class="col-sm-2">B</div>
            <div class="col-sm-8">C</div>
          </div>
        </div>
      </body>
    
    </html>
    
    And in style.css we'll add the following code for setting the background color:
    .container .row div:nth-child(1) {
      background: lightgray;
    }
    
    .container .row div:nth-child(2) {
      background: lightblue;
    }
    
    .container .row div:nth-child(3) {
      background: lightgreen;
    }
    
    You can test the code live on jsfiddle. You can see that there are three cells in the row each with a different background color. Feel free to change the numbers from 2, 2, and 8, but make sure if you add or remove cells that the total adds up to 12. You can see that the cells are automatically given a width, but the great thing about Bootstrap is that when you resize the page and change the width, the container and cells automatically respond and the width is updated. In the previous tutorial we covered how to use media queries to have elements on the page update their size when on a mobile device, but this feature is automatically built into Bootstrap. This means that when you create a grid (or table as we'll see soon) the design will automatically be responsive on mobile and tablet devices. See what happens when you resize the window in jsfiddle.

    Tables

    Similar to creating grids, to create a table with some built-in styles we will use the .table class and then create a normal table. You also have a few separate clases for the type of table, for example: .table-striped .table-bordered .table-hover .table-condensed Below is an example of a table with Bootstrap classes:
    <!DOCTYPE html>
    <html>
    
      <head> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title> Testing Bootstrap </title>   
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
        <!-- our own styles will go in style.css -->  
        <link rel="stylesheet" href="style.css">
        <!-- bootstrap styles and scripts included below -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>      
      </head>
    
      <body>
        <div class="container">
          <table class='table table-striped'>
            <thead>
              <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Email</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>John Smith</td>
                <td>21</td>
                <td>[email protected]</td>
              </tr>
              <tr>
                <td>Bob Wilson</td>
                <td>42</td>
                <td>[email protected]</td>
              </tr>
            </tbody>
          </table>
        </div>
      </body>
    
    </html>
    
    You can see the table in action on jsfiddle. Notice how when you resize the window, the table row widths are update as well. Bootstrap also provides you with table contextual classes, so you can provide a color for a table row depending on what type it is. You can see contextual classes in action at this jsfiddle link.

    Forms

    Below is an example of how you would use Bootstrap form classes to create a simple, easy-to-understand form. The classes we'll be using are: .form-group .form-control .btn, .btn-success, .btn-block, etc.
    <!DOCTYPE html>
    <html>
    
      <head> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title> Testing Bootstrap </title>   
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
        <!-- our own styles will go in style.css -->  
        <link rel="stylesheet" href="style.css">
        <!-- bootstrap styles and scripts included below -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>      
      </head>
    
      <body>
        <div class="container" style="width:400px;">
          <h1>Contact Form</h1>
          <form>
            <div class="form-group">
              <label for="name">Name:</label>
              <input type="text" class="form-control" id="name">
            </div>
            <div class="form-group">
              <label for="email">Email:</label>
              <input type="text" class="form-control" id="email">
            </div>
            <div class="form-group">
              <textarea class="form-control" rows="3">message goes here...</textarea>
            </div>
            <div class="form-group">
              <input class="btn btn-success btn-block" type="submit" value="Submit">
            </div>
            <div class="form-group">
              <input class="btn btn-info" type="button" value="Help">
              <input class="btn btn-danger" type="button" value="Go back">
            </div>
          </form>
        </div>
      </body>
    
    </html>
    
    The following code, with a few simple Bootstrap CSS classes, will produce the form below: You can test the form live on jsfiddle.

    Conclusion

    Bootstrap has a lot of useful features that weren't covered in this tutorial, such as: Button state Image carousels Popup modals Progress bars Website dropdowns Website navigation Feel free to navigate to any of those links and learn more about Bootstrap CSS classes or JavaScript functions and plugins. Now that you have a basic understanding of how Bootstrap CSS classes work, hopefully it'll be easier to implement some new Bootstrap features you learn about.
    mrdaniel wrote this tutorial on 7/14/16 | html, css, bootstrap
    Comments
  • +
  • 3
  • -
  • <html>cool</html>
  • +
  • 1
  • -
  • Can we use Bootstrap With any programming language? eg: ASP, PHP, Javascript
    Log in to submit a comment.