In this Bootstrap tutorial, we will learn some basic of Bootstrap4 (latest version). We will be going to know about What is bootstrap and why bootstrap 4 came in the picture. We will read how to use Bootstrap4? We will also know about some of the predefined class with example bootstrap 4 provide.
This is a step by step tutorial to learn bootstrap from the basics.
What is Bootstrap?
Bootstrap is a free opensource frontend HTML, CSS, JS framework for developing websites and web application.
Using the Bootstrap we can easily create responsive web site with less time.
The Bootstrap includes HTML and CSS design templates for creating forms, navigation, dropdown, alerts, tab, tooltip, tables, etc. The latest version of Bootstrap is Bootstrap4.
The Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework so it is called Twitter Blue Print.
Bootstrap Latest Version
The Latest Version of Bootstrap is BootStrap 4. The Bootstrap 4 was released in 2017 with some more advantage over Bootstrap3.
The difference between Bootstrap 3 and Bootstrap4.
The bootstrap 3 came in 2013 have some limitation so the Bootstrap 4 came in picture.
The Advantage of Bootstrap4 over Bootstrap3:
The Bootstrap 3 allowed 4 tier grid system where the Bootstrap4 allowing 5 tier grid system.
In the Bootstrap 3 the front size in px and in the Bootstrap 4 the front size in rem.
The Bootstrap3 Css source file is LESS when the Bootstrap4 source file is SASS.
Dark or inverse tables not supported in Bootstrap 3 but in the Bootstrap4 it is supported by using .table-dark class.
In the Bootstrap3 global font size is 14px whereas the Bootstrap 4 global font size is 16px.
How to use Bootstrap 4?
Using two way we can use the Bootstrap4 for devloping web site.
- We can include the Bootstrap from CDN
- We can download the bootstrap from getbootstrap.com.
In this tutorial we will going to discuss using CDN how we can work with Bootstrap.
The below CDN we need to use in our HTML file. Always remember we can only use the Bootstrap inside the <HTML> tag. In our HTML File, we require below CDN(Content Delivery Network).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>I am using here the NotePad++ for writing our bootstrap code.
Below one is a very simple Bootstrap code for displaying heading with some text. So we need to add some tag in the HTML page.
- Add the!DOCTYPE at the beginning of the page.
- Add lang and charset attribute at the beginning.
- “width=device-with and initial-scale=1” add inside the meta tag. After using the tag our web app will be responsive to any device.
- Add the above-mentioned CDN inside the script tag. Rest of the things are HTML stuff which we already have known.
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tsinfo Technologies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Welcome To Tsinfotechnologies</h1>
<p>TSInfo Technologies's SharePoint & Office 365 Consulting service will help organization to increase their business value by leveraging SharePoint</p>
</body>
</html>After adding the above code we need to save it with .html extension. Then run the App. The below screen will appear in the browser.
Bootstrap Container and Container Fluid Class
Bootstrap 4 provides two classes for the wrap and set the web site content margin. These are Container Class and Container Fluid class. The container class contains row element and the row element contains the columns.
Container Class: The Bootstrap Container Class provides a responsive fixed width container. Fixed width container means its maximum width changes at each breakpoint. We will learn about breakpoint in “Bootstrap GridSystem”, which I have explained below.
Container Fluid Class: The Container Fluid class provide a full-width container. That means every time it is 100% wide.
Below I have taken one example of Container Class and Container Fluid Class. If you have focused on the output you can point out the difference between Bootstrap Container class and container fluid class.
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tsinfo Technologies</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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Welcome To Tsinfotechnologies(container class)</h1>
<p>TSInfo Technologies's SharePoint & Office 365 Consulting service will help organization to increase their business value by leveraging SharePoint</p></div>
<div class="container-fluid">
<h1>Welcome To Tsinfotechnologies(container fluid)</h1>
<p>TSInfo Technologies's SharePoint & Office 365 Consulting service will help organization to increase their business value by leveraging SharePoint</p>
</div>
</body>
</html>
Bootstrap 4 grid system
We are using the Bootstrap 4 grid system for designing web page layout through a series of row and column. Total 12 columns a grid system row contains. That means in the grid system in a single row we can only set 12 columns. If we are adding more than 12 columns then it will come to a new line.
We should remember some point about the grid system we should add the row class inside a container class for the proper alignment and padding. According to our requirment, we need to choose the container class either a fixed width container class or a full-width container class(container fluid) class.
Use the row class for creating the columns. columns should be inside the row class. Inside the content, we should add the content.
Bootstrap provides below 5 class. Based on our system size we can choose the class. Sometimes we need to create the app for the mobile device so see according to our device screen width we need to choose the class.
- .col- When we are using the .col class the device screen width less than 576px. If our device size is very small we just need to write col. Automatically it will be taken as a very small device.
- .col-sm– The screen width is equal or greater than 576px.
- .col-md-The screen width equal to or greater than 768px.
- .col-lg-The Screen width is equal to or greater than 992px.
- .col-xl- The Screen width equal to or greater than 1200px.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></head>
<body>
<div class="container">
<h2>Bootstrap Column Layout</h2>
<p>The Bootstrap row contains maximum 12 column in it.</p>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-xl-1"style="background-color:orange;">1</div>
<div class = "col-xl-1"style="background-color:red;">2</div>
<div class = "col-xl-1"style="background-color:blue;">3</div>
<div class = "col-xl-1"style="background-color:red;">4</div>
<div class = "col-xl-1"style="background-color:gray;">5</div>
<div class = "col-xl-1"style="background-color:yellow;">6</div>
<div class = "col-xl-1"style="background-color:green;">7</div>
<div class = "col-xl-1"style="background-color:orange;">8</div>
<div class = "col-xl-1"style="background-color:red;">9</div>
<div class = "col-xl-1"style="background-color:blue;">10</div>
<div class = "col-xl-1"style="background-color:yellow;">11</div>
<div class = "col-xl-1"style="background-color:gray;">12</div>
</div>
</body>
</html>we know that the col-xl size we can use when our device width is 1200px or more than 1200px. Below output, we can see the width is 1440 so the output is coming properly.
When we are trying to open in a 360 width device the output is not coming properly. All the columns are displays as a row.
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/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></head>
<body>
<div class="container">
<h2>Bootstrap Column Layout</h2>
<p>The Bootstrap row contains maximum 12 column in it.</p>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-1"style="background-color:orange;">1</div>
<div class = "col-sm-1"style="background-color:red;">2</div>
<div class = "col-sm-1"style="background-color:blue;">3</div>
<div class = "col-sm-1"style="background-color:red;">4</div>
<div class = "col-sm-1"style="background-color:gray;">5</div>
<div class = "col-sm-1"style="background-color:yellow;">6</div>
<div class = "col-sm-1"style="background-color:green;">7</div>
<div class = "col-sm-1"style="background-color:orange;">8</div>
<div class = "col-sm-1"style="background-color:red;">9</div>
<div class = "col-sm-1"style="background-color:blue;">10</div>
<div class = "col-sm-1"style="background-color:yellow;">11</div>
<div class = "col-sm-1"style="background-color:gray;">12</div>
</div>
</body>
</html>
Column wrapping in bootstrap
When we are adding more than one column in a single row then it will come to second row.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></head>
<body>
<div class="container">
<h2>Bootstrap Column Layout</h2>
<p>The Bootstrap row contains maximum 12 column in it. But when we have added one more column in a single row what will happen..</p>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-1"style="background-color:orange;">1</div>
<div class = "col-sm-1"style="background-color:red;">2</div>
<div class = "col-sm-1"style="background-color:blue;">3</div>
<div class = "col-sm-1"style="background-color:red;">4</div>
<div class = "col-sm-1"style="background-color:gray;">5</div>
<div class = "col-sm-1"style="background-color:yellow;">6</div>
<div class = "col-sm-1"style="background-color:green;">7</div>
<div class = "col-sm-1"style="background-color:orange;">8</div>
<div class = "col-sm-1"style="background-color:red;">9</div>
<div class = "col-sm-1"style="background-color:blue;">10</div>
<div class = "col-sm-1"style="background-color:yellow;">11</div>
<div class = "col-sm-1"style="background-color:gray;">12</div>
<div class = "col-sm-1"style="background-color:gray;">13</div>
</div>
</body>
</html>
Bootstrap 4 unequal Responsive column:
Below example I have taken unequal responsive column.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Bootstrap 4 unequal Resposive column</h1>
<p>We can see now 2 column which is</p>
<div class="row">
<div class="col-sm-1" style="background-color:orange;">.col-sm-1</div>
<div class="col-sm-2" style="background-color:red;">.col-sm-2</div>
<div class="col-sm-3" style="background-color:Yellow;">.col-sm-3</div>
</div>
</div>
</body>
</html>
Bootstrap 4 equal resposive Column:
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Equal Responsive Column</h1>
<p>Below example is the responsive equal column</p>
<div class="row">
<div class="col-sm-3" style="background-color:red;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:orange;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:pink;">.col-sm-3</div>
</div>
</div>
</body>
</html>
Bootstrap 4 Three Equal Columns Layout:
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Create 3 Equal Column using Bootstrap 4</h1>
<p>Below example is Bootstrap three equal column</p>
<div class="row">
<div class="col" style="background-color:red;">.col</div>
<div class="col" style="background-color:Pink;">.col</div>
<div class="col" style="background-color:gray;">.col</div>
</div>
</div>
</body>
</html>
BootStrap Two Column Layout:
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></head>
<body>
<div class="container-fluid">
<h2>Bootstrap Column layout</h2>
<p>Below is the example of Two column</p>
<div class="row">
<div class="col-sm-3" style="background-color:red;">.col-sm-3</div>
<div class="col-sm-2" style="background-color:orange;">.col-sm-2</div>
</div>
<p></p>
<div class="row">
<div class="col-sm-4" style="background-color:blue;">.col-sm-3</div>
<div class="col-sm-2" style="background-color:green;">.col-sm-2</div>
</div>
</body>
</html> 
BootStrap Three Column Layout:
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></head>
<body>
<div class="container">
<h2>Bootstrap Three Column layout</h2>
<p>Below is the example of Three column layout</p>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-lg-4" style="background-color:red;">.col-lg-4</div>
<div class = "col-lg-3" style="background-color:green;">.col-lg-3</div>
<div class = "col-lg-2" style="background-color: #c73096;">.col-lg-2</div>
</div>
<p>
<div class = "row">
<div class = "col-lg-2" style="background-color:gray;">.col-sm-2</div>
<div class = "col-lg-3" style="background-color:#ffbf00;">.col-sm-3</div>
<div class = "col-lg-4" style="background-color:Pink;">.col-sm-4</div>
</div>
</div>
</body>
</html>
Bootstrap Grid System example based on breakpoint:
Suppose we have one business requirement that, we want to represent a 12 image in XL(screen width is equal to or more than equal to 1200), per row 6 image we want to display.
And in the large device(equal to or greater than equal to 992) we want to show each row 4 element now we will see how we will do using the bootstrap grid system breakpoint.
For XL device
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class = "grid_system">
<div class = "row">
<div class="col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\delllap.jpeg" class="img-thumbnail"></div>
<div class="col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\ac.jpeg" class="img-thumbnail"></div>
<div class="col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\hpmouse.jpeg" class="img-thumbnail"></div>
<div class="col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\intex.jpeg" class="img-thumbnail"></div>
<div class="col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\smartwatch.jpeg" class="img-thumbnail"></div>
<div class="col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\powerbank.jpeg" class="img-thumbnail"></div>
<div class="col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\router.jpeg" class="img-thumbnail"></div>
<div class="col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\keyboard.jpeg" class="img-thumbnail"></div>
<div class="col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\new laptop.jpeg" class="img-thumbnail"></div>
<div class="col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\dell360laptop.jpeg" class="img-thumbnail"></div>
<div class="col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\logitech.jpeg" class="img-thumbnail"></div>
<div class="col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\soundbox.jpeg" class="img-thumbnail"></div>
</div>
</div>
</div>
</body>
</html>
for large device
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class = "grid_system">
<div class = "row">
<div class="col-lg-3"><img src="C:\Users\Administrator\Desktop\NewFolder\delllap.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3"><img src="C:\Users\Administrator\Desktop\NewFolder\ac.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3"><img src="C:\Users\Administrator\Desktop\NewFolder\hpmouse.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3"><img src="C:\Users\Administrator\Desktop\NewFolder\intex.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3"><img src="C:\Users\Administrator\Desktop\NewFolder\smartwatch.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3"><img src="C:\Users\Administrator\Desktop\NewFolder\powerbank.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3"><img src="C:\Users\Administrator\Desktop\NewFolder\router.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3"><img src="C:\Users\Administrator\Desktop\NewFolder\keyboard.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3"><img src="C:\Users\Administrator\Desktop\NewFolder\new laptop.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3"><img src="C:\Users\Administrator\Desktop\NewFolder\dell360laptop.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3"><img src="C:\Users\Administrator\Desktop\NewFolder\logitech.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3"><img src="C:\Users\Administrator\Desktop\NewFolder\soundbox.jpeg" class="img-thumbnail"></div>
</div>
</div>
</div>
</body>
</html>
But according to our requirement when user will open the images in XL device each row 6 element should show. When opened in large devices each row 4 element should show. So we need to write below code we just combined the two-class like “col-lg-3 col-xl-2”.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class = "grid_system">
<div class = "row">
<div class="col-lg-3 col-xl-2" ><img src="C:\Users\Administrator\Desktop\NewFolder\delllap.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3 col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\ac.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3 col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\hpmouse.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3 col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\intex.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3 col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\smartwatch.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3 col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\powerbank.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3 col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\router.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3 col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\keyboard.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3 col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\new laptop.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3 col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\dell360laptop.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3 col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\logitech.jpeg" class="img-thumbnail"></div>
<div class="col-lg-3 col-xl-2"><img src="C:\Users\Administrator\Desktop\NewFolder\soundbox.jpeg" class="img-thumbnail"></div>
</div>
</div>
</div>
</body>
</html>
How to add the break Point in column
Before adding the breakpoint in the column the output will look like below.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class = "grid_system">
<div class = "row">
<div class = "col-xl-3"style="background-color:orange;">column1</div>
<div class = "col-xl-4"style="background-color:red;">column2</div>
<div class = "col-xl-2"style="background-color:blue;">column3</div>
<div class = "col-xl-1"style="background-color:red;">column4</div>
<div class = "col-sm-1"style="background-color:gray;">column5</div>
<div class = "col-sm-1"style="background-color:yellow;">column6</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap provides a “w-100” to break between the column. in the below code I have created a div inside the div I have added the class like “<div class=”w-100″></div>”.
<!DOCTYPE html><div class="w-100"></div>
<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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class = "grid_system">
<div class = "row">
<div class = "col-xl-3"style="background-color:orange;">column1</div>
<div class = "col-xl-4"style="background-color:red;">column2</div>
<div class="w-100"></div>
<div class = "col-xl-2"style="background-color:blue;">column3</div>
<div class = "col-xl-1"style="background-color:red;">column4</div>
<div class="w-100"></div>
<div class = "col-sm-1"style="background-color:gray;">column5</div>
<div class="w-100"></div>
<div class = "col-sm-1"style="background-color:yellow;">column6</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap4 Column Ordering
For the bootstrap ordering, it provides an “order-” class. After the “-” we need to write the number in which position you want to set the column order. It provides some of the responsive class like order-first, order last.
In the below example see in the column 4 I have added order-first.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class = "grid_system">
<div class = "row">
<div class = "col-xl-3 "style="background-color:orange;">column1</div>
<div class = "col-xl-4"style="background-color:red;">column2</div>
<div class = "col-xl-2"style="background-color:blue;">column3</div>
<div class = "col-xl-2 order-first" style="background-color:red;">column4</div>
<div class = "col-sm-1"style="background-color:gray;">column5</div>
</div>
</div>
</div>
</body>
</html>
Example-2:
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class = "grid_system">
<div class = "row">
<div class = "col-xl-3 order-4"style="background-color:orange;">column1</div>
<div class = "col-xl-4 order-2"style="background-color:red;">column2</div>
<div class = "col-xl-2 order-1"style="background-color:blue;">column3</div>
<div class = "col-xl-2 order-5" style="background-color:red;">column4</div>
<div class = "col-sm-1 order-3"style="background-color:gray;">column5</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap Alert
We can create a different alert message using Bootstrap predefined classes. We need to add the contextual class such as .alert-success, .alert-info, .alert-warning, .alert-primary, .alert-secondry, .alert-ligh or .alert-dark with base class .alert.
Below example, I am showing all the predefined class bootstrap provides with 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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Different Alert</h2>
<p>Bootstrap provides variety of the alert message using some of the predefined class</p>
<div class="alert alert-success" role="alert">The Success alert message</div>
<div class="alert alert-info" role="alert">The Information alert message</div>
<div class="alert alert-warning" role="alert">The Warning alert message</div>
<div class="alert alert-danger" role="alert">The Danger alert message</div>
<div class="alert alert-light" role="alert">The Lighter alert message</div>
<div class="alert alert-dark" role="alert">The Dark alert message</div>
</div>
</body>
</html>
Add the link inside an alert class using alert-link class in Bootstrap4
Bootstrap Provides the alert link class to add the links inside the alert box.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Alert-Link inside aleart</h2>
<p>In the bootstrap we can add the alert link inside the alert predefined class</p>
<div class="alert alert-success" role="alert">The<a href="#" class="alert-link">Success alert message</a></div>
<div class="alert alert-info" role="alert">The <a href="#" class="alert-link"> Information alert message</a></div>
<div class="alert alert-warning" role="alert">The <a href="#" class="alert-link">Warning alert message</a></div>
<div class="alert alert-danger" role="alert">The<a href="#" class="alert-link"> Danger alert message</a></div>
<div class="alert alert-light" role="alert">The <a href="#" class="alert-link"> Lighter alert message</a></div>
<div class="alert alert-dark" role="alert">The <a href="#" class="alert-link"> Dark alert message</a></div>
</div>
</body>
</html>
How to dismiss or close the Bootstrap4 alert message
We will see now how to add the close or dismiss symbol in our alert then the user can easily close the alert. So to add the close functionality to Bootstrap 4 alert inside the alert container add .alert-dismissible class. And also add class=”close” and data-dismiss=”alert” inside a button tag.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap dismiss the alert message</h2>
<p>In the Bootstrap we can dismiss the alert message using the close symbol </p>
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
The Success alert message
</div>
<div class="alert alert-info alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
The Warning alert message
</div>
<div class="alert alert-warning alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
This alert message that might need attention
</div>
<div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
This alert message that indicate dangerous message
</div>
<div class="alert alert-primary alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
This alert message is indicate important message
</div>
<div class="alert alert-secondary alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
The alert message is Less important
</div>
<div class="alert alert-light alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
The Light grey alert message
</div>
<div class="alert alert-dark alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
The Dark grey alert messagse
</div>
</body>
</html>
Bootstrap4 Fading Effect in alert
Bootstrap provides .fade and .show classes to add some fading effect while close the alert message in Bootstrap4.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"><h2>Bootstrap fade and show class</h2><p> bootstrap provide the .fade and .show class to add some fadding effect when closing the alert message</p>
<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>The Success alert message</div>
<div class="alert alert-info alert-dismissible fade show"><button type="button" class="close" data-dismiss="alert">×</button>The Warning alert message</div>
<div class="alert alert-warning alert-dismissible fade show"><button type="button" class="close" data-dismiss="alert">×</button>
This alert message that might need attention</div>
<div class="alert alert-danger alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>
The dangerious message</div>
<div class="alert alert-primary alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>The important alert message</div>
<div class="alert alert-secondary alert-dismissible fade show"><button type="button" class="close" data-dismiss="alert">×</button>
The slightly important alert message
</div>
<div class="alert alert-dark alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>The dark grey alert message
</div>
<div class="alert alert-light alert-dismissible fade show">
<button type="button" class="close" data-dismiss="alert">×</button>The light gray alert message</div>
</div>
</body>
</html>
Bootstrap4 Button Style
Using Bootstrap 4 contextual classes, we can create different varaity of Button Control.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Different button style</h2>
<div> The basic button:<button type="button" class="btn">Button</button></div>
<div>btn-primary class is used:<button type="button" class="btn btn-primary">Primary</button></div>
<div>btn-secondry class is used:<button type="button" class="btn btn-secondary">Secondary</button></div>
<div>btn-success class is used:<button type="button" class="btn btn-success">Success</button></div>
<div>btn-info class is used:<button type="button" class="btn btn-info">Info</button></div>
<div>btn-warning is used:<button type="button" class="btn btn-warning">Warning</button></div>
<div>btn-danger is used:<button type="button" class="btn btn-danger">Danger</button></div>
<div>btn-dark is used:<button type="button" class="btn btn-dark">Dark</button></div>
<div>btn-light is used:<button type="button" class="btn btn-light">Light</button></div>
<div>btn-link is used:<button type="button" class="btn btn-link">Link</button></div>
</div>
</body>
</html>
Bootstrap4 Link Button
Basically, the predefined button class we need to add using the <button> tag like <button type=”button” class=”btn btn-warning”>Submit</button>. We can also use the predefined classes on <a> or <input> attribute. In the below example I have created a button using an attribute and another one I have created using <button> attribute.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Link Button</h2>
<div>link button:<a href="#" class="btn btn-info" role="button">Button</a></div>
<div>warning button:<button type="button" class="btn btn-warning">Submit</button>
</div>
</body>
</html>
Bootstrap Button Outline
Bootstrap4 provides 8 predefined class to outline the button. We need to write the class name with btn base class name.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 style="color:red;font-size:40px;">Bootstrap Button Outline </h2>
<p style="color:blue; ">Bootstrap Provide 8 button outline</p>
<div>Primary button outline:<button type="button" class="btn btn-outline-primary">Primary</button></div>
<div>Secondry button outline:<button type="button" class="btn btn-outline-secondary">Secondary</button></div>
<div>Sucess button outline: <button type="button" class="btn btn-outline-success">Success</button></div>
<div>Info button outline: <button type="button" class="btn btn-outline-info">Info</button></div>
<div>Warning button outline: <button type="button" class="btn btn-outline-warning">Warning</button></div>
<div>Danger button outline: <button type="button" class="btn btn-outline-danger">Danger</button></div>
<div>Dark button outline: <button type="button" class="btn btn-outline-dark">Dark</button></div>
<div>Light button outline: <button type="button" class="btn btn-outline-light text-dark">Light</button></div>
</div>
</body>
</html>
Bootstrap Button Size:
Bootstrap provides some of the built-in class for button size such as btn-lg, btn-md, btn-sm. When we will add the classes in HTML page then automatically the button size is going to be changed.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 style="color:red;">Bootstrap Button Size</h2>
<p>Bootstrap provides some of the classes for large small and medium size button control</p>
<div>The large size button:<button type="button" class="btn btn-success btn-lg">Large</button></div>
<div> The medium or default size button:<button type="button" class="btn btn-success btn-md">Medium</button> </div>
<div>The small size button:<button type="button" class="btn btn-success btn-sm">Small</button><div>
</div>
</body>
</html>
Bootstrap Button Block Level
Bootstrap provides the btn-block class to create a block level buttons which span the full width of the parent. In the below example I have created some of the block buttons of different size such as large, medium(default size) and small. When we did not mention the button size then by default the medium size button will be created.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 style="color:blue;font-size:50px;">Block Level Buttons</h2>
<div>Block Level Button in default size</div>
<div><button type="button" class="btn btn-danger btn-block">Submit</button></div>
<div>Block Level Buttons in Large Size</div>
<div><button type="button" class="btn btn-danger btn-lg btn-block">Submit</button></div>
<div>Block Level Buttons in Medium size</div>
<div><button type="button" class="btn btn-danger btn-md btn-block">Submit</button></div>
<div>Block Level Button in Small size</div>
<div><button type="button" class="btn btn-danger btn-sm btn-block">Submit</button></div>
</div>
</body>
</html>
Bootstrap Active and Disabled Button:
Bootstrap provides a .active class for appearing a button pressed. And provide a .disabled class to make a button unclickable.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Active state and disabled state</h2>
<p>.active and .disabled class is used to active or deactive the danger button<p>
<button type="button" class="btn btn-danger active">Active Danger</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-danger" disabled>Disabled Danger</button>
<a href="#" class="btn btn-danger disabled">Disabled Link</a>
<br>
<br>
<button type="button" class="btn btn-success active">Active Success</button>
<button type="button" class="btn btn-success">Default Success</button>
<button type="button" class="btn btn-success" disabled>Success Disabled</button>
</div>
</body>
</html>
Bootstrap4 Spiner Button
Using the Bootstrap4 we can create Spiner Button. We need to add the spinner class inside the <span> class.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Spiner Button</h2>
<p>Bootstrap provide spiner option in button</p>
<div>Add spiner in the danger button:<button class="btn btn-danger">
<span class="spinner-border spinner-border-sm"></span>
Pls wait, Loading..
</button></div>
<div>Pls wait, disabled danger is loading:<button class="btn btn-danger" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button><div>
<div>grow spiner in danger button<button class="btn btn-danger">
<span class="spinner-grow spinner-grow-sm"></span>
Pls, Wait loading
</button><div>
</div>
</body>
</html>
Bootstrap4 Progress Bar:
Basically, the Progress Bar is used for displaying the progress of any action. Using Bootstrap 4 we can create different variety of progress bar.
I have created a default progress bar in the below example. So First I write the progress class inside a div tag. Then added progress-bar class and define the width with style tag which is a child of progress 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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 style="color:red" >Basic Progress Bar</h2>
<div>We can create a Progress bar using .progress class, in the progress child class add progress-bar class. For the progress bar width we need to write inside the css style attribute</div>
<div class="progress">
<div class="progress-bar" style="width:20%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar" style="width:50%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
</div>
</body>
</html>
Bootstrap Progress Bar Height:
The default height of the Progress bar is 16px. To change the height inside style attribute add the height. Always remember that we need to add the height property in both progress class and progress bar 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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Progress Bar Height</h2>
<p>We can increase the height propety to progressbar using the height propety</p>
<div class="progress" style="height:10px">
<div class="progress-bar" style="width:40%;height:10px"></div>
</div>
<br>
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:50%;height:20px"></div>
</div>
<br>
<div class="progress" style="height:30px">
<div class="progress-bar" style="width:60%;height:30px"></div>
</div>
</div>
</body>
</html>
Bootstrap Progress Bar Labels:
We can add the label inside the progress bar. We need to write the text inside the div tag.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Progress Bar With Label</h2>
<div class="progress">
<div class="progress-bar" style="width:50%">50%</div>
</div>
</div>
</body>
</html>
Bootstrap Multiple Progress Bar
The Bootstrap provides the feature of placing multiple progress bar into the same 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/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 style=color:red>Bootstrap Multiple Progress Bars</h2>
<p>Bootstrap Using the Progress Class we can create different progress bar</p>
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
success
</div>
<div class="progress-bar bg-warning" style="width:10%">
warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
danger
</div>
</div>
</div>
</body></html>
Bootstrap Animated Progress Bar
In bootstrap 4 to animated a progress bar “progress-bar-animated” class is used.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 style=color:red>Bootstrap Animated Progress Bar</h2>
<p>Bootstrap progress-bar-animated class is used to create Animated Progress bar</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:70%"></div>
</div>
</div>
</body>
</html>
Bootstrap Different Color Progress Bar
We can create different color progress bar by using different contextual class. By default the progress bar color is blue.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Different Colored Bootstrap Progress Bars</h2>
<p>Bootstrap provide different classes for different progress bar</p>
<!-- Blue -->
<div>Default Progress Bar
<div class="progress">
<div class="progress-bar" style="width:10%"></div>
</div></div><br>
<div>Success Progress Bar
<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div>
</div><br>
<div>Information Progress Bar
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div></div><br>
<div>Warning Progress Bar
<div class="progress">
<div class="progress-bar bg-warning" style="width:40%"></div>
</div></div><br>
<div>Danger Progress Bar
<div class="progress">
<div class="progress-bar bg-danger" style="width:50%"></div>
</div></div><br>
<div>White Color Progress Bar
<div class="progress border">
<div class="progress-bar bg-white" style="width:60%"></div>
</div></div><br>
<div>Secondry Progress Bar
<div class="progress">
<div class="progress-bar bg-secondary" style="width:70%"></div>
</div></div><br>
<div>Light Color Progress Bar
<div class="progress border">
<div class="progress-bar bg-light" style="width:80%"></div>
</div></div><br>
<div>Dark Color Progress Bar
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div></div>
</div>
</body>
</html>
Bootstrap Multicolor Striped Progress Bar
Bootstrap 4 provide progress-bar-striped class to create different color striped progress bar. We need to add the progress-bar-striped class inside the progress-bar base class. For different color striped progress bar we can use contextual 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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 style=color:Orange>Bootstrap Multicolor Striped Progress Bar</h2>
<p> Using the Bootstrap we can create multiple color of stripped class using .progress-bar-striped class.</p>
<div>Default Striped Progress Bar<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:30%"></div>
</div></div>
<br>
<div>Success striped progress Bar
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped" style="width:60%"></div>
</div></div>
<br>
<div>Information stripped progress Bar
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div>
</div></div>
<br>
<div>Dark Color Stripped Progress Bar
<div class="progress">
<div class="progress-bar bg-dark progress-bar-striped" style="width:50%"></div>
</div></div>
<br>
<div>Danger Stripped Progress Bar
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped"style="width:70%"></div>
</div></div>
<br>
<div>Warning Stripped Progress Bar
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped" style="width:70%"></div>
</div></div><br>
<div>Secondry striped Progress Bar<div class="progress">
<div class="progress-bar bg-secondary" style="width:30%"></div>
</div>
</div>
</div>
</body>
</html>
Bootstrap Dropdown List
The Bootstrap 4 allows us to create a dropdown list so that the user can able to choose the item from a list.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 style=color:blue>Bootstrap Dropdown</h2>
<p>Bootstrap Basic Example</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Training</a>
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Contact Us</a>
<a class="dropdown-item" href="#">Portfolio</a>
</div>
</div>
</div>
</body>
</html>
Bootstrap Dropdown Driver:
Bootstrap Provides a dropdown driver class to make a horizontal line between the dropdown list item.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 style=color:Brown>Bootstrap Dropdown Driver</h2>
<p style=color:red><strong>The dropdown-divider class is used to add a horizontal line in dropdown list</strong></p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a style=color:Brown class="dropdown-item" href="#">About Us</a>
<div class="dropdown-divider"></div>
<a style=color:red class="dropdown-item" href="#">Contact Us</a>
<div class="dropdown-divider"></div>
<a style=color:purple class="dropdown-item" href="#">Service Provide</a>
<div class="dropdown-divider"></div>
<a style=color:yellow class="dropdown-item" href="#">Training</a>
</div>
</div>
</div>
</body>
</html>
Bootstrap Dropdown Header:
The .dropdown-header class is used to add the dropdown header inside the dropdown list.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Dropdowns Header</h2>
<p>The dropdown header is used to add the header inside the dropdown list</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<p style=color:Red class="dropdown-header"><b>Dropdown Header</b></p>
<a class="dropdown-item" href="#">About us</a>
<a class="dropdown-item" href="#">Training</a>
<p style=color:red class="dropdown-header"><b>Dropdown Header</b></p>
<a class="dropdown-item" href="#">Contact Us</a>
<a class="dropdown-item" href="#">Service Provide</a>
</div>
</div>
</div>
</body>
</html>
Bootstrap Active and Disabled the dropdown item
Bootstrap Active class is used to Active the item . The item is by default selected with blue color.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Bootstrap 4 active and disable item</h3>
<p>For active item we need to add .active class</p>
<p>The .disabled class disables a dropdown item with grey color</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item active" href="#">Active Item</a>
<a class="dropdown-item disabled" href="#">Disable Item</a>
</div>
</div>
</div>
</body>
</html>
Bootstrap Dropdown Position:
Bootstrap Dropdown Right:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Dropdowns Right</h2>
<p>The Items are coming in right when we are using dropright</p>
<div class="dropdown dropright">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
Dropright button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Contact Us</a>
<a class="dropdown-item" href="#">Service Provide</a>
</div>
</div>
</div>
</body>
</html>
Bootstrap Dropdown left:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Dropdowns Left</h2>
<p>The Items are coming in left when we are using dropleft</p>
<div class="dropdown dropleft">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
Dropright button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Contact Us</a>
<a class="dropdown-item" href="#">Service Provide</a>
</div>
</div>
</div>
</body>
</html>
Bootstrap Dropdown menu right and left
In the below example I have taken one example where the dropdown list element is coming in the right side and left the side of the dropdown button.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Dropdown</h2>
<p>To right allignment the dropdown list Bootstrap provide dropdown-menu-right. We need to write with dropdown-menu class</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button option are right alligned
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Contact Us</a>
<a class="dropdown-item" href="#">Service Provide</a>
</div>
</div>
<p></p>
<p></p>
<p></p>
<p>To left allignment the dropdown list Bootstrap provide dropdown-menu-left. We need to write with dropdown-menu class</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button option are left alligned
</button>
<div class="dropdown-menu dropdown-menu-left">
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Contact Us</a>
<a class="dropdown-item" href="#">Service Provide</a>
</div>
</div>
</div>
</body>
</html>
Bootstrap DropUp Button:
Boostrap Provides the dropup class so that the dropdown items are coming in upward of dropdown list.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<div class="container">
<h2>Bootstrap Dropup Button</h2>
<p>The option are coming in upward. We are using the dropup class</p>
<div class="dropup">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Contact Us</a>
</div>
</div>
</div>
</body>
</html>
Bootstrap Grouped Button With Dropdown
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdowm Nesting Button Group</h2>
<p>The btn-group class is used to create a group of dropdown</p>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
AboutUs
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">AboutService</a>
<a class="dropdown-item" href="#">AboutEmployee</a>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
Contact Us
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Employee</a>
<a class="dropdown-item" href="#">HR</a>
<a class="dropdown-item" href="#">Testing</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
TraingProvide
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">SharePoint</a>
<a class="dropdown-item" href="#">PowerApps</a>
<a class="dropdown-item" href="#">Mordern SharePoint</a>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap Dropdown Split Button
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Dropdown Split Buttons</h2>
<p>Using Bootstrap how we will create dropdown split Button</p>
<div class="btn-group">
<button type="button" class="btn btn-warning">Status</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Close</a>
<a class="dropdown-item" href="#">Not Opened</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info">Country</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">India</a>
<a class="dropdown-item" href="#">Pakistan</a>
<a class="dropdown-item" href="#">Srilanka</a>
<a class="dropdown-item" href="#">Africa</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning">State</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Karataka</a>
<a class="dropdown-item" href="#">Kerla</a>
<a class="dropdown-item" href="#">Tamilnadu</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger">Gender</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Male</a>
<a class="dropdown-item" href="#">Female</a>
<a class="dropdown-item" href="#">Other</a>
</div>
</div>
</div>
</body>
</html>
Bootstrap4 Vertical Button with dropdown
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Vertical Button Group with Dropdown</h2>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Color</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Country
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">India</a>
<a class="dropdown-item" href="#">Srilanka</a>
<a class="dropdown-item" href="#">Pakistan</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
State
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Karnataka</a>
<a class="dropdown-item" href="#">Kerla</a>
</div>
</div>
</div>
<h2>Bootstrap Horizontal Button Group with Dropdown</h2>
<div class="btn-group-horizontal">
<button type="button" class="btn btn-primary">Color</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Country
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">India</a>
<a class="dropdown-item" href="#">Srilanka</a>
<a class="dropdown-item" href="#">Pakistan</a>
Bootstrap 4 Panel
The Bootstrap 4 provides panel-default class to create a bootstrap panel. We need to add the panel-default class with panel base 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/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 style=color:red>Tsinfotechnologies</h2><p>The panel-default class is used with panel base class for creating a panel</p>
<div class="panel panel-default">
<div class="panel-body" style=color:purple><strong>TSInfo Technologies is a one the top SharePoint development company in India & start up focusing only on SharePoint, Office 365, Nintex & Microsoft Azure.<strong></div>
</div>
</div>
</body>
</html>
Bootstrap4 Panel heading
I have added the Panel heading in the Bootstrap4 Panel using panel-heading 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/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap4 Panel Heading</h2>
<div class="panel panel-default">
<div class="panel-heading" style=color:red>Tsinfotechnologies</div>
<div class="panel-body">TSInfo Technologies also awarded as "Top 10 Most Promising SharePoint Solution Providers 2018" by CIO Review magazine</div>
</div>
</div>
</body>
</html>
Bootstrap4 Panel Footer
In the below example I have added Panel Footer in the Bootstrap 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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2> Bootstrap Panel Footer</h2>
<div class="panel panel-default">
<div class="panel-heading">Heading</div>
<div class="panel-body" style=color:#c65353><i>TSInfo Technologies, one of the leading SharePoint Offshore SharePoint development company based out in Bangalore, India. </i></div>
<div class="panel-footer">Footer</div>
</div>
</div>
</body>
</html>
Bootstrap Panel Group:
In Bootstrap4 we can grouped together the panel using .panel-group 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/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2> Bootstrap Panel Group</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Heading</div>
<div class="panel-body" style=color:#c65353><i>TSInfo Technologies also awarded as "Top 10 Most Promising SharePoint Solution Providers 2018" by CIO Review magazine.</i></div>
<div class="panel-footer">Footer</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Heading</div>
<div class="panel-body" style=color:#00e600><i>TSInfo Technologies, one of the leading SharePoint Offshore SharePoint development company based out in Bangalore, India</i></div>
<div class="panel-footer">Footer</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Heading</div>
<div class="panel-body" style=color:#333399><i>We focus on SharePoint development, migration, support and training.</i></div>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap Panel Contextual Class
Bootstrap allows us to create a different color panel using the Contextual 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/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2> Bootstrap Panel With Contextual Class</h2>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Heading</div>
<div class="panel-body" style=color:#c65353><i>TSInfo Technologies also awarded as "Top 10 Most Promising SharePoint Solution Providers 2018" by CIO Review magazine.</i></div>
<div class="panel-footer">Footer</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Heading</div>
<div class="panel-body" style=color:#00e600><i>TSInfo Technologies, one of the leading SharePoint Offshore SharePoint development company based out in Bangalore, India</i></div>
<div class="panel-footer">Footer</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">Heading</div>
<div class="panel-body" style=color:#333399><i>We focus on SharePoint development, migration, support and training.</i></div>
<div class="panel-footer">Footer</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">Heading</div>
<div class="panel-body" style=color:#333399><i>We focus on SharePoint development, migration, support and training.</i></div>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap4 Badges
Bootstrap allows us to create badge so that we can able to know how many items are associated with a particular link.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 style=color:green>Bootstrap4 Badges</h2>
<a href="#">Inbox<span class="badge">300</span></a><br>
<a href="#">Unread Message<span class="badge">32</span></a><br>
<a href="#">Read Message <span class="badge">122</span></a>
</div>
</body>
</html>
Bootstrap Badges inside a button
The Bootstrap Badges can also be added inside the button. In the below example I have added the Badges inside different button.
<!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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Badges inside Buttons</h2>
<button type="button" class="btn btn-default">Default<span class="badge">3</span></button>
<button type="button" class="btn btn-primary">Primary <span class="badge">5</span></button>
<button type="button" class="btn btn-success">Success <span class="badge">9</span></button>
<button type="button" class="btn btn-Info">Info <span class="badge">2</span></button>
<button type="button" class="btn btn-danger">Danger <span class="badge">15</span></button>
<button type="button" class="btn btn-warning">Warning<span class="badge">8</span></button>
</div>
</body>
</html>
Bootstrap4 Label
Bootstrap Label control is used to show some text. “label-default” class can be used to create a default label with label base class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap labels</h2>
<h6> <span class="label label-default">Tsinfotechnologies</span></h6>
<h5><span class="label label-default">Tsinfotechnologies</span></h5>
<h4><span class="label label-default">Tsinfotechnologies</span></h4>
<h3><span class="label label-default">Tsinfotechnologies</span></h3>
<h2><span class="label label-default">Tsinfotechnologies</span></h2>
<h1><span class="label label-default">Tsinfotechnologies</span></h1>
</div>
</body>
</html>
Bootstrap Contextual Labels Class
In the below example I have created some of the contectual label 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/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Contextual label Classes</h2>
<div>Default Label:<span class="label label-default">Default</span></div>
<div>Primary Label:<span class="label label-primary">Primary</span></div>
<div>Success Label:<span class="label label-success">Success</span></div>
<div>Info Label:<span class="label label-info">Info</span></div>
<div>Warning Label:<span class="label label-warning">Warning</span><div>
<div>Danger Label:<span class="label label-danger">Danger</span>
</div>
</body>
</html>
Bootstrap4 Tooltip
Using Bootstrap we can create the Tooltip message. So when the user place the mouse cursor then one pop up message will come.
<!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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Bootstrap Tooltip Example</h3>
<a href="#" data-toggle="tooltip" id="link" title="Hello Padmini, welcome to Tsinfo">Place the move curson above the text to see the message</a>
</div>
<script>
$(document).ready(function(){
$(link).tooltip();
});
</script>
</body>
</html>
Bootstrap Tooltip Position
In the Bootstrap 4 the tooltip message always come top. But using the data placement attribute we can set to left, right, down and top.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Bootstrap Tooltip Position</h3>
<p>How to positioning the tooltip message</p>
<ul class="list-inline" id=tht>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hello in Top">Hover Mouse Here</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hello in Bottom">Hover Mouse Here</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hello in left">Hover Mouse Here</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hello in right">Hover Mouse Here</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Bootstrap4 Pagination
When we have muliple page. Then we can add the pagination in all the page so that you can easily navigate from one page to differently very easily.
<!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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Pagination</h2>
<p>Pagination Class is used for Bootstrap Pagination</p>
<ul class="pagination">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul>
</div>
</body>
</html>
Bootstrap 4 Active State in Pagination
Bootstrap Provides .active class to active the pagination.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Pagination-Active state</h2>
<div>Active class add inside the page-item class to active state pagination</div>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Page1</a></li>
<li class="page-item"><a class="page-link" href="#">Page2</a></li>
<li class="page-item active"><a class="page-link" href="#">Page3</a></li>
<li class="page-item"><a class="page-link" href="#">Page3</a></li>
<li class="page-item"><a class="page-link" href="#">Page4</a></li>
</ul>
</div>
</body>
</html>
Bootstrap Pagination Disabled State
To disabled the bootstrap pagination bootstrap disabled class is used.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Pagination-Disabled state</h2>
<div>disabled class add inside the page-item class to disabled and unclickable state pagination</div>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Page1</a></li>
<li class="page-item"><a class="page-link" href="#">Page2</a></li>
<li class="page-item disabled"><a class="page-link" href="#">Page3</a></li>
<li class="page-item"><a class="page-link" href="#">Page3</a></li>
<li class="page-item"><a class="page-link" href="#">Page4</a></li>
</ul>
</div>
</body>
</html>
Bootstrap Pagination Size
pagination-large and pagination-sm class are used with pagination class to resize the Bootstrap Pagination.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Pagination Sizing</h2>
<p>pagination-large class is used</p>
<p>Bootstrap Large Size paging</p>
<ul class="pagination pagination-large">
<li class="page-item"><a class="page-link" href="#">Page1</a></li>
<li class="page-item"><a class="page-link" href="#">Page2</a></li>
<li class="page-item"><a class="page-link" href="#">Page3</a></li>
<li class="page-item"><a class="page-link" href="#">Page4</a></li>
</ul>
<p>pagination-sm class is used</p>
<p>Bootstrap Small Size paging</p>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#">Page1</a></li>
<li class="page-item"><a class="page-link" href="#">Page2</a></li>
<li class="page-item"><a class="page-link" href="#">Page3</a></li>
<li class="page-item"><a class="page-link" href="#">Page4</a></li>
</ul>
</div>
</body>
</html>
Bootstrap4 Pagination Alignment
In the Below example I have allignment the Bootstrap 4 different pagination.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Pagination Allignment</h2>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Page1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Page2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Page3</a></li>
</ul>
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Page1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Page2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Page3</a></li>
</ul>
<ul class="pagination justify-content-end">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Page1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Page2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Page3</a></li>
</ul>
</div>
</body>
</html>
Bootstrap Pagination BreadCrumbs
BreadCrumbs Class is used for creting Bootstrap BreardCrumbs.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Pagination Breadcrumb</h2>
<p>Example of Bootstrap Pagination Breardcrumb</p>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Page1</a></li>
<li class="breadcrumb-item active">Page4</li>
<li class="breadcrumb-item"><a href="#">Page2</a></li>
<li class="breadcrumb-item"><a href="#">Page3</a></li>
</ul>
</div>
</body>
</html>
Bootstrap 4 Form Input
Bootstrap 4 provide 5 form input control such as
- Input
- text area
- checkbox
- radio
- select
Bootstrap4 Input Control
I have create 4 input control in the below 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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Form Control:Input</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="usr">FullName</label>
<input type="text" class="form-control" id="usr" name="username">
</div>
<div class="form-group">
<label for="usr">Age</label>
<input type="number" class="form-control" id="usr" name="username">
</div>
<div class="form-group">
<label for="pwd">Email Id</label>
<input type="email" class="form-control" id="pwd" name="password">
</div>
<div class="form-group">
<label for="pwd">Enter Url</label>
<input type="url" class="form-control" id="pwd" name="password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Bootstrap 4 text area control
Using Bootstrap I have created a multiline text box.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Form control: textarea</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="review">Why You Like The Product:</label>
<textarea class="form-control" rows="10" id="review" name="text"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Bootstrap 4 Form:Checkbox control
The checkbox design in the Bootstrap can be possible so that we can allow the user to choose more than one option.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Form control: checkbox</h2>
<form action="/action_page.php">
<div class="form-check">
<label class="form-check-label" for="check1">
<input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked>Graduate
</label>
</div>
<div class="form-check">
<label class="form-check-label" for="check2">
<input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">Post Graduate
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="matrix" name="Under Matrix" value="something">Under Matrix
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>I have created 3 dropdown control such as Graduate, Post Graduate and Under Matrix.
Bootstrap4 Form inline checkbox control
Bootstrap 4 provides a form-check-inline class. So all the check box will be visible in a single line.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap 4 Form control:inline checkbox</h2>
<form action="/action_page.php">
<div class="form-check-inline">
<div class="form-check">
<label class="form-check-label" for="Graduate">
<input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked>Graduate
</label>
</div></div>
<div class="form-check-inline">
<div class="form-check">
<label class="form-check-label" for="PostGraduate">
<input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">Post Graduate
</label>
</div></div>
<div class="form-check-inline">
<div class="form-check">
<label class="form-check-label" for="Undermatrix">
<input type="checkbox" class="form-check-input" id="matrix" name="Under Matrix" value="something">Under Matrix
</label>
</div></div>
</form>
</div>
</body>
</html>
Bootstrap 4 Form Radio Control
Using Bootstrap 4 we can create Radio control. We can allows user to enable single item.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap 4 Form control: radio buttons</h2>
<form action="/action_page.php">
<div class="form-check">
<div>Gender:</div>
<label class="form-check-label" for="radio1">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Male
</label>
</div>
<div class="form-check">
<label class="form-check-label" for="radio2">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Female
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input"id="other" name="Other" value="Other">Other
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Bootstrap4 radio inline control
“form-check-inline class” can be used to set all the radio button on a single line.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap4 Form control: inline radio buttons</h2>
<form action="/action_page.php">
<p>Gender:</p>
<div class="form-check-inline">
<label class="form-check-label" for="radio1">
<input type="radio" class="form-check-input" id="genderMale" name="radioGender" checked>Male
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2">
<input type="radio" class="form-check-input" id="genderFemale" name="radioGender" >Female
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label">
<input type="radio" class="form-check-input" id="genderOther" name="radioGender">Other
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Bootstrap Select List Control
Bootstrap Select List control allows us to select an item from dropdown control or we can also choose multiple items from the dropdown list. To choose multiple items we just need to hold on an item and drag it to down.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2> Bootstrap Form control: select</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="sel1">Select Country Name From Dropdown</label>
<select class="form-control" id="conName" name="CountryName">
<option>India</option>
<option>Pakistan</option>
<option>Srilanka</option>
<option>Bangladesh</option>
</select>
<br>
<label for="sel2">hold on control and drag the option</label>
<select multiple class="form-control" id="conName" name="CountryName">
<option>India</option>
<option>Pakistan</option>
<option>Srilanka</option>
<option>Bangladesh</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Bootstrap Form Sizing
Bootstrap4 give us two classes for form sizing purpose that are form-control-lg and form-control-sm. We need to add inside the input tag.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Form Sizing</h2>
<form action="/action_page.php">
<div>Small Size Text Box</div>
<div class="form-group">
<input type="text" class="form-control form-control-sm" placeholder="Small text box" name="smalltext">
</div>
<div>Default Size Text Box</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Default text box" name="defaultText">
</div>
<div>Large Size Text Box</div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Large text box" name="largeText">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Bootstrap Input Control Plain text
The Bootstrap provides us .form-control-plaintext class to style the input field like plain text. When we will click on the plain text it looks like a text box.
Use the .form-control-plaintext if you want to style the input field as plain text:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 style=color:DarkRed>Bootstrap Form Control With Plain Text</h1>
<form action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control-plaintext" placeholder="Bootstrap Input control With Plain Text" name="PlainText">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Bootstrap4 Range Control
Bootstrap4 allows us to style a range control using “form-control-range” class. We need to add the class inside the input tag and need to add the type attribute to the range.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Bootstrap Range Control</h3>
<p>form-control-range class is used for bootstrap range control</p>
<form action="/action_page.php">
<p>Select the range</p>
<div class="form-group">
<input type="range" class="form-control-range" name="RangeIs">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Bootstrap4 File Control
Bootstrap4 allows us to style a file control using “form-control-file border” class. We need to add the class inside the input tag and need to add the type attribute to file.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Bootstrap File Control</h3>
<p>form-control-file border class is used to create Bootstrap File control</p>
<form action="/action_page.php">
<p>Click on Choose file to browse file from system</p>
<div class="form-group">
<input type="file" class="form-control-file border" name="FileName">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Bootstrap 4 Input Group
Bootstrap 4 Input group is a beautiful feature of bootstrap 4 where we can combine both form control and text control in a single line.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Bootstrap4 Input Groups</h3>
<form action="/action_page.php">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Enter Your Name</span>
</div>
<input type="text" class="form-control" placeholder="FullName" id="usr" name="username">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="EmailAddress" id="mail" name="email">
<div class="input-group-append">
<span class="input-group-text">Enter gmail(@demo.gmail.com)</span>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Enter Salery</span>
</div>
<input type="text" class="form-control" placeholder="Salery" id="usr" name="username">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
Bootstrap 4 Input Group Sizing
For sizing the Bootstrap4 Input Group we can use “input-group-lg” and “input-group-sm” class with “input-group” base 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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Bootstrap Input Groups Sizing</h3>
<form action="/action_page.php">
<p>Large Size</p>
<div class="input-group mb-3 input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">Enter Your Name</span>
</div>
<input type="text" class="form-control" placeholder="Name" id="usr" name="username">
</div>
<p>Small Size</p>
<div class="input-group mb-3 input-group-sm">
<input type="text" class="form-control" placeholder="Gmail Id" id="mail" name="email">
<div class="input-group-append">
<span class="input-group-text">Enter gmail(@demo.gmail.com)</span>
</div>
</div>
<p>Default Size</p>
<div class="input-group mb-3 ">
<div class="input-group-prepend">
<span class="input-group-text">Enter Salery</span>
</div>
<input type="text" class="form-control" placeholder="Salery" id="usr" name="username">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Bootstrap 4 Multiple Input Group
Using Bootstrap we can add multiple input group in a single line.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Bootstrap4 Multiple Input Group</h3>
<form action="/action_page.php">
<div class="input-group mb-3 ">
<div class="input-group-prepend">
<span class="input-group-text">Enter Your Name</span>
</div>
<input type="text" class="form-control" placeholder="First Name" id="usr" name="username">
<input type="text" class="form-control" placeholder="Middle Name">
<input type="text" class="form-control" placeholder="Last Name">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Your Email" id="mail" name="email">
<div class="input-group-append">
<span class="input-group-text">Enter gmail</span>
<span class="input-group-text">Format Should Be (@demo.gmail.com)</span>
</div>
</div>
<div class="input-group mb-3 ">
<div class="input-group-prepend">
<span class="input-group-text">Enter Sallery</span>
</div>
<input type="text" class="form-control" placeholder="Salery" id="usr" name="username">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Bootstrap 4 Input Group Labels
In the Bootstrap4 we can add the label control outside of the input group. When the user clicks on the label then it will bring us to the text box. But always remember label control for attribute should be same to input tag id attribute.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Input Group Labels</h2>
<form>
<label for="FullName">Enter Full Name</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="FullName" id="FullName" name="email">
<div class="input-group-append">
<span class="input-group-text">Enter Full Name</span>
</div>
</div>
</form>
<form>
<label for="Email">Enter Gamil Id</label>
<div class="input-group mb-3">
<input type="email" class="form-control" placeholder="Email Id" id="Email" name="email">
<div class="input-group-append">
<span class="input-group-text">@demo.gmail.com</span>
</div>
</div>
</form>
<form>
<label for="Age">Enter Age</label>
<div class="input-group mb-3">
<input type="number" class="form-control" placeholder="Age" id="Age" name="email">
<div class="input-group-append">
<span class="input-group-text">Enter Age</span>
</div>
</div>
</form>
</div>
</body>
</html>When we have clicked on the label directly the text box will come in blue color.
Bootstrap 4 Input Group With Dropdown
The bootstrap4 dropdown button can be added inside a input group.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Bootstrap4 Input Groups Dropdown Control</h3>
<form action="/action_page.php">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Choose Your Country" id="txtCountry" name="Country">
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
Choose Your Country
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">India</a>
<a class="dropdown-item" href="#">Pakistan</a>
<a class="dropdown-item" href="#">Austrellia</a>
<a class="dropdown-item" href="#">Singapore</a>
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Choose State" id="txtState" name="State">
<div class="input-group-append">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
Choose Your State
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Odisha</a>
<a class="dropdown-item" href="#">Karnataka</a>
<a class="dropdown-item" href="#">Tamilnadu</a>
<a class="dropdown-item" href="#">Andhrapradesh</a>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>I have added two dropdown control inside input group.
Bootstrap 4 Input Group Button
We can add the button control inside Bootstrap 4 Input Group. In below I have taken 3 input group with 3 button control. Using the different contextual class we can create a different type of button.
<!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.3.1/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Bootstrap4 Input Groups Button Control</h3>
<form action="/action_page.php">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Enter Your Name" id="txtName" name="Country">
<div class="input-group-append">
<button class="btn btn-danger" type="submit">Submit Name</button>
</div>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Enter Gmail" id="txtGmail" name="State">
<div class="input-group-append">
<button class="btn btn-outline-danger" type="submit">Submit Gmail</button>
</div>
</div>
<div class="input-group mb-3">
<input type="Number" class="form-control" placeholder="Enter Age(Number)" id="txtAge" name="Country">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Submit Age</button>
</div>
</div>
</form>
</div>
</body>
</html>In the below example I have added 3 button control of danger, danger outline button, and primary type.
Bootstrap 4 Input Group Radio and Checkbox
In the bootstrap, we can add the checkbox control and radio button control inside the input group. I have taken both radio button control and checkbox control inside the Bootstrap Input group.
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Bootstrap4 Input Groups Checkbox and Radio Control</h3>
<form action="/action_page.php">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="If you have aggred enable the check box" id="txtName" name="Country">
<div class="input-group-append">
<div class="input-group-text">
<input type="checkbox">
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Gender(Female)" id="txtGmail" name="State">
<div class="input-group-append">
<div class="input-group-text">
<input type="radio">
</div>
</div>
<input type="text" class="form-control" placeholder="Gender(Male)" id="txtGmail" name="State">
<div class="input-group-append">
<div class="input-group-text">
<input type="radio">
</div>
</div>
</div>
<div class="input-group mb-3">
<input type="Number" class="form-control" placeholder="Check box and radio button in same line" id="txtAge" name="Country">
<div class="input-group-append">
<div class="input-group-text">
<input type="radio">
</div>
<div class="input-group-text">
<input type="checkbox">
</div>
</div>
</div>
</form>
</div>
</body>
</html>In the first line, I have taken one checkbox control. The second line added two radio button control. And in the third line added both checkbox and radio button control.
You may like following bootstrap tutorials:
- Bootstrap table
- Bootstrap 4 Forms Designing and Carousel Example
- Bootstrap accordion example
- SharePoint Online branding: Creating Accordion Widget or Collapsible panel with Bootstrap
- Create Tabbed Menu using Bootstrap and HTML in SharePoint Online/2016/2013
- bootstrap’s javascript requires jquery error in SharePoint online
The above Bootstrap blog is helpful for beginners. I have discussed the very basic concept of bootstrap to designing web sites and web application with example.
I am Bijay a Microsoft MVP (8 times –Â My MVP Profile) in SharePoint and have more than 15 years of expertise in SharePoint Online Office 365, SharePoint subscription edition, and SharePoint 2019/2016/2013. Currently working in my own venture TSInfo Technologies a SharePoint development, consulting, and training company. I also run the popular SharePoint website EnjoySharePoint.com