Header Ads

Bootstrap CSS: Layout a Page

March 14, 2017 , , ,
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 a 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 layout of a page as a master page too, but in an essence, layout is how the structure of any website is formalized.

You can download the complete source code for this tutorial or you can follow the step by step discussion below. The sample code is being developed in Microsoft Visual Studio 2015 Enterprise.

Download Now!

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 construct for mobile platforms. In this approach, front-end web developer needs to create and hard code his/her own CSS classes depend on 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 of the cases. In this approach, front-end developer needs to create a lot of tables to define the strict layout of the website. This approach is 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 effort. Its 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 following features i.e.

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


3) Layout Grid System

Following are the list of few from many features Bootstrap CSS layout grid system offers i.e.

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


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

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

2) Rows & Columns

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

a) xs -> for extra small screen devices Phones (<768px)
b) sm -> for small screen devices Tablets (≥768px)  
c) md -> for medium screen devices Desktops (≥992px)  
d) lg -> for large screen devices Desktops (≥1200px)

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



3) Responsive 12-Column Set

As already mention above that column classes consist of 4 screen sizes with 12 set of width. Here below is how can we add them all together i.e.
  
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
 <div class="jumbotron text-center">  
  <h1>My First Bootstrap Page</h1>  
  <p>Resize this responsive page to see the effect!</p>   
 </div>  
 <div class="container-fluid">  
  <div class="row">  
   <div class="col-xs-12 col-sm-6 col-md-4">  
    <h3>Column 1</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
   <div class="col-xs-12 col-sm-6 col-md-4">  
    <h3>Column 2</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
   <div class="col-xs-12 col-sm-6 col-md-4">  
    <h3>Column 3</h3>      
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
  </div>  
 </div>  
 </body>  
 </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 how they will look when screen size is change (you can experiment in browser by changing browser zooms) i.e.

a) Medium Size (col-md-4)

 



b) Small Size (col-sm-6)

 


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

 


4) Offsetting Column

In Bootstrap CSS framework offsetting a column means that how much left margin is needed to move the column. "col-screen-offset-*" class is used to move column left i.e.
  
<!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
 <div class="jumbotron text-center">  
  <h1>My First Bootstrap Page</h1>  
  <p>Resize this responsive page to see the effect!</p>   
 </div>  
 <div class="container-fluid">  
  <div class="row">  
   <div class="col-sm-4 col-sm-offset-2">  
    <h3>Column 1</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
   <div class="col-sm-4">  
    <h3>Column 2</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
   <div class="col-sm-4 col-sm-offset-4">  
    <h3>Column 3</h3>      
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
  </div>  
 </div>  
 </body>  
 </html>
 
In the above code, we have move our columns to have following arrangement on screen i.e.


5) Ordering Column

In Bootstrap CSS framework ordering a column means that 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 i.e.

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
 <div class="jumbotron text-center">  
  <h1>My First Bootstrap Page</h1>  
  <p>Resize this responsive page to see the effect!</p>   
 </div>  
 <div class="container">  
  <div class="row">  
   <div class="col-sm-4 col-sm-push-4">  
    <h3>Column 1</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
   <div class="col-sm-4 col-sm-pull-4">  
    <h3>Column 2</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
   <div class="col-sm-4">  
    <h3>Column 3</h3>      
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
  </div>  
 </div>  
 </body>  
 </html>
 
In the above code, we have order our columns as follow i.e.


Notice in above image that we have change 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.

2) Styling Web Elements

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

1) Text Highlight

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

<!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
 </head>  
 <body style="background-color: maroon;color: white;">  
 <div class="jumbotron text-center">  
  <h1>My First Bootstrap Page</h1>  
  <p>Resize this responsive page to see the effect!</p>   
 </div>  
 <div class="container">  
  <div class="row">  
   <div class="col-sm-4 col-sm-push-4">  
    <h3>Column 1</h3>  
    <p>Lorem ipsum dolor sit amet, <mark><ins>consectetur adipisicing</ins></mark> elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
   <div class="col-sm-4 col-sm-pull-4">  
    <h3>Column 2</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
   <div class="col-sm-4">  
    <h3>Column 3</h3>      
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
  </div>  
 </div>  
 </body>  
 </html>

