Post
Ask Question

Bootstrap CSS - Layout A Page

Layout is a mechanism of arranging objects or elements on a paper, screen, or in a physical world according to the vision of an individual, a group, or an organization. In web development, the concept of layout is no different, defining a layout is how the consistency of web pages across the website is ensured. Using any platform for a website, defining a layout is the first step in web development. Some platforms refer to the layout of a page as a master page too, but in essence, layout is how the structure of any website is formalized.

Traditional approach Issues

  1. <div> tag approach is flexible but requires a lot of effort on customization of CSS part. Layout needs to be separately constructed for mobile platforms. In this approach, front-end web developer needs to create and hard code his/her own CSS classes depending on the target screen. This approach is not very adaptive to different screen sizes and a lot buggy in nature.

  2. <table> tag is strict mechanism and is not adaptable for mobile screens in most cases. In this approach, the front-end developer needs to create a lot of tables to define the strict layout of the website. This approach is a very strict method of layout and not adaptable to screen sizes. Also, maintaining a lot of tables in a large application becomes difficult.

Bootstrap CSS

Bootstrap CSS is a CSS based framework for designing a web structure with less efforts. It's flexible and uses a mobile first approach i.e. front-end developer do not need to develop any extra CSS classes to meet the target screen sizes. The idea of Bootstrap CSS is to use one framework to design layout for all screen sizes e.g. front-end developers can use one framework and design two separate layouts i.e. one for web and one for mobile web or can adjust one layout for both web and mobile web.

Bootstrap CSS Features

Bootstrap CSS framework offers the following features.

  1. Layout Grid System.
  2. Styling Web Elements.
  3. Built-In Plugins.


Layout Grid System

Following is the list of few features that Bootstrap CSS layout grid system offers.

Grid Container

Grid container is the base structure of "Bootstrap CSS" which arrange all the content on screen within. There are two types of grid containers i.e.

a) Container class

Container class is the basic class of Bootstrap CSS layout grid system. It adds padding around the content and wrap the content within as shown below i.e.



  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Bootstrap Example</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div class="jumbotron text-center">  
  15.         <h1>My First Bootstrap Page</h1>  
  16.         <p>Resize this responsive page to see the effect!</p>  
  17.     </div>  
  18.     <div class="container">  
  19.         <div class="row">  
  20.             <div class="col-sm-4">  
  21.                 <h3>Column 1</h3>  
  22.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  23.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  24.             </div>  
  25.             <div class="col-sm-4">  
  26.                 <h3>Column 2</h3>  
  27.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  28.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  29.             </div>  
  30.             <div class="col-sm-4">  
  31.                 <h3>Column 3</h3>  
  32.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  33.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  34.             </div>  
  35.         </div>  
  36.     </div>  
  37. </body>  
  38.   
  39. </html>  

The above code can be used in a simple plain "HTML" page that shows how container class is structured.

b) Container-fluid class

Container-fluid class utilizes the entire width of the screen and do not add padding around the content, as shown below.

 

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Bootstrap Example</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div class="jumbotron text-center">  
  15.         <h1>My First Bootstrap Page</h1>  
  16.         <p>Resize this responsive page to see the effect!</p>  
  17.     </div>  
  18.     <div class="container-fluid">  
  19.         <div class="row">  
  20.             <div class="col-sm-4">  
  21.                 <h3>Column 1</h3>  
  22.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  23.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  24.             </div>  
  25.             <div class="col-sm-4">  
  26.                 <h3>Column 2</h3>  
  27.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  28.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  29.             </div>  
  30.             <div class="col-sm-4">  
  31.                 <h3>Column 3</h3>  
  32.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  33.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  34.             </div>  
  35.         </div>  
  36.     </div>  
  37. </body>  
  38.   
  39. </html>    

The above code demonstrates how container-fluid class is structured.

Rows & Columns

