Bootstrap is a free and open-source front-end web development framework allowing developers to quickly and easily create responsive, mobile-first websites and web applications. It provides a set of pre-built HTML, CSS, and JavaScript components, such as navigation menus, buttons, forms, modals, and more. Our set of Bootstrap interview questions and answers is curated for beginners as well as senior roles. This guide of Bootstrap interview questions is an excellent resource for those seeking to progress in their web designer or front-end developer career, as it will equip them with the necessary knowledge to feel confident and well-prepared for their upcoming interview.
Bootstrap is an open source framework for developing responsive websites with HTML, JavaScript and CSS. Developed by Twitter in 2011, it is a front-end framework for faster web development. Mark Otto and Jacob Thornton released it on GitHub in August 2011.
Let us see the reasons why we should work with Bootstrap for web development:
Bootstrap is supported by all the modern browsers. Do not worry about compatibility, it is compatible with all the popular web browsers such as Firefox, Chrome, Opera, Safari and Edge.
Bootstrap released on GitHub and is free to use. Go to its official website, download and begin with designing of amazing responsive websites. With that, you can also use CDN to work with Bootstrap.
Bootstrap allows you to develop and design responsive websites. The website designed with Bootstraps works well for all the devices: Mobile, Desktop and Tablet.
Bootstrap has mobile first styles in its library. The same is part of the Bootstrap core framework and its grid system allows the designers to design websites sites for small screens first and then move and scale designs up from there.
The components provided by Bootstrap are compatible and you can easily customize them. Some examples include, button groups, iconography, navbar, input groups, alerts, etc.
Here are some of the icons provided by Bootstrap component iconography:
It’s not a cumbersome task to work with Bootstrap. A basic working knowledge of the three pillars of web development i.e. HTML, JavaScript and CSS is what you need to begin with Bootstrap.
Bootstrap 4 released in August 2017 and with that new features introduced. It is an open source framework like Bootstrap 3 for designing responsive websites with HTML, JavaScript and CSS.
Supporting all major and modern browsers, it has the new feature of flex modal for grid system and even added new components. Bootstrap 4 also removed a lot of features.
Let us now see the differences between Bootstrap 3 and Bootstrap 4:
| Basis | Bootstrap 3 | Bootstrap 4 |
|---|---|---|
| Definition | Bootstrap 3 is an open source framework for designing responsive websites with HTML, JavaScript and CSS. | Bootstrap 4 released in August 2017 and added new features of flex modal for grid system and even added new components |
| Form Label Size | Bootstrap 3 do not have any class for form label size. | Bootstrap 4 came with .col-form-label-sm and .col-form-label-lg to increase or decrease the size of a label and match the size of the relevant form control. |
| Global Font Size | Bootstrap 3 had Global Form Size of 14px. | Bootstrap 4 introduced Global Form Size of 16px. |
| Checkboxes and Radio Buttons | The classes for checkbox and radio buttons are .radio, .radio-inline, .checkbox, or .checkbox-inline. Here inline is for displaying them in a line. | For the same purpose, Bootstrap use .form-check, .form-check-label, .form-check-input, and .form-check-inline. |
| Source CSS file | The source CSS file for Bootstrap 3 is LESS. | The source CSS file for Bootstrap 3 is SCSS. |
| Offset Columns | For offset columns, Bootstrap 3 use col-*-offset-* classes. | For offset columns, Bootstrap 4 use offset-*-* classes. |
| Dark Tables | You cannot add dark tables with Bootstrap 3. | Add dark tables with the .table-dark class in Bootstrap 4 |
| Form Control Size | For increasing or decreasing the input control size, Bootstrap 3 has .input-lg and .input-sm. | For increasing or decreasing the input control size, Bootstrap 4 has .form-control-lg and .form-control-sm classes. |
| Table Head Styles | Classes for table head styles isn’t supported by Bootstrap 3. | Create table head styles with.thead-light and .thead-dark classes. |
| Buttons with Outline | You cannot style Button with outline color in Bootstrap 3. | Bootstrap 4 introduced the .btn-outline-* classes for styling buttons with an outline color. |
| Button Sizes | Classes are available for resize buttons. | Bootstrap 4 only deprecated the .btn-xs class. Rest, .btn-sm and .btn-lg are still available. |
| Responsive Images | To create responsive images with Bootstrap 3, use the .img-responsive class. | To create responsive images with Bootstrap 4, use .img-fluid class. |
| Media Objects | Bootstrap 3 came with a lot of classes for Media Objects, such as .media, .media-body .media-object, .media-heading, etc. | Bootstrap 4 only use .media class. |
| Disabled Menu Items | To disable Menu Items in Bootstrap 3, you need to use the .disabled class. Set the class to the <li> to disable. | To disable Menu Items in Bootstrap 4, you need to use the .disabled class . Set the class to the <a> to disable. |
| Justified ButtonGroups | The .btn-group-justified class is used in Bootstrap 3 to justify button groups. | The .btn-group-justified class is not supported in Bootstrap 4. |
| Extra Small ButtonGroups | Bootstrap 3 supported a class for extra small button groups i.e. .btn-group-xs class. | Bootstrap 4 do not support any class for extra small button groups.. |
| Fixed Navbars (Top or Bottom) | The .navbar-fixed-top and .navbar-fixed-bottom is used in Bootstrap 3 to fix navbars to the top or bottom. | To fix navbars to the top and bottom, Bootstrap 4 introduced .fixed-top and .fixed-bottom classes.. |
| Full-Width Jumbotron | For full-width jumbotrons, the .jumbotron-fluid class is not supported in Bootstrap 3. | Bootstrap 4 came with .jumbotron-fluid class for full-width jumbotrons. |
| Page Header class | The .page-header class introduced with Bootstrap 3. | The .page-header class wasn’t supported in Bootstrap 4. |
| Bootstrap Cards | Cards weren’t introduced in Bootstrap 3. | Bootstrap 4 introduced Cards to replace the functionality provided by panels and wells in Bootstrap 3. |
| Panels | Panel introduced in Bootstrap 3. | Introduction of cards in Bootstrap 4 replaced the functionality provided by Panels. |
| Wells | The concept of Wells wasn’t supported in Bootstrap3. | Bootstrap 4 introduced the concept of Wells. It is a container that adds a rounded border around an element and adds padding and gray background color. |
| Carousel Item | For creating carousel item with Bootstrap 3, use the .item class. | For creating carousel item with Bootstrap 4, use the .carousel-item class. |
Bootstrap is an open source framework for designing responsive websites. Developed by Twitter in 2011, it is popular worldwide for faster web development. Yes, Bootstrap is a front-end framework. While using Bootstrap, you work with HTML, JavaScript and CSS. Mobile-first styles are part of the core framework.
Bootstrap is called a framework since it is the conceptual structure intended to serve as a support or guide for design of responsive websites that expands the structure into something useful. For example, a real-life example is the structure of a building while constructing it.
There has been a lot of debate on whether Bootstrap is a framework or library, but we can consider it as a front-end library. While adding CSS, we include bootstrap.css or bootstrap.min.css. Including a file of the same format itself says that you are adding a framework. These are prewritten and addition of these files makes a new framework. Therefore, Bootstrap is a framework and library in its correct sense.
Expect to come across this popular question in Bootstrap interview questions for freshers.
A Bootstrap package includes reusable components, plugins, jQuery plugins, etc. Bootstrap is an open source framework for designing responsive websites with HTML, JavaScript and CSS. Developed by Twitter in 2011, it is a front-end framework for easier web development.
Let us see what all comes under the Bootstrap package:
jQuery is a JavaScript library. Bootstrap has 12 custom jQuery plugins, such as Modal, Dropdown, Tab, Tooltip, Alert, Collapse, Affix, etc. You can include these plugins individually or all at once and extend more functionalities to the website.
The global CSS settings are part of the Bootstrap packages. It has extendable classes and an enhanced grid system as well.
Bootstrap comes with Grid System, link styles, etc, and all this comes under the Bootstrap package.
Bootstrap has lot of components to add more functionalities to your website. Some examples include navbar, alerts, iconography, navigation, dropdowns, pagination, badges, labels, etc.
Bootstrap allows you to customize components, jQuery plugins etc. Customize them accordingly and work with what you want from the component or plugin.
Use Bootstrap CDN, if you don’t wish to do the cumbersome task of downloading Bootstrap and hosting it on your system or server. CDN is Content Delivery Network, wherein the Bootstrap is hosted and with just the CDN link, we can add it to our website. We will be using MaxCDN to provide CDN support for Bootstrap CSS and JavaScript.
Using CDN will lead to faster loading time since once you have requested a file from it from your website, it will be served from the server closest to them.
Let us now see how we can setup Bootstrap 4 with CDN.
Use the following CDN for CSS and JS. Include it in the <head> tag:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.13/js/bootstrap.min.js"></script>
Now, include jQuery and Popper if you are using the components like tooltips, popovers, etc.
<!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
Let us now see a simple example to implement what we saw above. In the below example, we have included .container-fluid class to provide a full width container that spans the entire width of the viewport. We have included the Bootstrap CDN in the <head> tag:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Demo Page</h1> <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p> </div> </body> </html>
The following is the output after running the above Bootstrap code:
It's no surprise that this one pops up often in Bootstrap technical interview questions.
Bootstrap 4 released in August 2017 and added new features of flex modal for grid system and even added new components.
Let us see them one by one based on new features, improved and deprecated:
New Features
Enhanced
Deprecated (Not Supported)
Bootstrap has different layouts to adjust with wide range of devices such as desktops, tablets, mobile.
Let us see what all layouts are part of Bootstrap:
Use the container element when you want fixed-width which is responsive. Include it like this:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Demo Page</h1> <p>The .container class provides a fixed width container.</p> </div> </body> </html>
Use the container-fluid element to provide a full width container that spans the entire width of the viewport:
Include it like this:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Demo Page</h1> <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p> </div> </body> </html>
The following describes the difference between both the layouts:
Jumbotron is a component that allow you to set landing page content design. A big grey box is seen as Jumbotron for including special content with increase in size of headings. Including it will also add a lot of margins that would make the box and its content catchier.
Let us now see how to create a Jumbotron in Bootstrap. For that, use the class .jumbotron:
<div class="jumbotron"> <h1>My Website</h1> <p>We provide freelancers for content, responsive website design, business writing, etc.</p> </div>
Let us see the example:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron"> <h1>My Website</h1> <p>We provide freelancers for content, responsive website design, business writing, etc.</p> </div> <p>Text outside Jumbotron</p> </div> </body> </html>
The following is the output:
Align a flex item on the baseline using the align-self-*-baseline class used in Bootstrap. Let’s say you need to align it on large screen. For that, use:
align-self-lg-baseline
Bootstrap
Bootstrap is an open source framework for developing responsive websites with HTML, JavaScript and CSS. Mark Otto and Jacob Thornton released it on GitHub in August 2011.
Let us see the reasons why we should work with Bootstrap for web development:
Bootstrap is supported by all the modern browsers. Do not worry about compatibility, it is compatible with all the popular web browsers such as Firefox, Chrome, Opera, Safari and Edge.
Bootstrap released on GitHub and is free to use. Go to its official website, download and begin with designing of amazing responsive websites. With that, you can also use CDN to work with Bootstrap.
Bootstrap allows you to develop and design responsive websites. The website designed with Bootstraps works well for all the devices: Mobile, Desktop and Tablet.
Bootstrap has mobile first styles in its library. The same is part of the Bootstrap core framework and its grid system allows the designers to design websites sites for small screens first and then move and scale designs up from there.
Foundation
It is a front-end framework designed by ZURB in September 2011. They claim to be the most advanced responsive front-end framework. It is readable, flexible, and completely customizable.
Let us see some of its features:
It is a family of responsive front-end frameworks that make it easy to design responsive websites, apps and emails.
Build for small devices first and the scale to larger devices and create responsive design.
It helps you in creating responsive website with HTML, CSS, and JavaScript.
Create responsive emails with Foundation, which are readable on almost any device.
Let us now see the differences:
| Features | Bootstrap | Foundation |
|---|---|---|
| Definition | Bootstrap is an open source framework for developing responsive websites with HTML, JavaScript and CSS. Mark Otto and Jacob Thornton released it on GitHub in August 2011. | Foundation is a front-end framework designed by ZURB in September 2011. This is the most advanced responsive front-end framework. It is readable, flexible, and completely customizable. |
| Grid System | Botstrap support responsive grids and flexible breakpoints. | Foundation supports whatever Bootstrap has, but also provides responsive gutters. |
| Collapsible Gutters | Do not provide by Bootstrap. | Foundation has collapsible gutters. |
| Inline Forms | Bootstrap has .form-inline class which is to be added to the <form> tag to create Inline Forms. These are the forms in which the elements are inline and left-aligned. | With Foundation, you cannot create Inline Forms. |
| Performance Compatibility | More compatible than Foundation. Performance is also better. | Foundation has enhanced performance, but not better than Bootstrap. |
| Customizable | Design can be customized in Bootstrap. | Design can be customized in Foundation, but not better than Bootstrap. |
| Normalization | reboot.css | normalize.css |
To create alert messages on your website, work with the Alert component in Bootstrap. We will use the .alert class for this purpose.
The alert class also has some contextual classes associated with it for action on alert box:
.alert-success: Successful or positive action .alert-info: Informative action .alert-warning: .alert-danger: Dangerous action .alert-primary: Important action .alert-secondary: Less important action .alert-light: Light grey .alert-dark: Dark grey
Let us now see how we can use them:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Learning about Alerts</h2> <div class="alert alert-success"> <strong>Success! You cracked it!</strong> </div> <div class="alert alert-info"> <strong>Information! More Info!</strong> </div> <div class="alert alert-warning"> <strong>Warning! Close program to prevent system failure!</strong> </div> <div class="alert alert-danger"> <strong>Danger! Malware ahead!</strong> </div> <div class="alert alert-primary"> <strong>Primary!</strong> </div> <div class="alert alert-secondary"> <strong>Secondary!</strong> </div> <div class="alert alert-dark"> <strong>Dark alert!</strong> </div> <div class="alert alert-light"> <strong>Light alert!</strong> </div> </div> </body> </html>
The following is the output displaying different forms of alerts:
You may have seen a small pop-up box appearing when the user hovers over an element. The same box is what we can add using the Tooltip component in Bootstrap.
Use the data-toggle="tooltip" attribute to create a tooltip in Bootstrap. To work with tooltips, you need to initialize them with jQuery.
You can also position the tooltip using the data-placement attribute. Let us now see an example that creates a tooltip:
Clear all
Clear all<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h3>Tooltip Example</h3>
<a href="#" data-toggle="tooltip" data-placement="right" title="This is a tooltip!">Keep mouse cursor here</a>
<p>Above is a tooltip on the right</p><br>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>Here is the output. We have used the title attribute for text to be displayed inside the tooltip. The tooltip is on the right:
For positioning tooltip on left, top and bottom, use the following values for data-placement attribute:
<div class="container-fluid"> <a href="#" data-toggle="tooltip" data-placement="left" title="This is a tooltip!">Keep mouse cursor here</a> <a href="#" data-toggle="tooltip" data-placement="top" title="This is a tooltip!">Keep mouse cursor here</a> <a href="#" data-toggle="tooltip" data-placement="bottom" title="This is a tooltip!">Keep mouse cursor here</a> </div>
With Bootstrap, you can create a Striped progress Bar. A Progress Bar with stripes looks like this:
Bootstrap provides .progress-bar-striped class to create a striped Progress Bar.
Let us now see an example to add stripes to Progress Bar:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Striped Progress Bar</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.3.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>Android App Information</h2> <h3>App Performance</h3> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%"> 90% </div> </div> <h3>App Crashes</h3> <div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width:10%"> 10% </div> </div> <h3>App Errors</h3> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%"> 20% </div> </div> </div> </body> </html>
The output:
Stretch a flex item on small screen using the align-self-sm-stretch class used in Bootstrap.
Different form control states are available in Bootstrap such as input focus, disabled input, readonly input, etc. It also includes validation styles for errors, warnings, and success messages.
Let us see them one by one:
| States | Description |
|---|---|
| Disabled Input | The disabled attribute disables an input field. |
| Disabled Fieldset | The disabled attribute added to a <fieldset> disable all the controls within the <fieldset> |
| Input Focus | On receiving focus, the outline is removed and box-shadow is applied. |
| Error - Validation State | Add .has-error to parent element to set validation style for error. |
| Warning - Validation State | Add .has-warning to parent element to set validation style for error. |
| Success - Validation State | Add .has-success to parent element to set validation style for error. |
| Readonly Inputs | To set readonly inputs and prevent user from any input, use readonly attribute. |
The following is an example that displays some of the states:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Form Control States</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.3.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>Form control states</h2> <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">Focused</label> <div class="col-sm-10"> <input class="form-control" id="focusedInput" type="text" value="Click to focus..."> </div> </div> <div class="form-group"> <label for="disabledInput" class="col-sm-2 control-label">Disabled</label> <div class="col-sm-10"> <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input" disabled> </div> </div> <div class="form-group has-success has-feedback"> <label class="col-sm-2 control-label" for="inputSuccess">Input with success</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputSuccess"> </div> </div> <div class="form-group has-warning has-feedback"> <label class="col-sm-2 control-label" for="inputWarning">Input with warning</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputWarning"> </div> </div> <div class="form-group has-error has-feedback"> <label class="col-sm-2 control-label" for="inputError">Input with error</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputError"> </div> </div> </form> </div> </body> </html>
The output displays the different states:
One of the most frequently posed Bootstrap interview for fresher, be ready for it.
While creating a form, you may sometimes need to include a plain text next to a form label within a horizontal form. For that, use the class .form-control-static.
The example displays the role of static control in Bootstrap:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Static Control</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.3.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>Admissions</h2> <form class = "form-horizontal" role = "form"> <div class = "form-group"> <label class = "col-sm-2 control-label">Student Email</label> <div class = "col-sm-10"> <p class = "form-control-static">example@demo.com</p> </div> </div> <div class = "form-group"> <label for = "pwd" class = "col-sm-2 control-label">Password</label> <div class = "col-sm-10"> <input type = "password" class = "form-control" id = "pwd" placeholder = "Enter Password"> </div> </div> </form> </div> </body> </html>
The output:
If you want a series of buttons on your website, then use the Button Groups in Bootstrap. It allows you to stack more than one button on a single line.
The Button Groups component in Bootstrap has some classes to create Button group, resize them, stack them vertically, etc. Let us see them first:
.btn-group class: Create a Button Group .btn-group-lg: Larger buttons in Button Groups .btn-group-sm: Smaller buttons in Button Groups
Let us now see a simple example to create Button Groups in Bootstrap. The example displays 5 buttons in the same button group:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <p>Displaying Button Groups in Bootstrap:</p> <div class = "btn-group"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <button type = "button" class = "btn btn-default">Button 3</button> <button type = "button" class = "btn btn-default">Button 4</button> <button type = "button" class = "btn btn-default">Button 5</button> <button type = "button" class = "btn btn-default">Button 6</button> </div> </div> </body> </html>
The following is the output that displays buttons in a single Button Group:
The form-horizonal class is used in Bootstrap for Horizontal form. The labels are aligned horizontally next to the input field on large and medium screens. However, on small screens i.e. < 767px, it will get converted to a vertical form. The form would then look like labels on top of each input).
Let us see a code to understand it:
<!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.3.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>Horizontal Form in Bootstrap</h2> <form class="form-horizontal" action=""> <div class="form-group"> <label class="control-label col-sm-2" for="email">UserId(Email):</label> <div class="col-sm-10"> <input type="email" class="form-control" id="useremail" placeholder="Enter email"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Password:</label> <div class="col-sm-10"> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> </div> </form> </div> </body> </html>
Here is the output when the screen size is below 767 px:
Here is the output when the screen size is above 767 px:
Add navigation header on your website using the Bootstrap Navbar component. A navigation bar can extend or collapse, depending on the screen size. On mobile, you may have seen navigation bar collapsing. However, on increasing the viewport size (browser size), the same responsive navigation bar appears horizontally.
To create a Navbar in Bootstrap, use the .navbar class. For responsiveness, follow it with .navbar-expand class with the values:
.navbar-expand -xl: Stack navbar vertically on extra large screen .navbar-expand -lg: Stack navbar vertically on large screen .navbar-expand -md: Stack navbar vertically on medium screen .navbar-expand -sm: Stack navbar vertically on small large screen
Now, in a navbar, you have links, which a user can click and navigate. To add links, use class “.navbar-nav” and under that the <li> elements should be with a .nav-item class as shown below:
<ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">One</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Two</a> </li> </ul>
Let us see what we discussed above in the following example:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-sm bg-dark"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">One</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Two</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Three</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Four</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Five</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Six</a> </li> </ul> </nav> </body> </html>
The following is the output that display the navigation bar with 6 links:
The <small> element is used if you want to add inline subheadings to headings. You can also use the .small class and get a text smaller than the normal text
To add an inline subheading to any of the headings, simply add <small> around any of the elements or add .small class and you will get smaller text in a lighter color.
The below example creates inline subheading under <h1> and <h2>:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Inline Subheading</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.3.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"> <h1>Heading1 <small> Smaller Heading1 </small> </h1> <h2>Heading2 <small> Smaller Heading2 </small> </h2> </div> </body> </html>
The above displays the following output with inline subheadings:
To wrap items on different screens in Bootstrap, use the flex-wrap class. Let us see how to use this class for different screens:
Use flex-sm-wrap for small screen:
<div class="d-flex flex-sm-wrap bg-primary">
Use flex-md-wrap for medium screen:
<div class="d-flex flex-md-wrap bg-primary">
Use flex-lg-wrap for large screen:
<div class="d-flex flex-lg-wrap bg-primary">
Use flex-xl-wrap for extra large screen:
<div class="d-flex flex-xl-wrap bg-primary">
The following is an example that wraps flex items on different screen size:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Flex Wrap 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/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h3>Books</h3> <div class="d-flex flex-wrap bg-primary"> <div class="p-2 border">Book1</div> <div class="p-2 border">Book2</div> <div class="p-2 border">Book3</div> <div class="p-2 border">Book4</div> <div class="p-2 border">Book5</div> <div class="p-2 border">Book6</div> <div class="p-2 border">Book7</div> <div class="p-2 border">Book8</div> <div class="p-2 border">Book9</div> <div class="p-2 border">Book10</div> </div> <br> <p>Wraps on Small Screen (>576px)</p> <div class="d-flex flex-sm-wrap bg-primary"> <div class="p-2 border">Book1</div> <div class="p-2 border">Book2</div> <div class="p-2 border">Book3</div> <div class="p-2 border">Book4</div> <div class="p-2 border">Book5</div> <div class="p-2 border">Book6</div> <div class="p-2 border">Book7</div> <div class="p-2 border">Book8</div> <div class="p-2 border">Book9</div> <div class="p-2 border">Book10</div> </div><br> <p>Wraps on Medium sized screen (>768px)</p> <div class="d-flex flex-md-wrap bg-primary"> <div class="p-2 border">Book1</div> <div class="p-2 border">Book2</div> <div class="p-2 border">Book3</div> <div class="p-2 border">Book4</div> <div class="p-2 border">Book5</div> <div class="p-2 border">Book6</div> <div class="p-2 border">Book7</div> <div class="p-2 border">Book8</div> <div class="p-2 border">Book9</div> <div class="p-2 border">Book10</div> </div><br> <p>Wraps on Large Screen (>992px)</p> <div class="d-flex flex-lg-wrap bg-primary"> <div class="p-2 border">Book1</div> <div class="p-2 border">Book2</div> <div class="p-2 border">Book3</div> <div class="p-2 border">Book4</div> <div class="p-2 border">Book5</div> <div class="p-2 border">Book6</div> <div class="p-2 border">Book7</div> <div class="p-2 border">Book8</div> <div class="p-2 border">Book9</div> <div class="p-2 border">Book10</div> <div class="p-2 border">Book11</div> <div class="p-2 border">Book12</div> <div class="p-2 border">Book13</div> </div><br> <p>Wraps on Extra Large Screen (>1200px)</p> <div class="d-flex flex-xl-wrap bg-primary"> <div class="p-2 border">Book1</div> <div class="p-2 border">Book2</div> <div class="p-2 border">Book3</div> <div class="p-2 border">Book4</div> <div class="p-2 border">Book5</div> <div class="p-2 border">Book6</div> <div class="p-2 border">Book7</div> <div class="p-2 border">Book8</div> <div class="p-2 border">Book9</div> <div class="p-2 border">Book10</div> <div class="p-2 border">Book11</div> <div class="p-2 border">Book12</div> <div class="p-2 border">Book13</div> <div class="p-2 border">Book14</div> <div class="p-2 border">Book15</div> <div class="p-2 border">Book16</div> <div class="p-2 border">Book17</div> <div class="p-2 border">Book18</div> <div class="p-2 border">Book19</div> </div><br> </div> </body> </html>
The output for screen size above 576px. The flex-sm-wrap wraps on small screen size:
The output for screen size above 768px. The flex-md-wrap wraps on medium screen size:
The output for screen size above 1200px. The flex-xl-wrap wraps on extra-large screen size:
In a NavBar, if you want to make a link unclickable, then use the .disabled class.
Let’s say we have a Navbar with some items and out of which you want to disable the “Entertainment” link and make unclickable. For that, use the .disabled class like this:
<li class="nav-item"> <a class="nav-link disabled" href="#">Tech</a> </li>
Now, let us see how we can create more items in Navbar and disable one of them. For the second Navbar, we have made the link “Tech” unclickable:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Navbar</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Disable Navbar</h3> </div> <nav class="navbar navbar-expand-sm bg-danger navbar-light"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Entertainment</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Tech</a> </li> </ul> </nav> <nav class="navbar navbar-expand-sm bg-primary navbar-light"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Entertainment</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Tech</a> </li> </ul> </nav> </body> </html>
The output:
Bootstrap needed something to wrap elements and contain its grid system, therefore that leaded to introduction of container, which can be fixed or fluid.
Fixed Container
Use the container class when you want fixed-width which is responsive. Include it like this:
<div class="container"> … </div>
The following is an example:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Demo Page</h1> <p>The .container class provides a fixed width container.</p> </div> </body> </html>
Fluid Container
Use the container-fluid element to provide a full width container that spans the entire width of the viewport:
Include it like this:
<div class="container-fluid"> … </div>
Let us see an example:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Demo Page</h1> <p>The .container-fluid class provides a full width container that spans the entire width of the viewport.</p> </div> </body> </html>
It's no surprise that this one pops up often in Bootstrap interview questions and answers.
The Bootstrap collapse is used to show and hide content. The following are used for Collapsible:
.collapse: hides content .collapse.show: to show content
Bootstrap collapse with .collapse class
Let us see an example of Bootstrap collapse with .collapse class. It shows the content hidden by default:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Bootstrap Collapsible</h2> <p>Show or hide the content:</p> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#mydiv">Click me</button> <div id="mydiv" class="collapse"> This is the content which is toggled on button click. </div> </div> </body> </html>
The following is the output that shows toggled content (show or hide) on button click. First, let us see the result on running:
After that, click the above button that toggles content. On clicking, the collapsed content will be visible:
Bootstrap collapse with .collapse show
Let us see an example of .collapse with .show class. It hides the content by default:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Bootstrap Collapsible</h2> <p>Show or hide the content:</p> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#mydiv">Click me</button> <div id="mydiv" class="collapse show"> This is the content which is toggled on button click. </div> </div> </body> </html>
The following is the output that displays the content by default since we used the show class as well:
Make flex-items shrink on small screen using the flex-sm-shrink-1 class used in Bootstrap.
Bootstrap has a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. This states that firstly Bootstrap targets mobile devices and then expands to other devices such as tablet and desktop. The Bootstrap Grid System displays 12 columns in a page. These columns will rearrange on its own, since the Grid system is responsive.
Bootstrap provides the following classes:
| Class | Devices | Example |
|---|---|---|
| .col- | <576px i.e. Extra Small Devices | <div class="col-3">Example</div> |
| .col-sm- | >=576px i.e. Small Devices | <div class="col-sm-1> Example </div> |
| .col-md- | >=768px i.e. Medium Devices like iPad | <div class="col-md-1> Example </div> |
| .col-lg- | >=992px i.e. Large Devices | <div class="col-lg-1> Example </div> |
| .col-xl- | >=1200px i.e. Extra Large Devices | <div class="col-xl-1> Example </div> |
Let us now understand this using an example.
For four equal columns, use four .col-sm-3 classes like this:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h2>Grid System in Bootstrap</h2> <p><strong>Note:</strong> Resize the browser window to see the effect. The columns stack on top of each other when the screen is < 576px.</p> <div class="row"> <div class="col-sm-3" style="background-color:green;color:white;">.col-sm-3</div> <div class="col-sm-3" style="background-color:orange;color:gray">.col-sm-3</div> <div class="col-sm-3" style="background-color:violet;color:white">.col-sm-3</div> <div class="col-sm-3" style="background-color:black;color:white">.col-sm-3</div> </div> </div> </body> </html>
The output when screen size is more than 576px:
The output when screen size is less than 576px. As you can see the columns stack on top of each other:
Display flex items horizontally and right-align on medium screen using the flex-md-row-reverse class in Bootstrap.
Display flex items vertically using the flex-xx-column class used in Bootstrap. To display flex items vertically on small screen, use the flex-sm-column class:
<div class="d-flex flex-sm-column">
The align-items-sm-baseline class is used in Bootstrap to align single rows of items on the baseline on small screen.
Yes, with Bootstrap, you can easily center tabs. The .nav-justified class is used in Bootstrap to center tabs.
The following is an example:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Tabs</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.3.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"> <h3>Centered Tabs</h3> <p><strong>Note:</strong> Resize the browser window to see the effect. Items look stacked if the screen size if less than 768px</p> <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#">Home</a></li> <li><a href="#">AboutUs</a></li> <li><a href="#">Company</a></li> </ul> </div> </body> </html>
The output when the screen size is less than 768px:
The output when the screen size is more than 768px:
Bootstrap has a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. This states that firstly Bootstrap targets mobile devices and then expands to other devices such as tablet and desktop.
The grid structure in Bootstrap looks like this:
<div class = "container"> <div class = "row"> <div class = "col-*-*"></div> <div class = "col-*-*"></div> </div> <div class = "row"> <div class = "col-*-*"></div> <div class = "col-*-*"></div> </div> </div>
Let us now understand what we did above:
We used the following to create a row:
<div class = "row"> … </div>
To add columns:
col-*-*
The first * above is for screen responsiveness class i.e.:
col-sm: small devices col-md: medium size devices col-lg: large devices col-xl: extra large devices
The second * sets a number that adds up to 12 for a row, for example, a row with 4 equal columns:
<div class="row"> <div class="col-sm-3" style="background-color:green;color:white;">.col-sm-3</div> <div class="col-sm-3" style="background-color:orange;color:gray">.col-sm-3</div> <div class="col-sm-3" style="background-color:violet;color:white">.col-sm-3</div> <div class="col-sm-3" style="background-color:black;color:white">.col-sm-3</div> </div>
Move columns for more spacing to the right with offset columns in Bootstrap. For offsets on large displays, you need to use the .offset-md-* class. Through this, you can increase the left margin of a column by * columns. The value of * here is from 1 to 11.
Let us see an example:
<!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.3.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-fluid"> <h1>Offset Columns</h1> <p><strong>Note: </strong>Resize the web browser to see the effect.</p> <div class="row" style="background-color:yellow;"> <div class="col-sm-5 col-md-6" style="background-color:green;color: white;">Demo</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0" style="background-color:blue;color: white;">Demo</div> </div> </div> </body> </html>
The following is the output, wherein you can see the left margin since we have set offset in the second column:
With Bootstrap, you can easily order columns with push and pull i.e. change the order of built-in grid columns. Use the .col-md-push-* and .col-md-pull-* classes to change the order of columns. Here, * range from 1 to 12.
Let us see an example wherein we have ordered columns:
<!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.3.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-fluid"> <h1>Column Ordering</h1> <p><strong>Note: </strong>Resize the web browser to see the effect.</p> <h2>Before ordering columns</h2> <div class="row"> <div class="col-sm-4" style="background-color:blue;color: white;">Demo</div> <div class="col-sm-8" style="background-color:orange;color: white;">Demo</div> </div> <h2>After ordering columns</h2> <div class="row"> <div class="col-sm-4 col-sm-push-8" style="background-color:blue;color: white;">Demo</div> <div class="col-sm-8 col-sm-pull-4" style="background-color:orange;color: white;">Demo</div> </div> </div> </body> </html>
In the above web page, we have shown what happens when we order columns using the push and pull classes.
Let us now see the output. Resize the browser window to get the following that displays the columns ordered successfully:
The Bootstrap Panel component allow you to add a bordered container with some padding around the content inside it. The .panel class is used in Bootstrap to create a panel. However, you need to include another class for content i.e. panel-body.
Let us see an example to create a panel:
<!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.3.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>Panels in Bootstrap</h2> <div class="panel panel-default"> <div class="panel-body">This is our Panel</div> </div> </div> </body> </html>
The following output displays Panels in Bootstrap:
You can also add a separate heading to a panel using the .panel-heading class. Let us see an example of headings in Panel:
<!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.3.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>Panels in Bootstrap</h2> <div class="panel panel-default"> <div class="panel-heading">Panel Heading</div> <div class="panel-body">This is our Panel</div> </div> </div> </body> </html>
The following is the output:
Bootstrap Well is a container that adds a rounded border around an element. It adds padding and gray background color.
Let us now learn how to create a Bootstrap Well:
<div class = "well"> This is my well! </div>
We will now implement the above in a web page:
<!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.3.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>Learning about Wells in Bootstrap</h2> <div class = "well"> This is my well! </div> </div> </body> </html>
Above creates the following well:
The size of Well can also be changed in Bootstrap using well-sm and well-lg classes. Here, we are implementing them:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Well 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.3.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>Learning about Wells in Bootstrap</h2> <div class = "well well-sm"> This is my well! Smaller! </div> <div class = "well"> This is my well! Medium! </div> <div class = "well well-lg"> This is my well! Large! </div> </div> </body> </html>
Here is the output:
Inline forms are the forms in which the elements are inline and left-aligned. To create an inline form, include Bootstrap class .form-inline to the <form> tag.
Let us see an example:
Note: Resize the web browser to see the effect
<!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.3.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>Inline Form in Bootstrap</h2> <form class="form-inline" action=""> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </body> </html>
Here is the output when the screen size is below 767 px:
Here is the output when the screen size is above 767 px. All the elements are now inline and left-aligned
Bootstrap has around 260 glyphicons, which can be used on any website. For Bootstrap, these icon fonts are available for free. Let us now see how we can use Glyphicons on our website:
Under the Bootstrap folder, which you may have downloaded to work with Bootstrap, a “fonts” folder can be seen. The same folder has all the icons. Every Glyphicon has a name, which you need to use as shown below:
<span class = "glyphicon glyphicon-name"></span>
Set the name of the glyphicon under “gplyphicon-name”:
<span class = "glyphicon glyphicon-user"></span>
You can set the icon in a button as well as shown below:
<button type = "button" class = "btn btn-primary btn-sm"> <span class = "glyphicon glyphicon-user"></span> User </button>
Here is an example that shows how to add icons:
<!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.3.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 mt-3"> <h2>Glyphicons</h2> <p>Working with Glyphicons in Bootstrap:</p> <button type = "button" class = "btn btn-primary btn-sm"> <span class = "glyphicon glyphicon-user"></span> User </button> <button type = "button" class = "btn btn-primary btn-lg"> <span class = "glyphicon glyphicon-search"></span> Search </button> </div> </body> </html>
The output displays the icons in a button:
With Bootstrap, you can easily add Pagination on any web page. This is useful if you have a lot of linked posts and pages.
Some classes in Bootstrap are useful in creating a basic pagination. Let us see them below:
To create a basic pagination, you need to use the <ul> tag. Include the .pagination class to this <ul> and then add the .page-item to each <li> tag.
The following pagination has active post as 2nd. We have active using the “.active” class to display the current post/ page:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Navbar</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Post 2</h2> <p>The following is a demo line.</p> <p>The following is a demo line.</p> <p>The following is a demo line.</p> <p>The following is a demo line.</p> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item active"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">4</a></li> <li class="page-item"><a class="page-link" href="#">5</a></li> <li class="page-item"><a class="page-link" href="#">6</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </div> </body> </html>
The output below displays demo content and pagination with next/ previous links as well:
Container (Fixed-Width)
Use the container element when you want fixed-width which is responsive. Include it like this:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Demo Page</h1> <p>The .container class provides a fixed width container.</p> </div> </body> </html>
Container Fluid (Full-Width)
Use the container-fluid element to provide a full-width container that spans the entire width of the viewport:
Include it like this:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Demo Page</h1> <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p> </div> </body> </html>
The following describes the difference between both the layouts:
On many websites, you may have seen cards with images that describes the profile of an author or contributor. Create these using cards in Bootstrap, which is a bordered box with some padding around it.
Use the .card class to create a card in Bootstrap. With that, Bootstrap provides .card-body class to add content inside it.
Let us now learn how to create a basic card in Bootstrap:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Card</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Card</h2> <div class="card"> <div class="card-body">Card Body</div> </div> </div> </body> </html>
The output displays the following card:
With Bootstrap, you can also add card titles.
Create a flexbox container for small screen using the d-sm-flex class in Bootstrap.
The default navbar is a basic Navigation Bar that use the following class:
class = "navbar navbar-default"
With that, set role as navigation:
<nav class = "navbar navbar-default" role = "navigation">
Now, header class is added, which act as a container for logo or header. The logo is added using navbar-brand:
<div class = "navbar-header"> <a class = "navbar-brand" href = "#">Knowledge Hut</a> </div>
Let us see an example now:
<!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.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default" role = "navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">New Website</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">AboutUs</a></li> <li><a href="#">Company</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </body> </html>
The output: 
On dropdown menus, you may have seen an arrow icon. This is called carot arrow icon. Here’s an example:
In Bootstrap, you can easily create a carot icon using the .caret class.
The following is an example displaying dropdown menu with the carot arrow icon:
<!DOCTYPE html> <html> <head> <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.3.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>Popular Brands</h2> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Brands <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Kenstar</a></li> <li><a href="#">Samsung</a></li> <li><a href="#">Fastrack</a></li> <li><a href="#">Tanishq</a></li> <li><a href="#">Britannia</a></li> </ul> </div> </div> </body> </html>
The output:
Let’s say you have Dropdown component in Bootstrap to create Dropdown menus.
The menus generally get displayed in the default format like this:
If you want to align the above component to the right, then it is possible with Bootstrap. To align the menus on your website, you can use the .dropdown-menu-right class. It aligns the dropdown menus on the right.
The following is an example that aligns the menu to the right on clicking:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Menus Alignment</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.3.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>Football Teams</h2> <p>The following is the information about the teams:</p> <div class = "dropdown"> <button class = "btn btn-primary dropdown-toggle" type = "button" data-toggle="dropdown">Teams <span class = "caret"></span></button> <ul class = "dropdown-menu dropdown-menu-right"> <li><a href = "#">Real Madrid</a></li> <li><a href = "#">CSKA Moscow</a></li> <li><a href = "#">Manchester United</a></li> <li><a href = "#">Barcelona</a></li> </ul> </div> </div> </body> </html>
The output:
Above, we have created and set the menus on the right as shown below:
<ul class = "dropdown-menu dropdown-menu-right"> <li><a href = "#">Real Madrid</a></li> <li><a href = "#">CSKA Moscow</a></li> <li><a href = "#">Manchester United</a></li> <li><a href = "#">Barcelona</a></li> </ul>
To add a footer to panel in Bootstrap, use the .panel-footer class:
<div class="panel-footer">
Panel Footer
</div>
Let us see an example to add footer to panel:
<!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.3.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>Panels in Bootstrap</h2> <div class="panel panel-default"> <div class="panel-heading">Panel Heading</div> <div class="panel-body">This is our Panel</div> <div class="panel-footer">Panel Footer</div> </div> </div> </body> </html>
The output displays a footer in panel:
The center-block Bootstrap class is useful in changing the position of an element to center. The class applies the following to center an element:
display:block margin-right:auto margin-left:auto
The following is an example that floats an element in the center in Bootstrap 3:
<!DOCTYPE html> <html> <head> <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.3.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>Floating an element</h2> <div class="center-block" style="background-color:red;color: white;width:100px;"> This is in the center! </div> </div> </body> </html>
The output: 
Bootstrap 4 came with the concept of flex. Using flex, you can easily center an element with.align-self-center class.
To add outline to Buttons, Bootstrap 4 came up with some classes for outline buttons. For example, For a blue outline, use the .btn-outline-primary class. In the same way for red outline, use the .btn-outline-danger class.
The following is an example:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Buttons Outline</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Buttons</h2> <button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-dark">Dark</button> </div> </body> </html>
The output displays outline for Buttons:
Responsive feature can be easily added to a navbar. Create a default navbar and make it responsive.
Under “navbar-header”, use the data- attribute twice. First data-toggle to inform JS that what is to be done with the button. However, the second one i.e. data-target indicates the element to be toggled:
<button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#demo"> <span class = "sr-only">Toggle navigation</span> <span class = "icon-bar"></span> <span class = "icon-bar"></span> <span class = "icon-bar"></span> </button>
Now, wrap the content in a <div> with collapse and navbar-collapse classes:
<div class = "collapse navbar-collapse" id = "demo"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">AboutUs</a></li> <li><a href="#">Company</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div>
Let us now see an example to create a responsive navbar following the above steps:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Responsive Navbar</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.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="navbar-header"> <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "#demo"> <span class = "icon-bar"></span> <span class = "icon-bar"></span> <span class = "icon-bar"></span> </button> <a class="navbar-brand" href="#">New Website</a> </div> <div class = "collapse navbar-collapse" id = "demo"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">AboutUs</a></li> <li><a href="#">Company</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </body> </html>
The output shows the responsive menu:
To create a table in Bootstrap, use the .table class. However, to create a striped table, use the .table-stripped class. The striped table will have striped rows i.e. zebra striped rows.
Here’s how you add a striped table:
<table class="table table-striped"> … </table>
The below example displays how we can create a striped table:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Striped Table</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.3.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>Data</h2> <p>The following is the Investor's data:</p> <table class="table table-striped"> <thead> <tr> <th>Company</th> <th>Investor</th> </tr> </thead> <tbody> <tr> <td>ABC</td> <td>PQ</td> </tr> <tr> <td>GHI</td> <td>VW</td> </tr> <tr> <td>JKL</td> <td>EF</td> </tr> <tr> <td>RST</td> <td>IJ</td> </tr> <tr> <td>MNO</td> <td>KL</td> </tr> </tbody> </table> </div> </body> </html>
The above displays the below given output with striped rows (zebra striped). We have here 6 rows and 2 columns:
To create a Navbar in Bootstrap, use the .navbar class. For responsiveness, follow it with .navbar-expand class with the values:
.navbar-expand -xl: Stack navbar vertically on extra large screen .navbar-expand -lg: Stack navbar vertically on large screen .navbar-expand -md: Stack navbar vertically on medium screen .navbar-expand -sm: Stack navbar vertically on small large screen
Now, in a navbar, you have links, which a user can click and navigate. To add links, use class “.navbar-nav” and under that the <li> elements should be with a .nav-item class as shown below:
<ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">One</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Two</a> </li> </ul>
Let us see what we discussed above in the following example:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Navbar</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-expand-sm bg-light"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Technology</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Research</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Entertainment</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Festivals</a> </li> <li class="nav-item"> <a class="nav-link" href="#">News</a> </li> </ul> </nav> </body> </html>
The following is the output that display the navigation bar with 6 links:
Yes, we can easily create a Progress Bar with different colors using the contextual classes. The following are the contextual classes available for Progress Bar in Bootstrap:
For our example, let us create a green colored Progress Bar:
<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%"> <span class="sr-only">80%</span> </div> </div>
The above displays the following green colored Progress Bar:
Let us now create multiple Progress Bars with different colors. Here, we are displaying information about an app based on its performance, crashes and errors. For all this information, we have used three Progress Bars:
<!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.3.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"> <h1>App Information</h1> <h2>App Performance</h2> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%"> 90% </div> </div> <h2>App Crashes</h2> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width:10%"> 10% </div> </div> <h2>App Errors</h2> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%"> 20% </div> </div> </div> </body> </html>
The output displays Progress Bars with different colors:
Form Layout in Bootstrap has the following three forms:
Let us learn about them one by one:
Vertical Form
This is the default form in Bootstrap. Let us see a code snippet to understand it:
<!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.3.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>Vertical Form in Bootstrap</h2> <div class="form-group"> <label for="email">UserId (Email):</label> <input type="email" class="form-control" id="useremail"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> </div> </div> </body> </html>
The above displays the following vertical form as the output:
Horizonal Form
The form-horizonal class is used in Bootstrap for Horizontal form. The labels are aligned horizontally next to the input field on large and medium screens. However, on small screens i.e. < 767px, it will get converted to a vertical form. The form would then look like labels on top of each input).
Let us see a code to understand it:
<!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.3.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>Horizontal Form in Bootstrap</h2> <form class="form-horizontal" action=""> <div class="form-group"> <label class="control-label col-sm-2" for="email">UserId(Email):</label> <div class="col-sm-10"> <input type="email" class="form-control" id="useremail" placeholder="Enter email"> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="pwd">Password:</label> <div class="col-sm-10"> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> </div> </form> </div> </body> </html>
Here is the output when the screen size is below 767 px:
Here is the output when the screen size is above 767 px:
Inline Form
Inline forms are the forms in which the elements are inline and left-aligned. For using it, add class .form-inline to the <form> tag.
Let us see an example:
<!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.3.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>Inline Form in Bootstrap</h2> <form class="form-inline" action=""> <div class="form-group"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </body> </html>
Here is the output when the screen size is below 767 px:
Here is the output when the screen size is above 767 px. All the elements are now inline and left-aligned
To set an aligned object with content, use the Media Object. These objects can be image or video. The usage of media objects can be seen in the comment section of a website/ blog.
The .media class and .media-body class is used in Bootstrap to work with media objects. Float a media object using .media class, whereas .media-body class place media content inside a child container.
The following is an example that creates a media object to align image with content:
<!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/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Learn</h2> <p>Here comes the article content...</p> <div class="media border p-3"> <img src="https://d2o2utebsixu4k.cloudfront.net/media/images/dfbac927-789d-4780-acdb-0eeceab17a17.jpg" alt="John Doe" class="mr-3 mt-3 rounded-square" style="width:90px;"> <div class="media-body"> <h4>Dev Ops</h4> <p>This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text!</p> </div> </div> </div> </body> </html>
The following is the output that displays an image aligned on the left with content:
If you want to align media object on the top, bottom, or middle position, then you can use the flex. Nested media objects are also feasible in Bootstrap.
With Bootstrap, it’s possible to display flex items horizontally using the .flex-row class.
You need to use the following:
<div class="d-flex flex-row bg-secondary mb-3">
Above, we have used the contextual class “bg-secondary” for background color.
Now, we will work on an example:
<!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/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h1>Student Name</h1> <div class="d-flex flex-row bg-primary mb-3"> <div class="p-2 bg-danger">Sehral</div> <div class="p-2 bg-primary">Fara</div> <div class="p-2 bg-dark">Kelly</div> <div class="p-2 bg-secondary">Gemma</div> <div class="p-2 bg-warning">Jessica</div> <div class="p-2 bg-primary">Lauren</div> </div> </div> </body> </html>
The above aligns the flex items horizontally:
To display flex items horizontally, use the flex-*-row class in Bootstrap. For difference screens, replace the * in the class name with the following:
For large screen:
flex-lg-row
For medium size screen:
flex-md-row
For small screen:
flex-sm-row
The .nav-justified class is used in Bootstrap to center pills.
The following is an example:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Pills</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.3.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"> <h3>Centered Pills</h3> <p><strong>Note:</strong> Resize the browser window to see the effect. Items look stacked if the screen size if less than 768px</p> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">Home</a></li> <li><a href="#">AboutUs</a></li> <li><a href="#">Company</a></li> </ul> </div> </body> </html>
The output when the screen size is less than 768px. The pills look stacked:
The output when the screen size is more than 768px:
To condense a table means to cut the row padding in half to shrink it.
Here’s how you make a table condensed:
<table class="table table-condensed"> … </table>
A regular table with border looks like this:
However, a table with bordered and condensed class looks like this. You can easily spot the difference in padding i.e. the following table itself looks condensed:
The below example displays how we can create a condensed table:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Condensed Table</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.3.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>Rank</h2> <p>Rank of teams in Test Cricket</p> <table class="table table-bordered table-condensed"> <thead> <tr> <th>Team</th> <th>Rank</th> </tr> </thead> <tbody> <tr> <td>India</td> <td>1</td> </tr> <tr> <td>England</td> <td>2</td> </tr> <tr> <td>Australia</td> <td>3</td> </tr> <tr> <td>South Africa</td> <td>4</td> </tr> <tr> <td>Srilanka</td> <td>5</td> </tr> </tbody> </table> </div> </body> </html>
The condensed table as our output looks like this:
Expect to come across this popular question in Bootstrap interview questions for experienced professionals.
With Bootstrap, you can easily create a responsive table using the table-responsive class. The example below displays a responsive table that adds a horizontal scrollbar for screen less than 992px wide. It looks the same above 992px.
Note: Resize the web browser to check the effect
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Contextual Classes</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Match Timings Data</h2> <p>The following are the details of the match timings for individuals:</p> <table class="table table-responsive"> <thead class="thead-dark"> <tr> <th>Event</th> <th>Timings</th> </tr> </thead> <tbody> <tr class="table-primary"> <td>Entry</td> <td>9AM</td> </tr> <tr class="table-primary"> <td>Session1</td> <td>9:30AM - 11:30AM</td> </tr> <tr class="table-primary"> <td>Lunch</td> <td>11:45AM - 12:15PM</td> </tr> <tr class="table-primary"> <td>Session2</td> <td>12:30PM - 2:30PM</td> </tr> <tr class="table-primary"> <td>Tea</td> <td>2:45PM - 3:00PM</td> </tr> <tr class="table-primary"> <td>Session3</td> <td>3:15PM - 5:15PM</td> </tr> <tr class="table-success"> <td>Presentation</td> <td>5:20PM - 5:45PM</td> </tr> <tr class="table-primary"> <td>Exit</td> <td>After 5:45PM</td> </tr> </tbody> </table> </div> </body> </html>
The above displays the following responsive table:
Use the pull-right class in Bootstrap to float an element to the right. Let us see an example wherein an element is displayed on the right:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Pull Right</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.3.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>Floating an element</h2> <div class="pull-right"> This is on the right! </div> </div> </body> </html>
The output displays our <div> on the right:
Wrap flex items on medium screen size using the flex-md-wrap class in Bootstrap.
The .active class is used in Bootstrap to create an animated Progress Bar. To your already created ProgressBar, include the .active class with the other Progress Bar classes like:
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%"> 90% </div>
The animation would only be visible if you have already set the Progress Bar to have strip lines as shown in the following example. Here, we have 4 Progress Bars and all are animated:
<!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.3.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>App Performance</h2> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width:90%"> 90% </div> </div> <h2>App Crashes</h2> <div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width:10%"> 10% </div> </div> <h2>App Errors</h2> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%"> 20% </div> </div> <h2>App Success Rate</h2> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width:75%"> 75% </div> </div> </div> </body> </html>
The output displayed is animated:
If you want to add additional information to your content, then use Badges in Bootstrap. Badges looks like labels, but the corners of Badges are more rounded.
If you have a newly launched product and you add the same on your website, then you can add a Badge there as it is “NEW”.
To add a Badge, just add the following with the content of the Badge:
<span class ="badge"> Content </span>
Or you can also use it for count of posts in a blog:
<span class ="badge"> 20 </span>
Let us see an example:
<!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/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Products</h2> <h3>Trousers<span class="badge badge-primary">New</span></h3> </div> </body> </html>
The output displays a blue colored Badge, since we have used .badge-primary contextual class:
We can change the color of Badge by adding other contextual classes like .badge-secondary, badge-info, badge-danger, .badge-warning, .badge-light, .badge-dark, etc.
Let us see another example of colored badges:
<!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/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Products</h2> <h3>Trousers<span class="badge badge-primary">New</span></h3> <h3>Laptop<span class="badge badge-secondary">New</span></h3> <h3>Headphone<span class="badge badge-info">New</span></h3> <h3>Bags<span class="badge badge-warning">Sold</span></h3> </div> </body> </html>
The output:
A staple for Bootstrap interview questions for advanced professionals, be prepared to answer this one.
To display code with Bootstrap, work with the <code> tag. With that, we can also use the <pre> tag.
The <code> tag
For inline code, use the <code> tag. Here, we are displaying a header file code:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Code</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.3.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 mt-3"> <h2>C Programming</h2> <p>The following is the header file for C language:</p> <code>#include <stdio.h></code> <p>The following is the header file for C++ language:</p> <code>#include <iostream></code> </div> </body> </html>
The output displays code. In our case, it is only a header file:
The <pre> tag
If the code has multiple lines, then use the <pre> tag:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Code</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.3.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 mt-3"> <h2>Codes </h2> <p>The following is the header file for C language:</p> <code>#include <stdio.h></code> <p>The following is the usage of fieldset element:</p> <pre> <form> <fieldset> <legend>Details:</legend> Name: <input type="text"><br> Email: <input type="text"><br> </fieldset> </form> </pre> </div> </body> </html>
The output shows the code in multiple lines:
The contextual classes are used to change the background color of table rows or individual cells in Bootstrap 4. The following are the classes with the colors they represent:
Let us now see an example to change the background color in a table:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Contextual Classes</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Investor's Data</h2> <p>The following is the Investor's data:</p> <table class="table table-bordered"> <thead> <tr> <th>Company</th> <th>Investor</th> </tr> </thead> <tbody> <tr class="table-primary"> <td>ABC</td> <td>PQ</td> </tr> <tr class="table-danger"> <td>GHI</td> <td>VW</td> </tr> <tr class="table-warning"> <td>JKL</td> <td>EF</td> </tr> <tr class="table-active"> <td>RST</td> <td>IJ</td> </tr> <tr class="table-success"> <td>MNO</td> <td>KL</td> </tr> </tbody> </table> </div> </body> </html>
Here is the output:
Align gathered items at the end on small screen using the align-content-sm-end class in Bootstrap.
The role of responsive images is to adjust to all screen sizes whether its mobile, desktop or tablet:
For responsive image, set the following:
max-width: 100%; height: auto;
Using the img-fluid class gives you both the above functionalities and scales perfectly on changing the screen size.
Here is an example that makes an image responsive:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Responsive Image</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Demo Image</h2> <p>The following image is responsive and will scale perfectly on different screen sizes.</p> <p><strong>Note:</strong> Resize the web browser to check the effect.</p> <img class="img-fluid" src="https://d2o2utebsixu4k.cloudfront.net/media/images/7d7b2bef-2512-4a87-96cb-0bafd0da5048.jpg" alt="Chania" width="460" height="345"> </div> </body> </html>
The output displays a responsive image. Resize the web browser to check the effect:
No, Bootstrap 4 came with the concept of Flexbox to handle layout. Design flexible responsive layout structure using flexbox.
The d-flex class is used in Bootstrap to set a flexbox container. Let us see an example wherein we are creating Flex Items:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Flexbox</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Flex in Bootstrap</h2> <p>Here are the Flex items:</p> <div class="d-flex p-3 bg-primary text-white"> <div class="p-2 bg-info">Item 1</div> <div class="p-2 bg-warning">Item 2</div> <div class="p-2 bg-danger">Item 3</div> </div> </div> </body> </html>
The following is the output:
Create an inline flexbox container for medium screen using d-md-inline-flex class in Bootstrap.
Since the total of columns is 12, we can easily create unequal columns. The Bootstrap Grid System displays 12 columns in a page. For unequal columns, we can display then as:
col-sm-3 col-sm-6 col-sm-3
Let us implement the above in our Bootstrap code:
<!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.3.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-fluid"> <h1>Unequal Columns</h1> <p><strong>Note:</strong> Resize the web browser window to see the effect.</p> <div class="row"> <div class="col-sm-3" style="background-color:gray;">.col-sm-3</div> <div class="col-sm-6" style="background-color:orange;">.col-sm-6</div> <div class="col-sm-3" style="background-color:yellow;">.col-sm-3</div> </div> </div> </body> </html>
The output displays the following when screen size is above 768px:
Use the classes .input-lg and .input-sm to change the size of form controls in Bootstrap:
The following is an example:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Form Input Sizing</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.3.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>Sizing Form Input Controls</h2> <form> <div class="form-group"> <label for="inputdefault">Regular input size</label> <input class="form-control" id="inputdefault" type="text"> </div> <div class="form-group"> <label for="inputlg">Large input size</label> <input class="form-control input-lg" id="inputlg" type="text"> </div> <div class="form-group"> <label for="inputsm">Smaller input size</label> <input class="form-control input-sm" id="inputsm" type="text"> </div> </form> </div> </body> </html>
The output displays regular, large and smaller inputs:
Image thumbnail looks different from a regular image on a website. It has a gray border and padding, which makes it separate from other images.
The following is an example that displays an image as a thumbnail in Bootstrap using the img-thumbnail class:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Thumbnail Image</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Demo Image</h2> <p>The following image is a thumbnail image with gray border and padding.</p> <img class="img-thumbnail" src="https://d2o2utebsixu4k.cloudfront.net/media/images/7d7b2bef-2512-4a87-96cb-0bafd0da5048.jpg" alt="Chania" width="460" height="345"> </div> </body> </html>
The output:
Pills based navigation can be created in Bootstrap. With that, we can also form Pills with Dropdowns.
Create Pills with:
<ul class="nav nav-pills">
Use the class .nav-stacked to create Pills with Dropdowns:
<ul class="nav nav-pills nav-stacked">
Let us now see how we can create Pills with Dropdowns:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Pills with Dropdowns</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.3.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"> <h3>Pills with Dropdown</h3> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">AboutUs</a></li> <li><a href="#">Company</a></li> <li><a href="#">Services</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">Product1</a></li> <li><a href="#">Product2</a></li> <li><a href="#">Product3</a></li> <li><a href="#">Product4</a></li> <li><a href="#">Product5</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html>
The following is an example:
To add a heading to a panel, use the .panel-heading class. Include it as a <div> class:
<div class="panel-heading"> Panel Heading </div>
Let us see an example of headings in Panel:
<!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.3.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>Panels in Bootstrap</h2> <div class="panel panel-default"> <div class="panel-heading">Panel Heading</div> <div class="panel-body">This is our Panel</div> </div> </div> </body> </html>
The following is the output:
The .label class is used in Bootstrap to create labels. The purpose of using labels is to provide additional information. For example, mentioning “NEW” for a product. It can also be used to set count, tips, etc.
Let us see an example:
<h1>Laptop Charger <span class = "label label-default"> NEW </span> </h1>
To change the color of the label, use contextual classes: .label-default, .label-primary, .label-success, .label-info, .label-warning or .label-danger, etc. An example:
<h1>Laptop Charger <span class = "label label-primary"> NEW </span> </h1>
Above gives a blue color to the label since we have used the label-primary class.
Now, we will work to create some more labels and color them:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Labels</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.3.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"> <h1>Products Information</h2> <h2>Product 1 <span class="label label-default">20</span></h1> <h2>Product 2 <span class="label label-primary">30</span></h2> <h2>Product 3 <span class="label label-info">19</span></h2> <h2>Product 4 <span class="label label-success">50</span></h2> <h1>All the labels</h1> <span class="label label-default">Default Label</span> <span class="label label-primary">Primary Label</span> <span class="label label-success">Success Label</span> <span class="label label-info">Info Label</span> <span class="label label-warning">Warning Label</span> </div> </body> </html>
The output
Progress Bar display loading or a process. It’s easy to crate Progress Bar with Bootstrap using some predefined classes.
The .progress class is used in Bootstrap to create a Progress Bar. Include a .progress class to a <div> element. After that add an empty <div> with another class i.e. .progress-bar:
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%"> <span class="sr-only">80%</span> </div> </div>
For users working with screen readers and to support accessibility, we have used aria-valuemin and aria-valuemax attributes.
The above code will create the following Progress Bar:
Above, we created a Progress Bar, but no information of the level of completion is visible. For that, you need to use label with Progress Bar.
Let us see how to add a label to our Progress Bar:
<!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.3.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>Level of impurities in water</h2> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%"> 80% </div> </div> </div> </body> </html>
The output displays the % level visible on the Progress Bar since we have added label:
For carousel controls, we need an id. Here, we have:
id="newCarousel"
The following sets the <div> has a carousel:
class="carousel slide"
The data-ride="carousel" attribute begins animating the carousel when the page loads.
The bottom of each slide has dots that indicates which slide you’re watching right now. The class .carousel-indicators specify it:
<ol class="carousel-indicators"> <li data-target="#newCarousel" data-slide-to="0" class="active"></li> <li data-target="#newCarousel" data-slide-to="1"></li> <li data-target="#newCarousel" data-slide-to="2"></li> </ol>
The slides are set with class .carousel-inner. We have set the next and previous controls as well with the data-slide attribute:
<!--controls --> <a class="left carousel-control" href="#newCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#newCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a>
The following is an example:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Carousel</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.3.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>KnowledgeHut Blog</h2> <div id="newCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#newCarousel" data-slide-to="0" class="active"></li> <li data-target="#newCarousel" data-slide-to="1"></li> <li data-target="#newCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="https://d2o2utebsixu4k.cloudfront.net/media/images/599e46ac-60e1-429b-a305-e02574081e3c.jpg" alt="How To Pass Leading SAFe® 4 Exam" style="width:100%;"> </div> <div class="item"> <img src="https://d2o2utebsixu4k.cloudfront.net/media/images/079f81ac-d7f7-4c0c-8919-46cc1602c950.jpg" alt="Top-paying Agile Certifications To Consider In 2018" style="width:100%;"> </div> <div class="item"> <img src="https://d2o2utebsixu4k.cloudfront.net/media/images/4096881a-05ea-4162-96cf-3e7949ea82a7.jpg" alt="DevOps In 5 letters: Should We Say CALMS or CALMR?" style="width:100%;"> </div> </div> <!--controls --> <a class="left carousel-control" href="#newCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#newCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> </div> </body> </html>
The output: 
Next slide in the carousel: 
Display flex items from the beginning using the justify-content-*-start class in Bootstrap. For example, for large screen size, use the class with lg:
justify-content-lg-start
The .alert-link class is used in Bootstrap to include links in Alerts. You need to use the anchor element:
<a href="#" class="alert-link">
Since we are using contextual classes to color alerts, you need to provide matching colored links within any alert.
The following is an example:
.<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Link in Alerts</h2> <div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Success! You cracked it!</strong> Demo <a href="#" class="alert-link"> Link!</a> </div> <div class="alert alert-info alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Information! More Info!</strong> Demo <a href="#" class="alert-link"> Link!</a> </div> <div class="alert alert-warning alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Warning! Close program to prevent system failure!</strong> Demo <a href="#" class="alert-link"> Link!</a> </div> <div class="alert alert-danger alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Danger! Malware ahead!</strong> Demo <a href="#" class="alert-link"> Link!</a> </div> <div class="alert alert-primary alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Primary!</strong> Demo <a href="#" class="alert-link"> Link!</a> </div> <div class="alert alert-secondary alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Secondary!</strong> Demo <a href="#" class="alert-link"> Link!</a> </div> <div class="alert alert-dark alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Dark alert!</strong> Demo <a href="#" class="alert-link"> Link!</a> </div> </div> </body> </html>
The output:
Above, you can see the alert links have the same color as alerts. We added color to alerts using contextual classes.
Stretch gathered items on small screen using the align-content-sm-stretch class used in Bootstrap.
To disable a button in Bootstrap, use the .disabled class. Disabling a button makes it unclickable. The design changes will include fade in color by 50% and losing the gradient.
Let us now see an example to disable a button in Bootstrap:
<!DOCTYPE html> <html lang="en"> <head> <title>Disable a Bootstrap Button</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.3.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>Disabling a Button</h2> <button type="button" class="btn btn-primary disabled">Disabled Button</button> <button type="button" class="btn btn-primary">Active Button</button> </div> </body> </html>
The output displays a disabled and another button which is active. The disabled button is unclickable. You can check the same by placing mouse cursor on the disabled button:
To position tooltip in Bootstrap, use the data-placement attribute.
To position tooltip in the bottom in Bootstrap, use the date-placement attribute with the following value:
data-placement="bottom"
The above will be used as:
<a href="#" data-toggle="tooltip" data-placement="bottom" title="This is a tooltip!">Keep mouse cursor here</a>
The following is how you can position tooltip in the bottom in Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h3>Tooltip Example</h3>
<p>Tooltip is in the bottom...</p><br>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="This is a tooltip!">Keep mouse cursor here</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>The following is the output that displays tooltip in the bottom:
To create a bordered table, use the .table-bordered class. The bordered table will have borders on the sizes of the table and its cells.
Here’s how you add a bordered table:
<table class="table table-bordered"> … </table>
The below example displays how we can create a bordered table:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Bordered Table</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.3.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>Data</h2> <p>The following is the Investor's data:</p> <table class="table table-bordered"> <thead> <tr> <th>Company</th> <th>Investor</th> </tr> </thead> <tbody> <tr> <td>ABC</td> <td>PQ</td> </tr> <tr> <td>GHI</td> <td>VW</td> </tr> <tr> <td>JKL</td> <td>EF</td> </tr> <tr> <td>RST</td> <td>IJ</td> </tr> <tr> <td>MNO</td> <td>KL</td> </tr> <tr> <td>WXA</td> <td>MN</td> </tr> </tbody> </table> </div> </body> </html>
The above displays the following bordered table. We have here 7 rows and 2 columns:
Display flex items around on large screen size using the justify-content-lg-around class in Bootstrap.
For List Group Items, we use the <ul> element as shown below:
<ul class = "list-group"> <li class = "list-group-item">One</li> <li class = "list-group-item">Two</li> <li class = "list-group-item">Three</li> <li class = "list-group-item">Four</li> <li class = "list-group-item">Five</li> </ul>
To link List Group Items, use the anchor tag. With that, use the <div> element instead of <ul>:
<a href = "#" class = "list-group-item active">One</a> <a href = "#" class = "list-group-item">Two</a> <a href = "#" class = "list-group-item">Three</a> <a href = "#" class = "list-group-item">Four</a> <a href = "#" class = "list-group-item">Five</a>
The following is an example displaying how you can link List Group Items:
<!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.3.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>Link List Group Items</h2> <ul> <a href = "#" class = "list-group-item active">One</a> <a href = "#" class = "list-group-item">Two</a> <a href = "#" class = "list-group-item">Three</a> <a href = "#" class = "list-group-item">Four</a> <a href = "#" class = "list-group-item">Five</a> </ul> </div> </body> </html>
The output is displayed here:
We have used the .active class to display the current link.
The input group size can be easily changed in Bootstrap, using the .input-group-lg and input-group-sm, classes.
Here, the .input-group-lg is used for large input groups. The .input-group-sm is used for small input groups.
The following is an example that displays how to change the size of the input groups in Bootstrap:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Input Group Size</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Input Group Size</h2> <form> <div class="input-group mb-3 input-group-sm"> <div class="input-group-prepend"> <span class="input-group-text">Small</span> </div> <input type="number" class="form-control"> </div> </form> <form> <div class="input-group mb-3 input-group-lg"> <div class="input-group-prepend"> <span class="input-group-text">Large</span> </div> <input type="number" class="form-control"> </div> </form> </div> </body> </html>
The output display different sizes of inputs:
If you want to create a tabbed navigation menu, then use the “nav-tabs” class like this:
<ul class="nav nav-tabs">
Let us now see how we can form a tab based navigation menu:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Tabbed Menu</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.3.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"> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">AboutUs</a></li> <li><a href="#">Company</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html>
The output looks like tabbed navigation menu as shown below. The Home tab is marked as the current page:
Expect to come across this popular question in Bootstrap interview questions for experienced professionals.
With Bootstrap, we can easily stack multiple progress bars. For that, include only a single .progress class and place all the Progress Bars inside it.
For example, firstly adding only a single Progress Bar in the .progress class:
<div class = "progress"> <div class = "progress-bar progress-bar-info" role = "progressbar" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;"> 20% </div> </div>
Now, add another Progress Bar in the same .progress class:
<div class = "progress"> <div class = "progress-bar progress-bar-success" role = "progressbar" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;"> 20% </div> <div class = "progress-bar progress-bar-info" role = "progressbar" aria-valuenow = "10" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;"> 10% </div> </div>
Let us add more Progress Bars in the same .progress class:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Striped Progress Bar</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.3.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>Level of monosodium glutamate</h2> <div class = "progress"> <div class = "progress-bar progress-bar-success" role = "progressbar" aria-valuenow = "20" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;"> 20% (Success) </div> <div class = "progress-bar progress-bar-info" role = "progressbar" aria-valuenow = "10" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;"> 10% (High) </div> <div class = "progress-bar progress-bar-warning" role = "progressbar" aria-valuenow = "35" aria-valuemin = "0" aria-valuemax = "100" style = "width: 35%;"> 35% (Very High - Warning) </div> <div class = "progress-bar progress-bar-danger" role = "progressbar" aria-valuenow = "35" aria-valuemin = "0" aria-valuemax = "100" style = "width: 35%;"> 35% (Danger) </div> </div> </div> </body>
The output displays multiple Progress Bars in a single .progress class:
To align a flex item in the center on small screen using the align-self-sm-center class in Bootstrap. This is how you include the class:
<div class="p-2 border align-self-sm-center"> Flex item name </div>
Display flex items vertically with reversed order on large screen using the flex-lg-column-reverse class in Bootstrap.
To add badges to List Groups in Bootstrap, you need to add the following in <li class = "list-group-item">:
<span class = "badge">
Let us now add:
<ul class = "list-group"> <li class = "list-group-item"><span class = "badge">New</span>One</li> <li class = "list-group-item"><span class = "badge">New</span>Two</li> <li class = "list-group-item"><span class = "badge">New</span>Three</li> <li class = "list-group-item"><span class = "badge">New</span>Four</li> <li class = "list-group-item"><span class = "badge">New</span>Five</li> </ul>
The following is an example:
<!DOCTYPE html> <html> <head> <title>Try v1.2 Bootstrap Online</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Add Badges to List Groups</h2> <ul class = "list-group"> <li class = "list-group-item"><span class = "badge">New</span>One</li> <li class = "list-group-item"><span class = "badge">New</span>Two</li> <li class = "list-group-item"><span class = "badge">New</span>Three</li> <li class = "list-group-item"><span class = "badge">New</span>Four</li> <li class = "list-group-item"><span class = "badge">New</span>Five</li> </ul> </div> </body> </html>
The output:
A dropdown menu is a standard menu that drop down. But, for your website or web project, if you want it to drop up, then it is possible.
The following is an example that has drop up menu instead of dropdown. We used the .dropup class in div to fulfill our purpose.
<!DOCTYPE html> <html> <head> <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.3.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>Dropup</h2> <p>Example of menu upwards i.e. drop up:</p><br> <div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Demo <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div> </div> </body> </html>
The output looks like this:
Now, clicking on the menu will generate the menu upwards i.e. dropup:
Yes, we can align single rows of items from the start using the align-items-*-start class used in Bootstrap.
Let’s say you need to align from the start on small screen size, for that in place of *, add sm for small i.e.:
align-items-sm-start
The .btn-group-vertical class is used in Bootstrap to form a set of buttons appear vertically stacked. This is a class for Button Groups.
The following is an example:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Button Groups</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.3.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>Teams (Vertical Button Group)</h2> <p>The following is the information about the teams:</p> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Real Madrid</button> <button type="button" class="btn btn-primary">CSKA Moscow</button> <button type="button" class="btn btn-primary">Manchester United</button> <button type="button" class="btn btn-primary">Barcelona</button> </div> <h2>Teams (Horizontal Button Group)</h2> <p>The following is the information about the teams:</p> <div class="btn-group"> <button type="button" class="btn btn-primary">Real Madrid</button> <button type="button" class="btn btn-primary">CSKA Moscow</button> <button type="button" class="btn btn-primary">Manchester United</button> <button type="button" class="btn btn-primary">Barcelona</button> </div> </div> </body> </html>
Here is the output that displays a group of buttons vertically stacked:
To include list groups within any panel, try the following steps:
Let us now see how we can create list groups within a panel:
<!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.3.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>Panels in Bootstrap</h2> <div class="panel panel-default"> <div class="panel-heading">Panel Heading</div> <div class="panel-body">This is our Panel</div> <ul class = "list-group"> <li class = "list-group-item">One</li> <li class = "list-group-item">Two</li> <li class = "list-group-item">Three</li> <li class = "list-group-item">Four</li> <li class = "list-group-item">Five</li> <li class = "list-group-item">Six</li> <li class = "list-group-item">Seven</li> <li class = "list-group-item">Eight</li> </ul> <div class="panel-footer">Panel Footer</div> </div> </div> </body> </html>
The output displays a panel and 8 group items in a List Group:
To create alert messages on your website, work with the Alert component in Bootstrap. We will use the .alert class for this purpose.
The dismissal alert provided user with an option to close the alert message. For this purpose, use the .alert-dismissible class. After that include class="close" and data-dismiss="alert".
Here, we will use × HTML character to display the close sign for closing alert buttons.
Let us see an example:
.<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Dismissible Alerts</h2> <div class="alert alert-success alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Success! You cracked it!</strong> </div> <div class="alert alert-info alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Information! More Info!</strong> </div> <div class="alert alert-warning alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Warning! Close program to prevent system failure!</strong> </div> <div class="alert alert-danger alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Danger! Malware ahead!</strong> </div> <div class="alert alert-primary alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Primary!</strong> </div> <div class="alert alert-secondary alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Secondary!</strong> </div> <div class="alert alert-dark alert-dismissible"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Dark alert!</strong> </div> </div> </body> </html>
The output displays dismissible alerts:
The contextual classes are used in Bootstrap to add background color to a card. The following are the contextual classes that can be used: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
The following is an example that adds background color to a Bootstrap card:
<!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/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Cards with different background colors</h2> <div class="card"> <div class="card-body">Default</div> </div> <br> <div class="card bg-primary text-white"> <div class="card-body">Primary</div> </div> <br> <div class="card bg-secondary text-white"> <div class="card-body">Secondary</div> </div> <br> <div class="card bg-success text-white"> <div class="card-body">Success</div> </div> <br> <div class="card bg-info text-white"> <div class="card-body">Info</div> </div> <br> <div class="card bg-warning text-white"> <div class="card-body">Warning</div> </div> <br> <div class="card bg-danger text-white"> <div class="card-body">Danger</div> </div> <br> <div class="card bg-dark text-white"> <div class="card-body">Dark</div> </div> <br> </div> </body> </html>
The output displays cards with different background colors:
The .card-deck is used in Bootstrap to create a grid of cards of equal height and width. Let us first see how we can set two cards inside the .card-deck class:
<!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/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Grid of Cards</h2> <div class="card-deck"> <div class="card bg-secondary"> <div class="card-body text-center"> <p class="card-text">This is example text1.</p> <p class="card-text">This is example text2.</p> <p class="card-text">This is example text3.</p> <p class="card-text">This is example text4.</p> </div> </div> <div class="card bg-info"> <div class="card-body text-center"> <p class="card-text">This is example text1.</p> <p class="card-text">This is example text2.</p> </div> </div> </div> </div> </body> </html>
The above sets two cards of equal height and width:
Let us now add more cards to the grid of cards. This will show how the card align themselves:
<!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/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Grid of Cards</h2> <div class="card-deck"> <div class="card bg-secondary"> <div class="card-body text-center"> <p class="card-text">This is example text1.</p> <p class="card-text">This is example text2.</p> <p class="card-text">This is example text3.</p> <p class="card-text">This is example text4.</p> </div> </div> <div class="card bg-info"> <div class="card-body text-center"> <p class="card-text">This is example text1.</p> <p class="card-text">This is example text2.</p> <p class="card-text">This is example text2.</p> </div> </div> <div class="card bg-warning"> <div class="card-body text-center"> <p class="card-text">This is example text1.</p> <p class="card-text">This is example text2.</p> <p class="card-text">This is example text3.</p> <p class="card-text">This is example text4.</p> </div> </div> <div class="card bg-danger"> <div class="card-body text-center"> <p class="card-text">This is example text1.</p> <p class="card-text">This is example text2.</p> <p class="card-text">This is example text2.</p> </div> </div> </div> </div> </body> </html>
The output displays 4 cards in the deck of cards:
The collapsibles are used in Bootstrap to hide and shows large amount of content.
The following are used for Collapsible:
.collapse: hides content .collapse.show: to show content
Let us see an example of Bootstrap collapse with .collapse class:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Bootstrap Collapsible</h2> <p>Show or hide the content:</p> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#mydiv">Click me</button> <div id="mydiv" class="collapse"> This is the content which is toggled on button click. </div> </div> </body> </html>
The following is the output that shows toggled content (show or hide) on button click. First, let us see the result on running:
After that, click the above button that toggles content. On clicking, the collapsed content will be visible:
Bootstrap Well is a container that adds a rounded border around an element. It adds padding and gray background color.
The size of Well can be changed in Bootstrap using well-sm and well-lg classes. Here, we are implementing them:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Well 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.3.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>Size of Wells in Bootstrap</h2> <div class = "well well-sm"> This is my well! Smaller! </div> <div class = "well"> This is my well! Medium! </div> <div class = "well well-lg"> This is my well! Large! </div> </div> </body> </html>
Here is the output:
We can also create a Bootstrap Well with the default size:
<div class = "well"> This is my well! </div
The following is an example wherein we have created a Bootstrap Well with the default size:
<!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.3.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>Learning about Wells in Bootstrap</h2> <div class = "well"> This is my well! </div> </div> </body> </html>
Above creates the following “Well”:
Display flex items in the center of a flex container on extra-large screen using the justify-content-xl-center class used in Bootstrap.
We have used xl for extra-large screen size:
<div class="d-flex justify-content-xl-center bg-primary">
Flex items . . . </div>
Above, bg-primary is a contextual class to set background color.
Display flex items in between on medium screen using the justify-content-md-between class in Bootstrap.
The following is an example:
<!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/4.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Example</h2> <p>Note: Resize the browser window</p> <div class="d-flex justify-content-md-between bg-primary mb-3"> <div class="p-2 bg-success">Flex Item 1</div> <div class="p-2 bg-secondary">Flex Item 2</div> <div class="p-2 bg-danger">Flex Item 3</div> </div> </div> </div> </body> </html>
The following output displays the flex items are visible in between the flex container on medium screen size:
The .table-hover class is used in Bootstrap to add a hover effect on table rows. A grey background color is visible when mouse hovers.
The following is an example:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Striped Table</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.3.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>Data</h2> <p>The following is the Investor's data:</p> <table class="table table-hover"> <thead> <tr> <th>Company</th> <th>Investor</th> </tr> </thead> <tbody> <tr> <td>ABC</td> <td>PQ</td> </tr> <tr> <td>GHI</td> <td>VW</td> </tr> <tr> <td>JKL</td> <td>EF</td> </tr> <tr> <td>RST</td> <td>IJ</td> </tr> <tr> <td>MNO</td> <td>KL</td> </tr> </tbody> </table> </div> </body> </html>
The output displays the following table:
On mouse hover over any of the row, a gray background color is visible:
The table without a border is known as borderless border. Bootstrap provides a separate class to create a borderless table. This class removes borders from a table.
The example displays both bordered as well as borderless table:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Borderless Table</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Borderless table</h2> <p>The following is the Investor's data:</p> <table class="table table-borderless"> <thead> <tr> <th>Company</th> <th>Investor</th> </tr> </thead> <tbody> <tr> <td>ABC</td> <td>PQ</td> </tr> <tr> <td>GHI</td> <td>VW</td> </tr> <tr> <td>JKL</td> <td>EF</td> </tr> </tbody> </table> <h2>Bordered table</h2> <p>The following is the Investor's data:</p> <table class="table"> <thead> <tr> <th>Company</th> <th>Investor</th> </tr> </thead> <tbody> <tr> <td>ABC</td> <td>PQ</td> </tr> <tr> <td>GHI</td> <td>VW</td> </tr> <tr> <td>JKL</td> <td>EF</td> </tr> </tbody> </table> </div> </body> </html>
The output displays both bordered as well as borderless table:
With Bootstrap, you can change the theme of the default navigation bar. Yes, you can create an inverted Navbar using the .navbar-inverse class.
We create a default navbar using navbar-default class:
<nav class="navbar navbar-default” role = "navigation">
Above will create a default navbar with the following style:
Replace the .navbar-default class with the class to create inverted Navbar:
<nav class="navbar navbar-inverse” role = "navigation">
The following is an example that displays how we can crate inverted Navbar (black colored):
<!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.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-inverse" role = "navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">New Website</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">AboutUs</a></li> <li><a href="#">Company</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </body> </html>
The above code creates the following inverted navbar unlike the default navbar:
In a NavBar, if you want to highlight the current link, then use the .active class.
Let’s say we have a Navbar with some items and out of which you want to highlight the “Entertainment” link, which is the current link. For that, use the .active class like this:
<li class="nav-item active"> <a class="nav-link" href="#">Entertainment</a> </li>
Now, let us see how we can create more items in Navbar and highlight one of them. For the second Navbar, we have highlighted the item “Tech”:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Navbar</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Highlight Navbar</h3> </div> <nav class="navbar navbar-expand-sm bg-danger navbar-dark"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Entertainment</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Tech</a> </li> </ul> </nav> <nav class="navbar navbar-expand-sm bg-primary navbar-dark"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Entertainment</a> </li> <li class="nav-item active"> <a class="nav-link" href="#">Tech</a> </li> </ul> </nav> </body> </html>
The output:
To create a colored Navbar, firstly work around the same procedure to create a Navbar. Then, use the .bg-color classes to change the background color. These classes include: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light classes.
Let us first begin with creating a blue colored Navbar using .bg-primary color classes:
<!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/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Colored Navbar</h3> </div> <nav class="navbar navbar-expand-sm bg-primary navbar-dark"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#" active>Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Entertainment</a> </li> <li class="nav-item"> <a class="nav-link" href="#">News</a> </li> </ul> </nav> </body> </html>
The output displays a colored Navbar:
Now, let us add more navbars with different colors using the classes discussed above:
<!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/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Colored Navbars</h3> </div> <nav class="navbar navbar-expand-sm bg-primary navbar-dark"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#" active>Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Entertainment</a> </li> <li class="nav-item"> <a class="nav-link" href="#">News</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </nav> <nav class="navbar navbar-expand-sm bg-secondary navbar-dark"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#" active>Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Entertainment</a> </li> <li class="nav-item"> <a class="nav-link" href="#">News</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </nav> <nav class="navbar navbar-expand-sm bg-danger navbar-dark"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#" active>Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Entertainment</a> </li> <li class="nav-item"> <a class="nav-link" href="#">News</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </nav> <nav class="navbar navbar-expand-sm bg-warning navbar-dark"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#" active>Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Entertainment</a> </li> <li class="nav-item"> <a class="nav-link" href="#">News</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </nav> </body> </html>
The output with Navbars in different colors:
Fixed Navigation Bar in Bootstrap allow you to fix the navbar at the bottom. Use the .navbar-fixed-bottom class to achieve the same:
<nav class="navbar navbar-default navbar-fixed-bottom">
To check with a scrollbar, we have styled the body height as 1200px:
<body style="height:1200px">
Now, when you will scroll the page, the navigation bar would remain fixed on the bottom.
The following example fix the navbar to the bottom:
<!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.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body style="height:1200px"> <nav class="navbar navbar-default navbar-fixed-bottom"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">New Website</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">AboutUs</a></li> <li><a href="#">Company</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </body> </html>
The output displays the navigation bar fixed at bottom. Notice the scrollbar on the right. The changes in the scrollbar won’t affect the position of the navigation bar at the bottom:
Use the flex-lg-nowrap class in Bootstrap 4 to not allow flex-item to wrap on large screen. Use it like this:
<div class="d-flex flex-lg-nowrap bg-light"> Flex items . . . </div>
To add fading effect for a Bootstrap Modal, use the .fade class. Add this class in the modal container
<div class="modal fade" id="newModal">
Let us see an example of Bootstrap modal fading effect:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Modal</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal in Bootstrap</h2> <p>Fading effect in Modal...</p> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newModal"> Open </button> <div class="modal fade" id="newModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> Body of the modal... </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>
The output looks like this:
On clicking the “Open” button, the modal opens and the fading effect is visible. The same fading effect can be seen on closing the modal:
Use the .modal-dialog-centered class to center the Bootstrap modal vertically and horizontally within the page.
<div class="modal-dialog modal-dialog-centered">
Generally, by default, a modal appears like this. You can see it is not vertically and horizontally centered:
But, the modal after using the .modal-dialog-centered class will look vertically and horizontally centered:
Let us now see an example:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Modal</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Modal in Bootstrap</h2> <p>Fading effect in Modal...</p> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newModal"> Open </button> <div class="modal fade" id="newModal"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> Body of the modal... </div> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>
The above centers the Bootstrap modal vertically and horizontally within the page:
To nest button groups within another button group, you need to include one button group into another. The following is an example that displays nested Button Groups. Here, we have three buttons in a Button group. The second button has a nested Button Groups that displays the year in which India won World Cup.
The example:
<!DOCTYPE html> <html lang="en"> <head> <title>Nest Bootstrap Button Groups</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.3.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>WorldCup</h2> <p>The following is the information about the ODI World Cup winning teams:</p> <div class="btn-group"> <button type="button" class="btn btn-primary">West Indies</button> <div class = "btn-group"> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown"> India <span class = "caret"></span> </button> <ul class = "dropdown-menu"> <li><a href = "#">1983</a></li> <li><a href = "#">2011</a></li> </ul> </div> <button type="button" class="btn btn-primary">New Zealand</button> </div> </div> </body> </html>
Here is the output that displays nested Button Groups. The second button in the button group is nested as shown below:
The .form-check-inline class is used in Bootstrap to make the checkboxes to appear on the same line. This form of checkboxes is known as Inline Checkboxes.
The example below displays checkbox to appear on the same line:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Inline Checkbox</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Favourite CMS</h2> <p>Select the CMSs you like working on:</p> <form action=""> <div class="form-check-inline"> <label class="form-check-label" for="ch1"> <input type="checkbox" class="form-check-input" id="ch1" name="vehicle1" value="something" checked>WordPress </label> </div> <div class="form-check-inline"> <label class="form-check-label" for="ch2"> <input type="checkbox" class="form-check-input" id="ch2" name="vehicle2" value="something">Drupal </label> </div> <button type="submit" class="btn btn-info">Submit</button> </form> </div> </body> </html>
The output:
Yes, a Bootstrap Well is a container. It is a container in <div> through which the content appears sunken. As you can see below a basic container is Create a Bootstrap Well:
<div class = "well"> This is my well! </div>
We will now implement the above in a web page:
<!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.3.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>Learning about Wells in Bootstrap</h2> <div class = "well"> This is my well! </div> </div> </body> </html>
Above creates the following well:
The size of Well can also be changed in Bootstrap using well-sm and well-lg classes. Here, we are implementing them:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Well 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.3.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>Learning about Wells in Bootstrap</h2> <div class = "well well-sm"> This is my well! Smaller! </div> <div class = "well"> This is my well! Medium! </div> <div class = "well well-lg"> This is my well! Large! </div> </div> </body> </html>
Here is the output:
The two classes you need to use for adding auto margins to flex items are .mr-auto and .ml-auto.
Let us first see .mr-auto that place items to the right:
<!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/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Flex Items</h2> <div class="d-flex mb-3 bg-warning"> <div class="p-2 mr-auto bg-primary">Item 1</div> <div class="p-2 bg-info">Item 2</div> <div class="p-2 bg-danger">Item 3</div> </div> </div> </body> </html>
The output shifts items to the right:
Let us first see .ml-auto that place items to the left:
<!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/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Flex Items</h2> <div class="d-flex mb-3 bg-warning"> <div class="p-2 bg-primary">Item 1</div> <div class="p-2 bg-info">Item 2</div> <div class="p-2 ml-auto bg-danger">Item 3</div> </div> </div> </body> </html>
The output shifts items to the left:
Breadcrumbs display hierarchy-based information and the current page location. On a website, breadcrumbs display categories, and tags and help users in navigation and letting them know where they have reached.
Bootstrap has the concept of Breadcrumbs with a class .breadcrumb. The separator for Breadcrumb is added by bootstrap.min.css:
.breadcrumb > li + li:before {
color: #CCCCCC;
content: "/ ";
padding: 0 5px;
}Let us now see an example in Bootstrap to add Breadcrumbs:
<!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/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Tutorials</a></li> <li class="breadcrumb-item active" aria-current="page">Java</li> </ol> </nav> </body> </html>
The above code displays the following breadcrumb navigation:
In Bootstrap forms, you can add a block level help text using help-block class.
Let us see an example:
<!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.3.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>Example of Help text</h2> <form> <div class="form-group"> <label for="pwd">Team Name:</label> <input type="text" class="form-control" id="pwd" placeholder="Enter team name"> <span class="help-block">This is some help text that breaks onto a new line and may extend more than one line.</span> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </body> </html>
The output:
Add emphasis to a paragraph with Bootstrap lead class. It is Typography class in Bootstrap. Let us see an example to understand the difference between lead body copy and a regular demo paragraph:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Lead Body Copy</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.3.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>Lead Body Copy</h2> <p class = "lead">This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. This is demo paragraph. </p> <p>This is a demo paragraph.</p> </div> </body> </html>
The output displays how to use the lead class in Bootstrap to stand out paragraph:
For selecting a single option from a set of multiple options, we use select. However, with select as multiple (select multiple), we can select more than one option.
The following is an example displaying “multiple” select in Bootstrap:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Multiple Select</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <form role = "form"> <div class = "form-group"> <h1>Sports</h1> <label for = "name">Select your favorite sports:</label> <select multiple class = "form-control"> <option>Cricket</option> <option>Hockey</option> <option>Football</option> <option>Squash</option> <option>Volleyball</option> <option>Tennis</option> <option>Golf</option> </select> </div> </form> </body> </html>
The below output is visible with select options:
Now, press “CTRL” key and select multiple options. On selection the options, it gets highlighted as shown below:
To align the menus on your website, you can use the .dropdown-menu-right class. It aligns the dropdown menus on the right.
The following is an example that aligns the menu to the right on clicking:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Menus Alignment</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.3.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>Football Teams</h2> <p>The following is the information about the teams:</p> <div class = "dropdown"> <button class = "btn btn-primary dropdown-toggle" type = "button" data-toggle="dropdown">Teams <span class = "caret"></span></button> <ul class = "dropdown-menu dropdown-menu-right"> <li><a href = "#">Real Madrid</a></li> <li><a href = "#">CSKA Moscow</a></li> <li><a href = "#">Manchester United</a></li> <li><a href = "#">Barcelona</a></li> </ul> </div> </div> </body> </html>
The output:
Above, we have created and set the menus on the right as shown below:
<ul class = "dropdown-menu dropdown-menu-right"> <li><a href = "#">Real Madrid</a></li> <li><a href = "#">CSKA Moscow</a></li> <li><a href = "#">Manchester United</a></li> <li><a href = "#">Barcelona</a></li> </ul>
Fixed Navigation Bar in Bootstrap allow you to fix the navbar at the top. Use the .navbar-fixed-top class to achieve the same:
<nav class="navbar navbar-default navbar-fixed-top">
To check with a scrollbar, we have styled the body height as 1200px:
<body style="height:1200px">
Now, when you will scroll the page, the navigation bar would remain fixed on the top. You may have seen the same on a lot of websites these days.
The following example fix the navbar to the top:
<!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.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body style="height:1200px"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">New Website</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">AboutUs</a></li> <li><a href="#">Company</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> </body> </html>
The output displays the navigation bar fixed at top. Notice the scrollbar on the right. The changes in the scrollbar won’t affect the position of the navigation bar at the top:
Bootstrap is a free and open-source CSS framework to enable responsive, mobile-first front-end web development. It contains CSS and optionally JavaScript-based design templates for typography, forms, buttons, navigation and other interface components.
It is a web framework that focuses on simplifying the development of informative web pages, something that does not happen in web apps. It is added to a web project so that Bootstrap's choices of color, size, font and layout can be applied to that project. It is easy to use, possesses responsive features, takes the mobile-first approach and offers browser compatibility.
Since the last few years, there has been a rise in hiring professionals skilled in Bootstrap. The most sought-after jobs related to Bootstrap are in the roles of Frontend Developers, UI Developers, Web Developers, Graphics Developers and Software Developers, with the major hiring companies being Dell, Wells Fargo, Accenture, Hewlett Packard, and NetApp. Payscale.com states that in the USA, the average annual salary of a Front Developer is $35,339 annually, while a Web Developer’s average annual earning is $55,869. For a Software Engineer, $74,000, $68,870 for a Software Developer and $44,004 for a Web Designer.
All you need to do to get hired by these companies is to get proper planning during the Bootstrap interview.
But how would one possibly get that sort of training, especially dealing with the most tricky and toughest questions on Bootstrap, let alone answering them in a confident manner? We understand that no matter how good you are in Bootstrap, an interview session scenario may make you nervous and dent your confidence for the upcoming question. Enroll in our best full-stack developer course to enhance your skills and knowledge in relevant fields.
This is where we come to your rescue. Our experienced trainers have systematically and sequentially framed these Bootstrap interview questions and answers to boost your confidence and help you remember the key attributes required to answer the interview questions without any sort of anxiety, nervousness or hesitation. These issues bother the freshers and the experienced alike. So you are not the only one who is facing such issues.
Our interview questions and answers get you all geared up for every possible question you may be asked at any of these interviews. Not only that, these common Bootstrap interview questions and answers will also be helpful for experienced software developers who need a better career prospect related to Bootstrap.
So what are you waiting for? Prepare beforehand for your interviews related to Bootstrap with the help of the bootstrap interview questions presented by our experts. Go for your next interview brimming with confidence and clarity. Go and get your dream job, a job that makes you happy and contented. KnowledgeHut offers top-rated web design courses at competitive fees, with expert instructors and hands-on learning for aspiring web designers that will make you more interview ready.
Get a 1:1 Mentorship call with our Career Advisor
Book free session
Next slide in the carousel: 
Now, clicking on the menu will generate the menu upwards i.e. dropup: 
We can also create a Bootstrap Well with the default size:
