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 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.
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.
1) Layout Grid System.
2) Styling Web Elements.
3) Built-In Plugins.
The above code, can be used in a simple plain "HTML" page that shows how container class is structured.
The above code demonstrates how container-fluid class is structured.
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)
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.
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">×</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.
Superb. I really enjoyed very much with this article here. Really it is an amazing article I had ever read. I hope it will help a lot for all. Thank you so much for this amazing posts and please keep update like this excellent article.thank you for sharing such a great blog with us. expecting for your..
ReplyDeleteSEO Company in India
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 :)
ReplyDeleteIt'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 .
ReplyDeleteAWS Training in Channai
I’m really amazed with your posting skills as well as with the layout on your blog site. Is this a paid style or did you modify it yourself? Either way keep up the pleasant quality writing, it is rare to see a great site such as this one these days.
ReplyDeleteOffice Interiors in Chennai
Interior Decorators in Chennai
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.
DeleteReally it was an awesome article...very interesting to read..You have provided an nice article....Thanks for sharing..
ReplyDeleteAndroid Training in Chennai
Ios Training in Chennai
thank you for your support,
DeleteSuperb. I really enjoyed very much with this article here. Really it is an amazing article I had ever read. I hope it will help a lot for all. Thank you so much for this amazing posts and please keep update like this excellent article.thank you for sharing such a great blog with us. expecting for your.
ReplyDeleteHadoop Training in Chennai
Android Training in Chennai
Selenium Training in Chennai
Digital Marketing Training in Chennai
JAVA Training in Chennai
German Classes in chennai
PHP Training in Chennai
PHP Training in T Nagar
Thank you
DeleteThanks to the admin you have spend a lot for this blog I gained some useful info for you. Keep doing.
ReplyDeleteDigital Marketing Training in Chennai
Digital Marketing Course in Chennai
Cloud Computing Courses in Chennai
AWS Training in Chennai
Data Science Course in Chennai
Digital Marketing Training in Tambaram
Digital Marketing Training in OMR
Digital Marketing Training in Adyar
Thank you
ReplyDeleteGreat information!!! The way of conveying is good enough… Thanks for it
ReplyDeletePHP Training in Coimbatore
best php training institute in coimbatore
php training institute in coimbatore
Devops Training in Bangalore
Digital Marketing Courses in Bangalore
German Language Course in Madurai
Cloud Computing Courses in Coimbatore
Awesome! Education is the extreme motivation that open the new doors of data and material. So we always need to study around the things and the new part of educations with that we are not mindful.
ReplyDeleteData Science course in Indira nagar
Data Science course in marathahalli
Data Science Interview questions and answers
Data science training in tambaram
Data Science course in btm layout
Data science course in kalyan nagar
Data science course in bangalore
The blog you have shared is more informative... Thanks for your valid blog.
ReplyDeleteSelenium Training in Bangalore
Selenium Training in Coimbatore
Best Selenium Training Institute in Bangalore
best selenium training in coimbatore
RPA training in bangalore
Selenium Training in Bangalore
Java Training in Madurai
Oracle Training in Coimbatore
PHP Training in Coimbatore
Great Blog!!! Thanks for sharing with us... it is more useful for us..
ReplyDeletehadoop training in bangalore
big data courses in bangalore
hadoop training institutes in bangalore
Devops Training in Bangalore
Digital Marketing Courses in Bangalore
German Language Course in Madurai
Cloud Computing Courses in Coimbatore
Embedded course in Coimbatore
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.
ReplyDeleteThank you for this information.
ReplyDeleteCheck out the best bookshelves
ReplyDeleteNice blog.That is very interesting; you are a very skilled blogger. I have shared your website in my social networks! A very nice guide.
website designing companies in Hyderabad
best website designers in hyderabad
Thank you for your support.
DeleteThis blog is very useful for the young generation and I like this content. Your written way is very attractive to me and kindly updating them..!
ReplyDeleteCorporate Training in Chennai
Corporate Training Companies in Chennai
Linux Training in Chennai
Primavera Training in Chennai
Job Openings in Chennai
Placement in Chennai
Power BI Training in Chennai
Oracle DBA Training in Chennai
Placement Training in Chennai
Corporate Training in Thiruvanmiyur
It was good explanation and it looks more impressive!thank you for sharing precious information with us..
ReplyDeleteIELTS Coaching in Chennai
IELTS Training in Chennai
French Classes in Chennai
pearson vue
Japanese Language Classes in Chennai
Best Spoken English Classes in Chennai
German Language Course in Chennai
IELTS Coaching in Velachery
IELTS Coaching in Tambaram
IELTS Coaching in Anna Nagar
Good Post. I like your blog. Thanks for Sharing
ReplyDeletePython Training in Noida
ReplyDeleteBlockchain Training in Noida
Devops Training in Noida
Android course in Noida
Machine Learning Training in Noida
Data Science Training in Noida
ReplyDeleteCloud Computing Training in Noida
.NET Training in Noida
Data Warehousing Training in Noida
Ethical Hacking Training in Noida
ReplyDeleteDigital Marketing course in Noida
Web Development course in Noida
Java Training in Noida
Thanks for sharing an informative blog keep rocking bring more details.I like the helpful info you provide in your articles. I’ll bookmark your weblog and check again here regularly. I am quite sure I will learn much new stuff right here! Good luck for the next!
ReplyDeletemobile application development training online
mobile app development course
mobile application development course
learn mobile application development
mobile app development training
app development training
mobile application development training
mobile app development course online
online mobile application development
Nice Post
ReplyDeleteFor Data Science training in Bangalore, Visit:
Data Science training in Bangalore
Good job! Fruitful article. I like this very much. It is very useful for my research. It shows your interest in this topic very well. I hope you will post some more information about the software. Please keep sharing!!
ReplyDeleteSEO Training Institute in Chennai
SEO Training Institute in Chennai
SEO Training Institute in Bangalore
SEO Training Courses in Coimbatore
such a awesome info bro,thanks for this post.if your looking for selenium courses or big data courses you can check out links below
ReplyDelete.Very well written article thanks for posting this amazing article with us keep growing and keep hustling
Selenium course in chennai
best selenium training institute in chennai
best selenium training in chennai
selenium training in chennai omr
selenium training in omr
big data course in chennai
big data hadoop training in chennai
big data analytics courses in chennai
Nice infromation
ReplyDeleteSelenium Training In Chennai
Selenium course in chennai
Selenium Training
Selenium Training institute In Chennai
Best Selenium Training in chennai
Selenium Training In Chennai
Rpa Training in Chennai
ReplyDeleteRpa Course in Chennai
Rpa training institute in Chennai
Best Rpa Course in Chennai
uipath Training in Chennai
Blue prism training in Chennai
Data Science Training In Chennai
Data Science Course In Chennai
Data Science Training institute In Chennai
Best Data Science Training In Chennai
Python Training In Chennai
ReplyDeletePython course In Chennai
Protractor Training in Chennai
jmeter training in chennai
Loadrunner training in chennai
Thank you for excellent article.You made an article that is interesting.
ReplyDeleteAWS Solutions Architect courses in Bangalore with certifications.
https://onlineidealab.com/aws-training-in-bangalore/
Such A nice post... thanks For Sharing !!Great information for new guy like Happy New year 2020
ReplyDeleteThanks For sharing valuable Information....
ReplyDeleteMovie 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
I am really happy with your blog because your article is very unique and powerful for new reader.
ReplyDeleteaws Training in Bangalore
python Training in Bangalore
hadoop Training in Bangalore
angular js Training in Bangalore
bigdata analytics Training in Bangalore
python Training in Bangalore
aws Training in Bangalore
Such A nice post... thanks For Sharing !!Great information for new guy like Hanuman Chalisa Lyrics
ReplyDeleteThe development of artificial intelligence (AI) has propelled more programming architects, information scientists, and different experts to investigate the plausibility of a vocation in machine learning. Notwithstanding, a few newcomers will in general spotlight a lot on hypothesis and insufficient on commonsense application. Machine Learning Final Year Projects In case you will succeed, you have to begin building machine learning projects in the near future.
ReplyDeleteProjects assist you with improving your applied ML skills rapidly while allowing you to investigate an intriguing point. Furthermore, you can include projects into your portfolio, making it simpler to get a vocation, discover cool profession openings, and Final Year Project Centers in Chennai even arrange a more significant compensation.
Data analytics is the study of dissecting crude data so as to make decisions about that data. Data analytics advances and procedures are generally utilized in business ventures to empower associations to settle on progressively Python Training in Chennai educated business choices. In the present worldwide commercial center, it isn't sufficient to assemble data and do the math; you should realize how to apply that data to genuine situations such that will affect conduct. In the program you will initially gain proficiency with the specialized skills, including R and Python dialects most usually utilized in data analytics programming and usage; Python Training in Chennai at that point center around the commonsense application, in view of genuine business issues in a scope of industry segments, for example, wellbeing, promoting and account.