Rows and columns are arranged using "row" & "col-screen-*" classes where "screen" defines the type of screen you wish to target and * is a value between 0-12 which defines the width of the column. The screen parameters are as follow.

  1. xs -> for extra small screen devices Phones (<768px)
  2. sm -> for small screen devices Tablets (≥768px)
  3. md -> for medium screen devices Desktops (≥992px)
  4. lg -> for large screen devices Desktops (≥1200px)
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3.   
    4. <head>  
    5.     <title>Bootstrap Example</title>  
    6.     <meta charset="utf-8">  
    7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
    8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
    10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
    11. </head>  
    12.   
    13. <body>  
    14.     <div class="jumbotron text-center">  
    15.         <h1>My First Bootstrap Page</h1>  
    16.         <p>Resize this responsive page to see the effect!</p>  
    17.     </div>  
    18.     <div class="container">  
    19.         <div class="row">  
    20.             <div class="col-sm-4">  
    21.                 <h3>Column 1</h3>  
    22.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    23.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
    24.             </div>  
    25.             <div class="col-sm-4">  
    26.                 <h3>Column 2</h3>  
    27.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    28.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
    29.             </div>  
    30.             <div class="col-sm-4">  
    31.                 <h3>Column 3</h3>  
    32.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    33.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
    34.             </div>  
    35.         </div>  
    36.     </div>  
    37. </body>  
    38.   
    39. </html>   
 
Responsive 12-Column Set

As I have already mentioned above, column classes consist of 4 screen sizes with 12 sets of width. Here is how we can add them all together.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Bootstrap Example</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div class="jumbotron text-center">  
  15.         <h1>My First Bootstrap Page</h1>  
  16.         <p>Resize this responsive page to see the effect!</p>  
  17.     </div>  
  18.     <div class="container-fluid">  
  19.         <div class="row">  
  20.             <div class="col-xs-12 col-sm-6 col-md-4">  
  21.                 <h3>Column 1</h3>  
  22.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  23.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  24.             </div>  
  25.             <div class="col-xs-12 col-sm-6 col-md-4">  
  26.                 <h3>Column 2</h3>  
  27.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  28.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  29.             </div>  
  30.             <div class="col-xs-12 col-sm-6 col-md-4">  
  31.                 <h3>Column 3</h3>  
  32.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  33.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  34.             </div>  
  35.         </div>  
  36.     </div>  
  37. </body>  
  38.   
  39. </html>   
In the above code, I am adding three screen sizes together i.e. extra small, small & medium, "col-xs-12 col-sm-6 col-md-4" and here is how they will look when screen size is change (you can experiment in browser by zooming ub or out the browser).
 
a) Medium Size (col-md-4)

 
b) Small Size (col-sm-6)

 

c) Extra Small Size (col-xs-12)

 

Offsetting Column

In Bootstrap CSS framework, offsetting a column means how much left margin is needed to move the column. "col-screen-offset-*" class is used to move a column to the left.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Bootstrap Example</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div class="jumbotron text-center">  
  15.         <h1>My First Bootstrap Page</h1>  
  16.         <p>Resize this responsive page to see the effect!</p>  
  17.     </div>  
  18.     <div class="container-fluid">  
  19.         <div class="row">  
  20.             <div class="col-sm-4 col-sm-offset-2">  
  21.                 <h3>Column 1</h3>  
  22.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  23.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  24.             </div>  
  25.             <div class="col-sm-4">  
  26.                 <h3>Column 2</h3>  
  27.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  28.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  29.             </div>  
  30.             <div class="col-sm-4 col-sm-offset-4">  
  31.                 <h3>Column 3</h3>  
  32.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  33.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  34.             </div>  
  35.         </div>  
  36.     </div>  
  37. </body>  
  38.   
  39. </html>   
In the above code, we have move our columns to have the following arrangement on screen.
 
 

Ordering Column