In the above "mark & ins" tags will highlight the column 1 particular text as shown below i.e.


2) Keyboard Input Highlight

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

<!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
 <div class="jumbotron text-center">  
  <h1>My First Bootstrap Page</h1>  
  <p>Resize this responsive page to see the effect!</p>   
 </div>  
 <div class="container">  
  <div class="row">  
   <div class="col-sm-4">  
    <h3>Column 1</h3>  
    <p>Lorem ipsum dolor sit amet, <kbd><kbd>ctrl</kbd> + <kbd>c</kbd></kbd> consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
   <div class="col-sm-4">  
    <h3>Column 2</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
   <div class="col-sm-4">  
    <h3>Column 3</h3>      
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>  
   </div>  
  </div>  
 </div>  
 </body>  
 </html>
 
In the above code, "ctrl + c" line of code will highlight the keyboard key "Ctrl + C" as shown below i.e.

3) Table Style

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


 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
 <div class="container">  
  <h2>Basic Table</h2>  
  <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>        
  <table class="table table-striped">  
   <thead>  
    <tr>  
     <th>Firstname</th>  
     <th>Lastname</th>  
     <th>Email</th>  
    </tr>  
   </thead>  
   <tbody>  
    <tr>  
     <td>John</td>  
     <td>Doe</td>  
     <td>john@example.com</td>  
    </tr>  
    <tr>  
     <td>Mary</td>  
     <td>Moe</td>  
     <td>mary@example.com</td>  
    </tr>  
    <tr>  
     <td>July</td>  
     <td>Dooley</td>  
     <td>july@example.com</td>  
    </tr>  
   </tbody>  
  </table>  
 </div>  
 </body>  
 </html>

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


4) Buttons Style

In Bootstrap CSS frame work "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 from here
  
<!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
 <div class="container">  
  <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>  
 </html>

Above code execution is shown below i.e.


3) Built-In Plugins

Following are the list of few from many features Bootstrap CSS offers as built-in plugins i.e.

1) Dropdown Plugin

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


<!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
 <div class="container">  
  <h2>Basic Dropdown</h2>  
 <div class="dropdown">  
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">  
   Dropdown  
   <span class="caret"></span>  
  </button>  
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">  
   <li><a href="#">Action</a></li>  
   <li><a href="#">Another action</a></li>  
   <li><a href="#">Something else here</a></li>  
   <li role="separator" class="divider"></li>  
   <li><a href="#">Separated link</a></li>  
  </ul>  
 </div>  
 </body>  
 </html>

Above code will show following stylish dropdown plugin i.e.


2) Modal Plugin

Modal is a very useful plugin, especially, when we want to show particular information on existing page with interactive behavior instead of loading a new page or using heavy plugins for such matter i.e.
  
<!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
 <div class="container">  
  <h2>Modal Example</h2>  
  <!-- Trigger the modal with a button -->  
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  
  <!-- Modal -->  
  <div class="modal fade" id="myModal" role="dialog">  
   <div class="modal-dialog">  
    <!-- Modal content-->  
    <div class="modal-content">  
     <div class="modal-header">  
      <button type="button" class="close" data-dismiss="modal">&times;</button>  
      <h4 class="modal-title">Modal Header</h4>  
     </div>  
     <div class="modal-body">  
      <p>Some text in the modal.</p>  
     </div>  
     <div class="modal-footer">  
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
     </div>  
    </div>  
   </div>  
  </div>  
 </div>  
 </body>  
 </html>

Modal will look like below image i.e.


3) Tab Plugin

Tabs on a page is another useful plugin offer by Bootstra CSS framework i.e.
  