In Bootstrap CSS framework, ordering a column means how much we want to push or pull a particular column in a row. "col-screen-push-*" & "col-screen-pull-*" classes are used to order a column.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Bootstrap Example</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div class="jumbotron text-center">  
  15.         <h1>My First Bootstrap Page</h1>  
  16.         <p>Resize this responsive page to see the effect!</p>  
  17.     </div>  
  18.     <div class="container">  
  19.         <div class="row">  
  20.             <div class="col-sm-4 col-sm-push-4">  
  21.                 <h3>Column 1</h3>  
  22.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  23.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  24.             </div>  
  25.             <div class="col-sm-4 col-sm-pull-4">  
  26.                 <h3>Column 2</h3>  
  27.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  28.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  29.             </div>  
  30.             <div class="col-sm-4">  
  31.                 <h3>Column 3</h3>  
  32.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  33.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  34.             </div>  
  35.         </div>  
  36.     </div>  
  37. </body>  
  38.   
  39. </html>  
In the above code, we have ordered our columns as follow.
 

Notice that in the above image, we have changed column 1 with column 2. Here, we have used Bootstrap CSS ordering classes to do so, instead of manually editing the code to achieve above arrangement.

Styling Web Elements

Following is the list of few from many features Bootstrap CSS offers for styling the web elements.

1) Text Highlight

This feature allows to highlight particular text elements within large paragraph. It uses "<mark>" tag to highlight background of the test and "<ins>" tag to underline the text as demonstrate below.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Bootstrap Example</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  11. </head>  
  12.   
  13. <body style="background-color: maroon;color: white;">  
  14.     <div class="jumbotron text-center">  
  15.         <h1>My First Bootstrap Page</h1>  
  16.         <p>Resize this responsive page to see the effect!</p>  
  17.     </div>  
  18.     <div class="container">  
  19.         <div class="row">  
  20.             <div class="col-sm-4 col-sm-push-4">  
  21.                 <h3>Column 1</h3>  
  22.                 <p>Lorem ipsum dolor sit amet, <mark><ins>consectetur adipisicing</ins></mark> elit...</p>  
  23.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  24.             </div>  
  25.             <div class="col-sm-4 col-sm-pull-4">  
  26.                 <h3>Column 2</h3>  
  27.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  28.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  29.             </div>  
  30.             <div class="col-sm-4">  
  31.                 <h3>Column 3</h3>  
  32.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  33.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  34.             </div>  
  35.         </div>  
  36.     </div>  
  37. </body>  
  38.   
  39. </html>   
In the above, "<mark><ins>consectetur adipisicing</ins></mark>" line of code will highlight the column 1 particular text, as shown below.



Keyboard Input Highlight

"<kbd>" tag is used to highlight the keyboard user input keys as demonstrated below.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Bootstrap Example</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div class="jumbotron text-center">  
  15.         <h1>My First Bootstrap Page</h1>  
  16.         <p>Resize this responsive page to see the effect!</p>  
  17.     </div>  
  18.     <div class="container">  
  19.         <div class="row">  
  20.             <div class="col-sm-4">  
  21.                 <h3>Column 1</h3>  
  22.                 <p>Lorem ipsum dolor sit amet, <kbd><kbd>ctrl</kbd> + <kbd>c</kbd></kbd> consectetur adipisicing elit...</p>  
  23.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  24.             </div>  
  25.             <div class="col-sm-4">  
  26.                 <h3>Column 2</h3>  
  27.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  28.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  29.             </div>  
  30.             <div class="col-sm-4">  
  31.                 <h3>Column 3</h3>  
  32.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
  33.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
  34.             </div>  
  35.         </div>  
  36.     </div>  
  37. </body>  
  38.   
  39. </html>   
In the above code, "<kbd><kbd>ctrl</kbd> + <kbd>c</kbd></kbd>" line of code will highlight the keyboard key "Ctrl + C" .

 

Table Style

Bootstrap CSS "table" class can be used to style tables web elements on a website.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Bootstrap Example</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div class="container">  
  15.         <h2>Basic Table</h2>  
  16.         <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>  
  17.         <table class="table table-striped">  
  18.             <thead>  
  19.                 <tr>  
  20.                     <th>Firstname</th>  
  21.                     <th>Lastname</th>  
  22.                     <th>Email</th>  
  23.                 </tr>  
  24.             </thead>  
  25.             <tbody>  
  26.                 <tr>  
  27.                     <td>John</td>  
  28.                     <td>Doe</td>  
  29.                     <td>[email protected]</td>  
  30.                 </tr>  
  31.                 <tr>  
  32.                     <td>Mary</td>  
  33.                     <td>Moe</td>  
  34.                     <td>[email protected]</td>  
  35.                 </tr>  
  36.                 <tr>  
  37.                     <td>July</td>  
  38.                     <td>Dooley</td>  
  39.                     <td>[email protected]</td>  
  40.                 </tr>  
  41.             </tbody>  
  42.         </table>  
  43.     </div>  
  44. </body>  
  45.   
  46. </html>  

In the above code, we have used "table-striped" class along with "table" class to have alternate color for table rows.

 

Buttons Style

In Bootstrap CSS framework, "btn" class in combination with "btm-*" class is used to style the buttons and * represent color. Default colors are theme dependent. Main color classes are "default" (default theme) class, "primary" (primary theme color) class, "danger" (red color) class, "warning" (yellow color) class and "success" (green color) class as demonstrated below. Bootstrap themes can be generated frome here.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Bootstrap Example</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div class="container">  
  15.         <h2>Basic Buttons</h2> <a class="btn btn-danger" href="#" role="button">Link</a> <button class="btn btn-primary" type="submit">Button</button> <input class="btn btn-warning" type="button" value="Input"> <input class="btn btn-success" type="submit" value="Submit"> </body>  
  16.   
  17. </html>   
Above code execution is shown below.

Built-In Plugins

Following are the  many features Bootstrap CSS offers as built-in plugins.

Dropdown Plugin

Bootstrap CSS frame uses combination of "button", "ul", "li" & "a" tags to create a very stylidh dropdown menu.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Bootstrap Example</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div class="container">  
  15.         <h2>Basic Dropdown</h2>  
  16.         <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">    
  17.     
  18. Dropdown    
  19.     
  20. <span class="caret"></span>    
  21.     
  22. </button>  
  23.             <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">  
  24.                 <li><a href="#">Action</a></li>  
  25.                 <li><a href="#">Another action</a></li>  
  26.                 <li><a href="#">Something else here</a></li>  
  27.                 <li role="separator" class="divider"></li>  
  28.                 <li><a href="#">Separated link</a></li>  
  29.             </ul>  
  30.         </div>  
  31. </body>  
  32.   
  33. </html>   
 Above code will show the following stylish dropdown.

Modal Plugin

Modal is a very useful plugin, especially when we want to show particular information on an existing page with interactive behavior instead of loading a new page or using heavy plugins for such matters.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Bootstrap Example</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div class="container">  
  15.         <h2>Modal Example</h2>  
  16.         <!-- Trigger the modal with a button --><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  
  17.         <!-- Modal -->  
  18.         <div class="modal fade" id="myModal" role="dialog">  
  19.             <div class="modal-dialog">  
  20.                 <!-- Modal content-->  
  21.                 <div class="modal-content">  
  22.                     <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button>  
  23.                         <h4 class="modal-title">Modal Header</h4>  
  24.                     </div>  
  25.                     <div class="modal-body">  
  26.                         <p>Some text in the modal.</p>  
  27.                     </div>  
  28.                     <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div>  
  29.                 </div>  
  30.             </div>  
  31.         </div>  
  32.     </div>  
  33. </body>  
  34.   
  35. </html>   

Modal will look like the below image.

 

Tab Plugin