<!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>Bootstrap Case</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
 <div class="container">  
  <h2>Tabs</h2>   
  <ul class="nav nav-tabs">  
   <li class="active"><a data-toggle="tab" href="#home">Home</a></li>  
   <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>  
   <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>  
   <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>  
  </ul>  
  <div class="tab-content">  
   <div id="home" class="tab-pane fade in active">  
    <h3>HOME</h3>  
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
   </div>  
   <div id="menu1" class="tab-pane fade">  
    <h3>Menu 1</h3>  
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>  
   </div>  
   <div id="menu2" class="tab-pane fade">  
    <h3>Menu 2</h3>  
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>  
   </div>  
   <div id="menu3" class="tab-pane fade">  
    <h3>Menu 3</h3>  
    <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>  
   </div>  
  </div>  
 </div>  
 </body>  
 </html>

Execution of above is shown below i.e.


4) Popover Plugin

Bootstra CSS framework offers a very interactive popover plugin, which can be utilize to display bubble messages i.e.


<!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
 <div class="container">  
 <br/>  
 <br/>  
 <br/>  
  <h3>Popover Example</h3>  
  <div class="row">  
      <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.">  
  Popover on left  
 </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.">  
  Popover on top  
 </button>  
 <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus  
 sagittis lacus vel augue laoreet rutrum faucibus.">  
  Popover on bottom  
 </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.">  
  Popover on right  
 </button>  
      </div>  
  </div>  
 </div>  
 <script>  
 $(document).ready(function(){  
   $('[data-toggle="popover"]').popover();    
 });  
 </script>  
 </body>  
 </html>

Execution is shown below i.e.


5) Slide (Carousel) Plugin

Depend on the type of website, slider plugin is very handy to highlight feature posts on a website or afvertising something i.e.


<!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>Bootstrap Example</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  <style>  
  .carousel-inner > .item > img,  
  .carousel-inner > .item > a > img {  
    width: 100%;  
    margin: auto;  
  }  
  </style>  
 </head>  
 <body>  
 <div class="container">  
  <br>  
  <div id="myCarousel" class="carousel slide" data-ride="carousel">  
   <!-- Indicators -->  
   <ol class="carousel-indicators">  
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>  
    <li data-target="#myCarousel" data-slide-to="1"></li>  
    <li data-target="#myCarousel" data-slide-to="2"></li>  
    <li data-target="#myCarousel" data-slide-to="3"></li>  
   </ol>  
   <!-- Wrapper for slides -->  
   <div class="carousel-inner" role="listbox">  
    <div class="item active">  
     <img src="slide1.jpg" alt="Slide-1" width="460" height="345">  
    </div>  
    <div class="item">  
     <img src="slide2.jpg" alt="Slide-2" width="460" height="345">  
    </div>  
    <div class="item">  
     <img src="slide3.jpg" alt="Slide-3" width="460" height="345">  
    </div>  
    <div class="item">  
     <img src="slide4.jpg" alt="Slide-4" width="460" height="345">  
    </div>  
   </div>  
   <!-- Left and right controls -->  
   <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>  
   <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>  
  </div>  
 </div>  
 </body>  
 </html>

Execution is shown below i.e.


Conclusion

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

Disclaimer

Most of the Code sample are used from W3Schools. I do not own any sample code except that alterations are made into the sample codes to meet the desire execution.

Post a Comment