Tabs on a page is another useful plugin offered by Bootstrap CSS framework.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Bootstrap Case</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div class="container">  
  15.         <h2>Tabs</h2>  
  16.         <ul class="nav nav-tabs">  
  17.             <li class="active"><a data-toggle="tab" href="#home">Home</a></li>  
  18.             <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>  
  19.             <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>  
  20.             <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>  
  21.         </ul>  
  22.         <div class="tab-content">  
  23.             <div id="home" class="tab-pane fade in active">  
  24.                 <h3>HOME</h3>  
  25.                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
  26.             </div>  
  27.             <div id="menu1" class="tab-pane fade">  
  28.                 <h3>Menu 1</h3>  
  29.                 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>  
  30.             </div>  
  31.             <div id="menu2" class="tab-pane fade">  
  32.                 <h3>Menu 2</h3>  
  33.                 <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>  
  34.             </div>  
  35.             <div id="menu3" class="tab-pane fade">  
  36.                 <h3>Menu 3</h3>  
  37.                 <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>  
  38.             </div>  
  39.         </div>  
  40.     </div>  
  41. </body>  
  42.   
  43. </html>   
Execution of the above is shown below.

Popover Plugin

Bootstrap CSS framework offers a very interactive popover plugin which can be utilized to display bubble messages.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Bootstrap Example</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  11. </head>  
  12.   
  13. <body>  
  14.     <div class="container"> <br/> <br/> <br/>  
  15.         <h3>Popover Example</h3>  
  16.         <div class="row">  
  17.             <div class="col-xs-12 col-xs-push-2"> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">    
  18.     
  19. Popover on left    
  20.     
  21. </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">    
  22.     
  23. Popover on top    
  24.     
  25. </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus    
  26.     
  27. sagittis lacus vel augue laoreet rutrum faucibus.">    
  28.     
  29. Popover on bottom    
  30.     
  31. </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">    
  32.     
  33. Popover on right    
  34.     
  35. </button> </div>  
  36.         </div>  
  37.     </div>  
  38.     <script>  
  39.         $(document).ready(function() {  
  40.             $('[data-toggle="popover"]').popover();  
  41.         });  
  42.     </script>  
  43. </body>  
  44.   
  45. </html>   

 

Slide (Carousel) Plugin

Depending on the type of website, slider plugin is very handy to highlight featured posts on a website or advertising something.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Bootstrap Example</title>  
  6.     <meta charset="utf-8">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  11.     <style>  
  12.         .carousel-inner>.item>img,  
  13.         .carousel-inner>.item>a>img {  
  14.             width: 100%;  
  15.             margin: auto;  
  16.         }  
  17.     </style>  
  18. </head>  
  19.   
  20. <body>  
  21.     <div class="container"> <br>  
  22.         <div id="myCarousel" class="carousel slide" data-ride="carousel">  
  23.             <!-- Indicators -->  
  24.             <ol class="carousel-indicators">  
  25.                 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>  
  26.                 <li data-target="#myCarousel" data-slide-to="1"></li>  
  27.                 <li data-target="#myCarousel" data-slide-to="2"></li>  
  28.                 <li data-target="#myCarousel" data-slide-to="3"></li>  
  29.             </ol>  
  30.             <!-- Wrapper for slides -->  
  31.             <div class="carousel-inner" role="listbox">  
  32.                 <div class="item active"> <img src="slide1.jpg" alt="Slide-1" width="460" height="345"> </div>  
  33.                 <div class="item"> <img src="slide2.jpg" alt="Slide-2" width="460" height="345"> </div>  
  34.                 <div class="item"> <img src="slide3.jpg" alt="Slide-3" width="460" height="345"> </div>  
  35.                 <div class="item"> <img src="slide4.jpg" alt="Slide-4" width="460" height="345"> </div>  
  36.             </div>  
  37.             <!-- Left and right controls -->  
  38.             <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a>  
  39.             <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>  
  40.         </div>  
  41.     </div>  
  42. </body>  
  43.   
  44. </html>   


Conclusion

In this post, you learned about background of layouts in webpages and about Bootstrap CSS framework. You also learned about bootstrap CSS framework layout grid system, styling of web elements using variety of bootstrap CSS classes, and few from many plugins that Bootstrap CSS framework offers in order to make website interactive and user friendly. Working samples can also be downloaded.

Disclaimer

Most of the code samples are taken from W3Schools. I do not own any sample code except that alterations are made into the sample codes to meet the desired execution.


Similar Articles