40 comments:

  1. Asma's Blog28 March 2017 at 13:13

    thank you very much for the support. Just an update I have shifted my blog to www.asmak9.com now, new blogs will be available there :)

    ReplyDelete
  2. Unknown29 March 2017 at 11:10

    It's interesting that many of the bloggers to helped clarify a few things for me as well as giving.Most of ideas can be nice content.The people to give them a good shake to get your point and across the command .

    AWS Training in Channai

    ReplyDelete
  3. Asma's Blog28 June 2017 at 18:27

    thank you for your support, they layout is not paid, I modify it a bit, also, this blog is shifted to www.asmak9.com more updates are/will be available there. Hope you enjoy them.

    ReplyDelete
  4. Asma's Blog22 November 2017 at 13:34

    thank you for your support,

    ReplyDelete
  5. Asma's Blog18 January 2019 at 17:11

    Thank you

    ReplyDelete
  6. TNPSC Updates3 May 2019 at 20:57

    Looking for latest update on TNPSC exams? Kalviseithi - #1 educational portal offer latest news about TN state government jobs, educational news and much more information.

    ReplyDelete
  7. Asma's Blog20 June 2019 at 17:32

    Thank you for your support.

    ReplyDelete
  8. Raj Sharma6 August 2019 at 16:29

    Good Post. I like your blog. Thanks for Sharing

    ReplyDelete
  9. online idea lab21 November 2019 at 14:42

    Thank you for excellent article.You made an article that is interesting.
    AWS Solutions Architect courses in Bangalore with certifications.
    https://onlineidealab.com/aws-training-in-bangalore/


    ReplyDelete
  10. Bella2 December 2019 at 11:16

    Thanks For sharing valuable Information....

    Movie box is excellent application for them who love to enjoy
    their time with movies and TV series.There was a time when watching
    and downloading movies.
    movies box apk
    moviebox download android

    ReplyDelete
  11. Anonymous18 May 2020 at 14:30

    This comment has been removed by a blog administrator.

    ReplyDelete
  12. George6 June 2020 at 14:37

    You’ve made various nice points there. I did specific search terms around the matter and found mainly individuals will believe your site web design new york

    ReplyDelete
  13. Anonymous7 June 2020 at 12:51

    The subsequent time I learn a weblog, I hope that it doesnt disappoint me as much as this one. I imply, I do know it was my choice to learn, but I really thought youd have one thing interesting to say. All I hear is a bunch of whining about something that you might fix in case you werent too busy looking for attention. new york web design company

    ReplyDelete
  14. Anonymous8 June 2020 at 19:08

    I just wanted to thank you again for this amazing site you have built here. Its full of useful tips for those who are definitely interested in this subject, especially this very post. Your all so sweet and also thoughtful of others and reading the blog posts is a good delight to me. And thats a generous surprise! Jeff and I are going to have excitement making use of your points in what we must do in the near future. Our listing is a distance long and tips is going to be put to fine use. Prishtina Reisen web design agency new york

    ReplyDelete
  15. Anonymous10 June 2020 at 23:18

    Nice blog.That is very interesting; you are a very skilled blogger. I have shared your website in my social networks! A very nice guide.
    treasurebox

    ReplyDelete
  16. Anonymous11 June 2020 at 13:58

    This comment has been removed by the author.

    ReplyDelete
  17. Anonymous15 June 2020 at 13:11

    Nice blog.That is very interesting; you are a very skilled blogger. I have shared your website in my social networks! A very nice guide.
    Metal Detector

    ReplyDelete
  18. Anonymous20 June 2020 at 14:54

    Thanks so much for sharing all of the awesome info! I am looking forward to checking out more posts! san fran design firms

    ReplyDelete
  19. Anonymous20 June 2020 at 19:33

    Quickly and easily build your web traffic and PR, which provides Web site visitors to add your page to any social bookmarking website. design agency san francisco

    ReplyDelete
  20. william locas21 June 2020 at 16:24

    I do not have a bank account how can I place the order? ux san francisco

    ReplyDelete
  21. Rajan Mhatre15 July 2020 at 16:36

    Wow, I can say that this is another great article as expected of this blog. Thanks a million and please keep up the effective work.
    Visit us for Customised Credit Card Shaped Pen Drive.

    ReplyDelete
  22. Data Science training - 360DigiTMG17 August 2020 at 17:37

    Nice post found to be very impressive with the content while going through this post. Thanks for sharing and keep posting such an informative content.

    360DigiTMG Digital Marketing Course

    ReplyDelete
  23. Data Analytics Course31 August 2020 at 19:08

    I can configure my new idea from this post. Detailed information is given. Thank you all for this valuable information...

    360DigiTMG Data Analytics Course in Bangalore

    ReplyDelete
  24. Artificial Intelligence Course5 September 2020 at 14:36

    Thank you for your message. I've been thinking about writing a very similar article for the last few weeks, I'll probably keep it short and to the point and link to this article instead if that's interesting. Thank you.

    360DigiTMG Artificial Intelligence Course in Bangalore

    ReplyDelete
  25. Mohd Sharique22 October 2020 at 00:11

    Excellent content! Thanks for sharing such a useful information.

    Apache Spark Training in Pune
    Python Classes in Pune

    ReplyDelete
  26. Rohini1 December 2020 at 17:19

    I've read this post and if I could I desire to suggest you some interesting things or suggestions. Perhaps you could write next articles referring to this article. I want to read more things about it!
    data science course in Hyderabad

    ReplyDelete
  27. Rohini1 December 2020 at 17:24

    I've read this post and if I could I desire to suggest you some interesting things or suggestions. Perhaps you could write next articles referring to this article. I want to read more things about it!
    data science course in Hyderabad

    ReplyDelete
  28. Mike Johnson2 December 2020 at 15:48

    This comment has been removed by the author.

    ReplyDelete
  29. Asma's Blog2 December 2020 at 15:51

    Contact info@asmak9.com

    ReplyDelete
  30. Shayari Night7 December 2020 at 10:47

    Thanks for this nice post, Good to read it, Visit best website designing company in delhi

    ReplyDelete
  31. lakshmik74108 December 2020 at 14:24

    Thanks for sharing a very informative article. Keep us posted more!
    data science training in chennai

    ccna training in chennai

    iot training in chennai

    cyber security training in chennai

    ethical hacking training in chennai

    ReplyDelete
  32. Training for IT and Software Courses25 February 2021 at 14:48

    Thanks for the post. It was very interesting and meaningful, I really appreciate it Keep updating good stuffs like this.

    datascience with python training in bangalore

    datascience with python courses in bangalore

    datascience with python classes in bangalore

    datascience with python training institute in bangalore

    datascience with python course syllabus

    best datascience with python training

    datascience with python training centers

    ReplyDelete
  33. Training for IT and Software Courses1 March 2021 at 15:26

    I recently came across your article and have been reading along. I want to express my admiration of your writing skill and ability to make readers read from the beginning to the end. I would like to read newer posts and to share my thoughts with you.

    oracle training in bangalore

    oracle courses in bangalore

    oracle classes in bangalore

    oracle training institute in bangalore

    oracle course syllabus

    best oracle training

    oracle training centers

    ReplyDelete
  34. data scientist course2 March 2021 at 10:15

    Subsequent to reading your article i used to be surprised. I notice that you just clarify it quite well. moreover, I trust that totally different perusers can likewise encounter however I feel after reading your article.
    data scientist certification

    ReplyDelete
  35. Unknown15 July 2021 at 16:46

    Great Blog to read, It gives more useful information. Thank lot.

    Spark Training Institute in Bangalore
    Apache Spark Training bangalore

    ReplyDelete
  36. Bhuvana20 July 2021 at 14:31

    The Extraordinary blog went amazed by the content that they have developed in a very descriptive manner. This type of content surely ensures the participants explore themselves.

    DevOps Training in Hyderabad

    ReplyDelete
  37. Ramesh Sampangi31 January 2022 at 00:01

    Nice blog and informative content. I am impressed a lot with your blog. Keep up your work in further blogs.
    Data Science Course in Hyderabad

    ReplyDelete
  38. Roman1 May 2023 at 13:16

    excellent factors you wrote right here.. 먹튀검증백과커뮤니티

    ReplyDelete
  39. Cherrypickindia30 May 2023 at 20:27

    This is very fascinating, You’re a very professional blogger. Everything is very open with a precise description of the issues. I’ve joined your feed and stay up for in quest of extra of your magnificent post. It was definitely informative. Your website is very helpful. Thanks for sharing! Marble Dining Table 6 Seater

    ReplyDelete

Subscribe to: Post Comments ( Atom )