Welcome To Bootstrap 4 Framework
Bootstrap 4 | Introduction
Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It
is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. It
solves many problems which we had once, one of which is the cross-browser compatibility issue. Nowadays, the
websites are perfect for all the browsers (IE, Firefox and Chrome) and for all sizes of screens (Desktop,
Tablets, Phablets, and Phones). All thanks to Bootstrap developers -Mark Otto and Jacob Thornton of Twitter,
though it was later declared to be an open-source project.
Why Bootstrap 4 ?
Faster and Easier Web-Development.
It creates Platform-independent web-pages.
It creates Responsive Web-pages.
It designed to be responsive to mobile devices too.
How to use Bootstrap 4 in webpage: There are two ways to include Bootstrap in the website.
USING CDN LINK
DONWLOAD FOR GETBOOSTRAP.COM SO THAT WE ALL CAN USE IT .
Below this article you can see the CDN link .
// Bootstrap CSS library
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
For Boostrap 4 link you can also visit the getbootstrap.com .
For Downloading the boostrap you have to read the manual of the installation of
boostrap 4 which is given in the getboostrap4.com
The documentation is written below .
<!doctype html>
<html lang="en">
<head>
<title>
Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<h1>
CODOLEARN</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
</html>Bootstrap 4 | Grid System
Bootstrap Grid System allows up to 12 columns across the page. You can use each of them individually or merge
them together for wider columns. All combinations of values summing up to 12 can be used.
Grid Classes
.col- It is used for extra small screen devices (screen width less than 576px)..col-sm- It is used for small screen devices (screen width greater than or equal to
576px)..col-md- It is used for medium screen size devices (screen width greater than or equal to
768px)..col-lg- It is used for large screen size devices (screen width greater than or equal to
992px)..col-xl- It is used for xlarge screen size devices (screen width equal to or greater than
1200px).
Components of Grid System:
.col- It is used for extra small screen devices (screen width less than 576px)..col-sm- It is used for small screen devices (screen width greater than or equal to
576px)..col-md- It is used for medium screen size devices (screen width greater than or equal to
768px)..col-lg- It is used for large screen size devices (screen width greater than or equal to
992px)..col-xl- It is used for xlarge screen size devices (screen width equal to or greater than
1200px).
Example 1: This example uses bootstrap to create equal width column grid on all devices and screen widths.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap Grid System</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.3.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>
<style>
.col { text-align:center; border:1px solid red; } </style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
CODOLEARN 1 </div>
<div class="col">
CODOLEARN 2 </div>
<div class="col">
CODOLEARN 3 </div>
</div>
</div>
</body>
</html>Example 2: This example uses bootstrap to create equal width responsive column grid. When screen size is less
than 576px the column automatically stack to each other.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap Grid System</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.3.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">
<br>
<div class="row">
<div class="col-sm-4" style="background-color:lightblue;">
column 1 </div>
<div class="col-sm-4" style="background-color:lightgreen;">
column 2 </div>
<div class="col-sm-4" style="background-color:crimson;">
column 3 </div>
</div>
</div>
</body>
</html>Bootstrap 4 Typography
Typography is a feature of Bootstrap for styling and formatting the text content. It is used to create
customized headings, inline subheadings, lists, paragraphs, aligning, adding more design-oriented font styles
and much more. Bootstrap support global settings for the font stack, Headings and Link styles to be used in
the web app for every type of OS and Device to deliver the best user interface.
Example of typography
Headings
Subheadings
Text and Paragraph font color, font type and alignment
Lists
Other inline elements
Tags and class to implement typography feature in bootstrap:
display headings: It is used to create better headings (larger font-size and lighter
font-weight). There are four classes exists in display headings which are .display-1, .display-2,
.display-3, and .display-4.lead: It is used to make a paragraph stand out i.e. visually better.mark: It is used to highlight the text content.initialism: It is used to render abbreviation in slightly small text size.blockquote: It is used to quote the text content.blockquote-footer: It is used to add the footer details for identifying the source of the
Quote.text-center: It is used to align the text to the center.list-inline: It is used to make the element of list inline.text-truncate: It is used to shorten the longer text by truncating with an ellipsis.text-muted: It is used for text color, text-muted fades the text i.e. text greyed out.
text-uppercase: It is used to transform text into uppercase.text-lowercase: It is used to transform text into lowercase.text-capitalize: It is used to transform text to capitalize first letter of each word
leaving other letters in lowercase..font-weight-bold: It sets the font weight to bold. It is used to display the importance
of text..font-weight-bolder: It sets the font weight to deep bold. It is used to display the
importance of text..font-italic: It sets the font style to italic..font-weight-light: It sets the font weight to light..font-weight-lighter: It sets the lighter font weight..font-weight-normal: It sets the normal font size and weight..lead: It makes the paragraph stand out..small: It is used to create secondary subheadings..text-left: It sets the left alignment of text..text-*-left: It sets the left alignment of text on all screens (small, medium, large or
xlarge)..text-break: It breaks the long string text into short text substrings.
Example 1: This example uses heading class to display the heading.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap Typography 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.3.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>
Heading Lists</h1>
<h1 class="display-1">
CODOLEARN</h1>
<h1 class="display-2">
CODOLEARN</h1>
<h1 class="display-3">
CODOLEARN</h1>
<h1 class="display-4">
CODOLEARN</h1>
</div>
</body>
</html>Try it
yourself
Example 2: This example uses <mark> tag to display the importance of text.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap Typography 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.3.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>
CODOLEARN</h1>
<p>
A <mark>
CODOLEARNe</mark>
CODOLEARN</p>
</div>
</body>
</html>Try it
yourself
Colors In Boostrap 4
.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
.text-secondary
.text-white
.text-dark
.text-body
.text-light
Example: This example uses text color class to set the color of text content.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap Background Color 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.3.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 Background Colors List</h2>
<ul>
<li class="p-5 bg-primary">
.bg-primary class</li>
<li class="p-5 bg-success">
.bg-success class</li>
<li class="p-5 bg-info">
.bg-info class</li>
<li class="p-5 bg-warning">
.bg-warning class</li>
<li class="p-5 bg-danger">
.bg-danger class</li>
<li class="p-5 bg-secondary">
.bg-secondary class</li>
<li class="p-5 bg-dark">
.bg-dark class</li>
<li class="p-5 bg-light">
.bg-light class</li>
</ul>
</div>
</body>
</html>
Try it
yourself
Background Colors: Bootstrap provides many classes to set the background color of an element. All classes of
background colors are listed below:
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap Background Color 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.3.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 Background Colors List</h2>
<ul>
<li class="p-5 bg-primary">
.bg-primary class</li>
<li class="p-5 bg-success">
.bg-success class</li>
<li class="p-5 bg-info">
.bg-info class</li>
<li class="p-5 bg-warning">
.bg-warning class</li>
<li class="p-5 bg-danger">
.bg-danger class</li>
<li class="p-5 bg-secondary">
.bg-secondary class</li>
<li class="p-5 bg-dark">
.bg-dark class</li>
<li class="p-5 bg-light">
.bg-light class</li>
</ul>
</div>
</body>
</html>Containers
Containers are used to pad the content inside of them, and there are two container classes available:
The .container class provides a responsive fixed width container
The .container-fluid class provides a full width container, spanning the entire width of the viewport
Fixed Container
Use the .container class to create a responsive, fixed-width container.
Note that its width (max-width) will change on different screen sizes:
Fluid Container
Use the .container-fluid class to create a full width container, that will always span the entire width of the
screen (width is always 100%):
Container Padding
By default, containers have 15px left and right padding, with no top or bottom padding. Therefore, we often
use spacing utilities, such as extra padding and margins to make them look even better. For example, .pt-3
means "add a top padding of 16px":
CONTAINER EXAMPLE
<div class="container bg-dark text-light">
<h1>
CODOLEARN</h1>
</div>CONTAINER-FLUID
<div class="container-fluid bg-dark text-light">
<h1>
CODOLEARN</h1>
</div>Bootstrap 4 Tables
Bootstrap provides a series of classes that can be used to apply various styling to the tables such as
changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable,
etc. Bootstrap also provides classes for making tables responsive.
<table class="table"> Table Making Content <table>
Simple Table: The .table class is used to create simple Bootstrap table. This class name is used with <table>
tag to create table.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap Tables</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.3.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="text-align:center;color:red;">
CODOLEARN </h1>
<!-- Bootstrap table class -->
<table class="table">
<thead>
<tr>
<th scope="col">
S. No.</td>
<th scope="col">
Name</td>
<th scope="col">
City</td>
<th scope="col">
Age</td>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">
1</td>
<td>
Ajay</td>
<td>
Patna</td>
<td>
20</td>
</tr>
<tr>
<th scope="row">
2</td>
<td>
Rahul</td>
<td>
Chandigarh</td>
<td>
17</td>
</tr>
<tr>
<th scope="row">
3</td>
<td>
Parush</td>
<td>
Kolkata</td>
<td>
22</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Try it
yourself
Black/Dark Table: The .table-dark class is used to add the black background color of a table. Use the
combination of table and table-dark classes within the <table> tag to create dark table.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap Tables</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.3.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="text-align:center;color:green;">
CODOLEARN </h1>
<!-- Bootstrap table and table-dark classes -->
<table class="table table-dark">
<thead>
<tr>
<th scope="col">
S. No.</td> <th scope="col">
Name</td> <th scope="col">
City</td> <th scope="col">
Age</td> </tr>
</thead>
<tbody>
<tr>
<th scope="row">
1</td> <td>
Ajay</td> <td>
Patna</td> <td>
20</td> </tr>
<tr>
<th scope="row">
2</td> <td>
Rahul</td> <td>
Chandigarh</td> <td>
17</td> </tr>
<tr>
<th scope="row">
3</td> <td>
Parush</td> <td>
Kolkata</td> <td>
22</td> </tr>
</tbody>
</table>
</div>
</body>
</html>
Try it
yourself
Images In Boostrap 4
Bootstrap offers different classes for images to make their appearance better and also to make them
responsive. Making an image responsive means it should scale according to its parent element. That is, the
size of the image should not overflow its parent element and will grow and shrink according to the change in
the size of its parent without losing its aspect ratio.
The different classes available in Bootstrap for images are as explained below:
Responsive Images: The .img-fluid class is used within
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap Images</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.3.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 style="text-align:center;">
<div class="container">
<h1 style="color:red;">
CODOLEARN </h1>
<h2>
Responsive Image</h2>
<img class="img-fluid" src= "img.png" alt="Responsive image" width="667" height="440" />
</div>
</body>
</html>Try it
yourself
ROUNDED CORNERS IN BOOSTRAP 4
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap Images</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.3.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 style="text-align:center;">
<div class="container">
<h1 style="color:green;">
CODOLEARN </h1>
<h2>
Rounded Corner Image</h2>
<img class="rounded" src= "img.png" alt="Responsive image" width="367" height="340" />
</div>
</body>
</html>Try it
yourself
Circle Image: The .rounded-circle class is used to create the circle shape image.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap Images</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.3.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 style="text-align:center;">
<div class="container">
<h1 style="color:red;">
CODOLEARN </h1>
<h2>
Circle Image</h2>
<img class="rounded-circle" src= "img.png" alt="Responsive image" width="467" height="340" />
</div>
</body>
</html>Try it
yourself
Thumbnail Image: The .img-thumbnail class is used to create thumbnail (bordered) image.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap Images</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.3.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 style="text-align:center;">
<div class="container">
<h1 style="color:red;">
CODOLEARN </h1>
<h2>
Thumbnail Image</h2>
<img class="img-thumbnail" src= "img.png" alt="Responsive image" width="467" height="340" />
</div>
</body>
</html>Aligning Image: The .float-left and .float-right class is used to set the left and right alignment of image.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap Images</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.3.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 style="text-align:center;">
<div class="container">
<h1 style="color:red;">
CODOLEARN </h1>
<h2>
Aligning Image</h2>
<!-- Bootstrap float-left class -->
<img class="float-left" src= "img.png" alt="Responsive image" width="250" height="250" />
<!-- Bootstrap float-right class -->
<img class="float-right" src= "img.png" alt="Responsive image" width="250" height="250" />
</div>
</body>
</html>Centered Image: The .mx-auto (margin:auto) and .d-block (display:block) classes are used to set the image
into center.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap Images</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.3.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:red;text-align:center;">
CODOLEARN </h1>
<h2 style="text-align:center;">
Centered Image</h2>
<img class="mx-auto d-block" src= "img.png" alt="Responsive image" width="350" height="250" />
</div>
</body>
</html>Bootstrap 4 | Jumbotron
A jumbotron is a big grey box used to indicate some text which requires extra attention. Any text that seems
to be important can be written inside a jumbotron to make it appear big and noticeable.
Steps to add jumbotron:
Use a jumbotron class inside a div element.
Write any text inside the div tag.
Close the div element.
<body style="text-align:center;">
<div class="container">
<div class="jumbotron">
<h1 style="color:red;">
CODOLEARN </h1>
<p>
CODOLEAR THE BEST PLACE TO LEARN CODING . </p>
</div>
</div>
</body>Alerts In Boostrap 4
We often see certain alerts on some websites before or after completing an action. These alert messages are
highlighted texts that are important to take in consideration while performing a process. Bootstrap allows
showing these alert messages on the website using predefined classes.
The .alert class followed by contextual classes are used to display the alert message on website. The alert
classes are: .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary,
.alert-light and .alert-dark.
<body>
<h1 style="color:aqua;text-align:center;">
CODOLEARN </h1>
<div class="container">
<div class="alert alert-success">
<strong>
Success alert!</strong>
</div>
<div class="alert alert-info">
<strong>
Info alert!</strong>
</div>
<div class="alert alert-warning">
<strong>
Warning alert!</strong>
</div>
<div class="alert alert-danger">
<strong>
Danger alert!</strong>
</div>
<div class="alert alert-primary">
<strong>
primary alert!</strong>
</div>
<div class="alert alert-secondary">
<strong>
Secondary alert!</strong>
</div>
<div class="alert alert-light">
<strong>
Light alert!</strong>
</div>
<div class="alert alert-dark">
<strong>
Dark alert!</strong>
</div>
</div>
</body>
CODOLEARN
Success alert!
Info alert!
Warning alert!
Danger alert!
primary alert!
Secondary alert!
Light alert!
Dark alert!
Dismisible Alert In boostrap 4
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Bootstrap Alerts</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.3.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 style="color:green;text-align:center;">
CODOLEARN </h1>
<div class="container">
<div class="alert alert-success alert-dismissible fade show">
<strong>
Success alert!</strong>
<button type="button" class="close" data-dismiss="alert">
× </button>
</div>
<div class="alert alert-info alert-dismissible fade show">
<strong>
Info alert!</strong>
<button type="button" class="close" data-dismiss="alert">
× </button>
</div>
<div class="alert alert-warning alert-dismissible fade show">
<strong>
Warning alert!</strong>
<button type="button" class="close" data-dismiss="alert">
× </button>
</div>
<div class="alert alert-danger alert-dismissible fade show">
<strong>
Danger alert!</strong>
<button type="button" class="close" data-dismiss="alert">
× </button>
</div>
<div class="alert alert-primary alert-dismissible fade show">
<strong>
primary alert!</strong>
<button type="button" class="close" data-dismiss="alert">
× </button>
</div>
<div class="alert alert-secondary alert-dismissible fade show">
<strong>
Secondary alert!</strong>
<button type="button" class="close" data-dismiss="alert">
× </button>
</div>
<div class="alert alert-light alert-dismissible fade show">
<strong>
Light alert!</strong>
<button type="button" class="close" data-dismiss="alert">
× </button>
</div>
<div class="alert alert-dark alert-dismissible fade show">
<strong>
Dark alert!</strong>
<button type="button" class="close" data-dismiss="alert">
× </button>
</div>
</div>
</body>
</html>Try it
yourself
Bootstrap provides different classes that can be used with different tags, such as <button>, <a>,
<input>, and <label> to apply custom button styles. Bootstrap also provides classes that can be used for
changing the state and size of buttons. Also, it provides classes for applying toggle, checkbox and radio
buttons like effects.
Bootstrap contains many classes to set the style of the button element. The list of button classes are given
below:/p>
.btn
.btn-primary
.btn-secondary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-dark
.btn-light
.btn-link
<body style="text-align:center;">
<div class="container mt-3">
<h1 style="color:red;">
CODOLEARN </h1>
<button type="button" class="btn btn-primary">
Primary</button>
<button type="button" class="btn btn-secondary">
Secondary</button>
<button type="button" class="btn btn-success">
Success</button>
<button type="button" class="btn btn-warning">
Warning</button>
<button type="button" class="btn btn-danger">
Danger</button>
</div>
</body>Button Outlines: Bootstrap provides a series of classes that can be used when we need to use outline styled
buttons in our project, i.e. button without background color. The outline button classes remove any
background color or background image style applied to the buttons. These classes are listed below:
.btn-outline-primary
.btn-outline-secondary
.btn-outline-success
.btn-outline-info
.btn-outline-warning
.btn-outline-danger
.btn-outline-dark
.btn-outline-light
.btn-outline-link
Progress Bar In Boostrap 4
A progress bar is used to display the progress of a process on a computer. A progress bar displays how much
of the process is completed and how much is left. You can add a progress bar on a web page using predefined
bootstrap classes. Bootstrap provides many types of progress bars.
<body>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<div class="container">
<div class="progress">
<div class="progress-bar" style="width:80%">
</div>
</div>
</div>
Labeled Progress Bar: The labeled progress bar is used to display the text inside the progress bar to show
the task completion percentage.
<body>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<div class="container">
<div class="progress">
<div class="progress-bar" style="width:80%;">
80% </div>
</div>
</div>
</body>Colored Progress Bars: Use Bootstrap 4 contextual background classes to set the color of progress bar. The
default color of the progress bar is blue.
<body style="text-align:center;">
<h1 style="color:red;">
CODOLEARN </h1>
<div class="container">
<div class="progress">
<div class="progress-bar" style="width:50%;">
100% </div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-success" style="width:90%;">
95% </div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-warning" style="width:30%;">
50% </div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-danger" style="width:10%;">
10% </div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-info" style="width:70%;">
20% </div>
</div>
<br>
</div>
</body>Striped Progress Bars: The .progress-bar-striped class is used to add stripes to the progress bars. Use
the combination of .progress-bar and .progress-bar-striped classes to create striped progress bar. Use
Bootstrap 4 contextual background classes to set the color of progress bar.
<body style="text-align:center;">
<h1 style="color:red;">
CODOLEARN </h1>
<div class="container">
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:50%;">
50%</div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped" style="width:90%;">
90%</div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped" style="width:30%;">
30%</div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped" style="width:10%;">
10%</div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped" style="width:70%;">
70%</div>
</div>
<br>
</div>
</body>Animated Progress Bar: The .progress-bar-animated class is used to create an animated progress bar. Use
the combination of .progress-bar, progress-bar-striped and progress-bar-animated to create an animated
progress bar.
<body style="text-align:center;">
<h1 style="color:red;">
CODOLEARN </h1>
<div class="container">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:50%;">
50%</div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width:90%;">
90%</div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width:30%;">
30%</div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width:10%;">
10%</div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped progress-bar-animated" style="width:70%;">
70%</div>
</div>
<br>
</div>
</body>Multiple Progress Bars: Multiple progress bars can be stacked to display different colored progress bars.
<body style="text-align:center;">
<h1 style="color:red;">
CODOLEARN </h1>
<div class="container">
<div class="progress">
<div class="progress-bar" style="width:10%;">
10% </div>
<div class="progress-bar bg-success" style="width:20%;">
20% </div>
<div class="progress-bar bg-warning" style="width:30%;">
30% </div>
<div class="progress-bar bg-danger" style="width:30%;">
30% </div>
</div>
</div>
</body>Spinner In boostrap 4
Bootstrap provides various classes for creating different styles of “spinner” to display the loading state
of projects. These classes are inbuilt with HTML and CSS so no need to write any JavaScript to create them.
We can also modify the appearance, size, and placement of the spinners with the classes provided by
Bootstrap.
There are so many types of spinner :
<body>
<center>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<!-- spinner-border -->
<div class="spinner-border" role="status">
<span class="sr-only">
Loading</span>
</div>
</center>
</body>
Note: We have used the class .spinner-border inside <div> element. We have used the role=”status”
attribute-value pair inside the <div> for accessibility purposes and a <span> tag with
class=”sr-only”, which is a Bootstrap class which makes the container and it’s content visible only on
screen-readers.
Colored Spinners: We can change the color of the border spinner using text color utility classes of
Bootstrap along with the .spinner-border class as given below.
<div class="spinner-border text-primary" role="status">
<body>
<center>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<!-- spinner-border, #1 -->
<div class="spinner-border text-primary" role="status">
<span class="sr-only">
Loading</span>
</div>
<!-- spinner-border, #2 -->
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">
Loading</span>
</div>
<!-- spinner-border, #3 -->
<div class="spinner-border text-success" role="status">
<span class="sr-only">
Loading</span>
</div>
<!-- spinner-border, #4 -->
<div class="spinner-border text-danger" role="status">
<span class="sr-only">
Loading</span>
</div>
<!-- spinner-border, #5 -->
<div class="spinner-border text-warning" role="status">
<span class="sr-only">
Loading</span>
</div>
<!-- spinner-border, #6 -->
<div class="spinner-border text-info" role="status">
<span class="sr-only">
Loading</span>
</div>
<!-- spinner-border, #7 -->
<div class="spinner-border text-light" role="status">
<span class="sr-only">
Loading</span>
</div>
<!-- spinner-border, #8 -->
<div class="spinner-border text-dark" role="status">
<span class="sr-only">
Loading</span>
</div>
</div>
</center>
</body>
Note: We have used the text color utility instead of border-color utilities because each border spinner
specifies a transparent border for at least one side and the border-{color} utilities override that.
Growing spinner: We can create growing spinner by using .spinner-grow class of Bootstrap. It displays as
repeatedly grow.
Syntax:
<body>
<center>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<!-- spinner-grow -->
<div class="spinner-grow" role="status">
<span class="sr-only">
Loading</span>
</div>
</div>
<center>
</body>Note: We have used the class .spinner-grow inside <div>. We have used the role=”status”
attribute-value pair inside the <div> for accessibility purposes and a <span> tag with
class=”sr-only”, which is a Bootstrap class which make the container and its content visible only on
screen-readers.
syntax:
<div class="spinner-grow text-danger" role="status">
<body>
<center>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<!-- spinner-grow, #1 -->
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">
Loading</span>
</div>
<!-- spinner-grow, #2 -->
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">
Loading</span>
</div>
<!-- spinner-grow, #3 -->
<div class="spinner-grow text-success" role="status">
<span class="sr-only">
Loading</span>
</div>
<!-- spinner-grow, #4 -->
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">
Loading</span>
</div>
<!-- spinner-grow, #5 -->
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">
Loading</span>
</div>
<!-- spinner-grow, #6 -->
<div class="spinner-grow text-info" role="status">
<span class="sr-only">
Loading</span>
</div>
<!-- spinner-grow, #7 -->
<div class="spinner-grow text-light" role="status">
<span class="sr-only">
Loading</span>
</div>
<!-- spinner-grow, #8 -->
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">
Loading</span>
</div>
</center>
</body>Note: The spinner is built with currentColor which is easily change its appearance with text color
utilities.
Buttons with border spinner: We can place the border spinner within the button with text or without text
by using the .spinner-border class within a <span> tag.
<button type="button" class="btn btn-primary" disabled>
<body>
<center>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<div class="container">
<button type="button" class="btn btn-warning" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true">
</span>
<span class="sr-only">
Loading</span>
</button>
<button type="button" class="btn btn-danger" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true">
</span>
Processing... </button>
</div>
</center>
</body>Note: We have placed “disabled” attribute within the <button> tag to deactivate it and used “role” and
“aria-hidden” attributes within <span> tag for accessibility purposes.
<button type="button" class="btn btn-primary" disabled>
<body>
<center>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<div class="container">
<button type="button" class="btn btn-secondary" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true">
</span>
<span class="sr-only">
Loading</span>
</button>
<button type="button" class="btn btn-primary" disable>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true">
</span>
Loading... </button>
</div>
</center>Note: We have placed “disabled” attribute within the <button> tag to deactivate it and used “role” and
“aria-hidden” attributes within <span> tag for accessibility purposes.
Using class: We can change the size using the classes .spinner-border-sm and .spinner-grow-sm along with
the .spinner-border and .spinner-grow classes.
The list of size classes are given below:
Bootstrap 4 | List Groups
List Groups are used to display a series of content in an organized way. Use .list-group and
.list-group-item classes to create a list of items. The .list-group class is used with <ul> element and
.list-group-item is used with <li> element.
<body>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<div class="container">
<h2>
List Groups</h2>
<ul class="list-group">
<li class="list-group-item">
CODOLEARN</li>
<li class="list-group-item">
CODOLEARN</li>
<li class="list-group-item">
CODOLEARN</li>
</ul>
</div>
</body>Active list item: the .active is used to hightlight the current item Example:
<body>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<div class="container">
<h2>
List Groups</h2>
<ul class="list-group" id="">
<li class="list-group-item active">
codolearn</li>
<li class="list-group-item">
codolearn</li>
<li class="list-group-item">
codolearn</li>
</ul>
</div>
</body>List Group With Linked Items: Use <div> and <a> tag instead of <ul> and <li> to create a list
of group with linked items. The .list-group-item-action class is used to set the hover effect to change the
background color to gray
<body>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<div class="container">
<h2>
List Groups</h2>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
codolearn </a>
<a href="#" class="list-group-item list-group-item-action">
codolearn </a>
<a href="#" class="list-group-item list-group-item-action">
codolearn </a>
</div>
</div>
</body>Disabled Item: The .disabled class is used to disable the text content. This class set the text color to
light. When used on links, it will remove the hover effect.
Example:
<body>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<div class="container">
<h2>
List Groups</h2>
<div class="list-group">
<a href="#" class="list-group-item disabled">
CODOLEARN </a>
<a href="#" class="list-group-item">
codolearn </a>
<a href="#" class="list-group-item disabled">
codolearn </a>
</div>
</div>
</body>Flush/Remove Borders: The .list-group-flush class is used to remove some borders and rounded corners.
<body>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<div class="container">
<h2>
List Groups</h2>
<ul class="list-group list-group-flush">
<li class="list-group-item">
CODOLEARN </li>
<li class="list-group-item">
codolearn </li>
<li class="list-group-item">
codolearn </li>
</ul>
</div>
</body>
Contextual Classes: It is used to set the color to the list of items. The classes for coloring the
list-items are: .list-group-item-success, .list-group-item-secondary, .list-group-item-info,
.list-group-item-warning, .list-group-item-danger, .list-group-item-primary, .list-group-item-dark and
.list-group-item-light.
<body>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<div class="container">
<h2>
List Groups</h2>
<ul class="list-group">
<li class="list-group-item list-group-item-primary">
CODOLEARN </li>
<li class="list-group-item list-group-item-secondary">
codolearn </li>
<li class="list-group-item list-group-item-success">
codolearn </li>
<li class="list-group-item list-group-item-warning">
codolearn </li>
<li class="list-group-item list-group-item-danger">
codolearn </li>
</ul>
</div>
</body>Cards in boostrap 4
A Bootstrap card is a flexible box containing some padding around the content. It includes the options for
headers and footers, color, content, and powerful display options. It replaces the use of panels, wells, and
thumbnails. It can be used in a single container called card.
Basic card: The .card and .card-body classes are used to create basic card. The .card-body class is
used inside the .card class
<body>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<div class="container">
<div class="card">
<div class="card-body">
card-body</div>
</div>
</div>
</body>Header and Footer: The .card-header class provides header to the cards and .card-footer class provides
footer to the cards.
<body>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<div class="container">
<div class="card">
<div class="card-header">
codolearn</div>
<div class="card-body">
codolearn</div>
<div class="card-footer">
codolearn</div>
</div>
</div>
</body>Card Images: The .card-img-top or .card-img-bottom class is used to place the image at top or bottom inside
the card.
<body>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<div class="container">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="imgurl.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">
Man in action</h5>
<p class="card-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque, mollitia dignissimos quo expedita consequuntur fugiat soluta doloremque iusto non quasi debitis libero ad dolores, voluptate odit id. Harum, mollitia molestiae!</p>
<a href="#" class="btn btn-warning">
Lorem ipsum</a>
</div>
</div>
</div>
</body><body>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<div class="container">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">
Author Name</h5>
<p class="card-text">
Passionate about programming.</p>
<a href="#" class="btn btn-primary">
See Profile</a>
<img class="card-img-top" src= "imgurl.png" alt="Card image cap">
</div>
</div>
</div>
</body>Card Image Overlays: The .card-img-overlay class is used to add text on the top of the image.
<body>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<div class="container">
<div class="card" style="width: 18rem;">
<img class="card-img-bottom" src= "imgurl.png" alt="Card image cap">
<div class="card-img-overlay">
<div class="card-body">
<h5 class="card-title">
Man in action</h5>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum harum molestias iure ipsam voluptates! Odit mollitia labore perspiciatis quasi laborum. Laudantium quidem voluptates ipsum ducimus praesentium consectetur, saepe temporibus vel.</p>
<a href="#" class="btn btn-primary">
Lorem ipsum</a>
</div>
</div>
</div>
</div>
</body>Navigation: It adds the navigation menu to the card header.
<body>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">
Lorem, ipsum </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Lorem, ipsum </a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">
Lorem, ipsum </a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">
Card Title</h5>
<p class="card-text">
Add more language tutorials.</p>
<a href="#" class="btn btn-primary">
Add Language</a>
</div>
</div>
</body>Navigation menu in pills form: It adds the navigation menu in pills form to the card header.
<body>
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">
JavaStript</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
BootStrap</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">
Python</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">
Card Title</h5>
<p class="card-text">
Add more language tutorials.</p>
<a href="#" class="btn btn-primary">
Add Language</a>
</div>
</div>
</body>Bootstrap 4 | Accordion
The following example displays a simple accordion by extending the panel component. The use of the
data-parent attribute to makes sure that all collapsible elements under the specified parent will be closed
when one of the collapsible items is display.
There are so many types of Accordion
Default Accordion
Accordion with icons
Accordion with gradient background
Accordion with a picture
Default Accordion:
This is basic Accordion there is no specialty in this Accordion but you can easily design this Accordion by
yourself.
<body>
<div class="container">
<h2 style="padding-bottom: 15px; color:green;">
CODOLEARN </h2>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#description1">
CODOLEARN </a>
</div>
<div id="description1" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum doloribus nam tempore? Et distinctio quae voluptatem aliquam voluptate. Est molestias vel officia doloremque, asperiores labore quas maxime iste eligendi esse? </div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#description2">
Bootstrap </a>
</div>
<div id="description2" class="collapse" data-parent="#accordion">
<div class="card-body">
Bootstrap is free and open-source collection of tools for creating websites and web applications. </div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#description3">
HTML </a>
</div>
<div id="description3" class="collapse" data-parent="#accordion">
<div class="card-body">
HTML stands for HyperText Markup Language. It is used to design web pages using markup language. </div>
</div>
</div>
</div>
</div>
</body>Accordion with changeable icons: This example will show you how to add plus and minus icons in accordion
with the help of font-awesome and toggle when you open an accordion with the help of jQuery.
<body>
<div class="accordion">
<h2 style="padding-bottom: 15px; color:green;">
CODOLEARN </h2>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">
<i class="fa fa-plus">
</i>
CODOLEARN </button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<p>
CODOLEARN is a computer science portal. It is the best platform to lean programming. </p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo">
<i class="fa fa-plus">
</i>
Bootstrap </button>
</h2>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<p>
Bootstrap is a free and open-source collection of tools for creating websites and web applications. </p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree">
<i class="fa fa-plus">
</i>
HTML </button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
<p>
HTML stands for HyperText Markup Language. It is used to design web pages using markup language. </p>
</div>
</div>
</div>
</div>
</div>
</body>Bootstrap 4 | Modal
In simple words, the Modal component is a dialog box/popup window that is displayed on top of the current
page, once the trigger button is clicked. However, clicking on the modal’s backdrop automatically closes the
modal. Also, it must be kept in mind that Bootstrap doesn’t support nested modals as they create bad UI
experience for the user. Therefore, only one modal window is supported at a time.
However, there are many BootStrap components that require several JavaScript plugins in order to function
well. Those plugins are jQuery, Popper.js, and a Bootstrap’s personal JavaScript plugin. The following chunk
of code must be placed right before the closing body tag inside the script tag.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>
bootstrap | Modal</title>
<style>
h1,h6 { margin: 2%; } .btn { margin-left: 2%; } </style>
</head>
<body>
<center>
<h1 style="color:red;">
CODOLEARN</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch Modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="exampleModalLabel" style="color:red;">
CODOLEARN</h6>
<!-- The title of the modal -->
<button type="button" class="close" data-dismiss="modal"aria-label="Close">
<span aria-hidden="true">
×</span>
</button>
</div>
<div class="modal-body">
<!-- The content inside the modal box -->
<p>
Articles that need little modification/improvement from reviewers are published first. To quickly get your articles reviewed, please refer existing articles, their formating style, coding style, and try to make your close to them. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close</button>
<!-- The close button in the bottom of the modal -->
<button type="button" class="btn btn-primary">
okay</button>
<!-- The save changes button in the bottom of the modal -->
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
</center>
</body>
</html>How Bootstrap Modal works:
How Bootstrap Modal works:
Modals are built with HTML, CSS, and JavaScript. They are positioned over everything else in the
document and remove scroll from the <body> so that modal content scrolls instead.
Clicking the modal “backdrop” will close the modal automatically.
This Modal supports only one modal window at a time.
Modals use position: fixed, which can sometimes be a bit particular about its rendering. If possible,
place your modal HTML in a top-level position to avoid potential interference from other elements.
Due to position: fixed, there are few caveats with using modals on mobile devices.
Bootstrap Modal Contents:
Using the grid:Utilize the Bootstrap grid system within a modal by nesting <b-container fluid> within
the modal-body else you can use the normal grid system <b-row> (or <b-form-row>) and <b-col> as
you would anywhere else.
Tooltips and popovers:
A Tooltip is used to provide interactive textual hints to the user about the element when the mouse
pointer moves over.
The popover is an attribute of bootstrap that can be used to make any website look more dynamic. Popovers
are generally used to display additional information about any element and are displayed on click of mouse
pointer over that element.
<body>
<center>
<h1 style="color:red;">
CODOLEARN</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch Modal </button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel" style="color:red;">
CODOLEARN</h3>
<!-- The title of the modal -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×</span>
</button>
</div>
<div class="modal-body">
<!-- The content inside the modal box -->
<div class="container">
<p>
This <button style="color:red;" data-toggle="popover" title="popover-title" data-content="popover-content">
CODOLEARN </button>
triggers a popover on click.</p>
</div>
<script>
$(document).ready(function() { $('[data-toggle="popover"]').popover(); }); </script>
<div class="container">
<p>
This <a style="color:red;" data-toggle="tooltip" title="Tooltip">
CODOLEARN </a>
will show a tooltip on hover. </p>
</div>
<script>
$(document).ready(function() { $('[data-toggle="tooltip"]').tooltip(); }); </script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close</button>
<!-- The close button in the bottom of the modal -->
<button type="button" class="btn btn-primary">
okay</button>
<!-- The save changes button in the bottom of the modal -->
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
</center>
</body>Bootstrap 4 | Navigation Bar
A navigation bar is used in every website to make it more user-friendly so that the navigation through the
website becomes easy and the user can directly search for the topic of their interest. The navigation bar is
placed at the top of the page
Basic Navigation Bar: The .navbar class is used to create a navigation bar. The navbar is created
responsive by using .navbar-expand-xl|lg|md|sm class. The responsive navbar is vertically stacked in small
screens. The <class=”nav-item”> element followed by <a class=”nav-link”> is used to create nav link.
<body style="text-align:center;">
<div class="container">
<h1 style="color:red;">
CODOLEARN </h1>
<h2>
Navigation Bar</h2>
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
contact</a>
</li>
</ul>
</nav>
</div>
</body>Colored Navbar: The .bg-color classes is used to change the background color of the navbar. The bg-color
classes are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and
.bg-light. The .navbar-dark class is used to set links text color to white and .navbar-light class is used
to set links text color to black.
<body>
<div class="container">
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<h2 style="text-align:center;">
Colored Navbar</h2>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">
Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
contact</a>
</li>
</ul>
</nav>
<br>
<br>
<nav class="navbar navbar-expand-sm bg-success navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">
Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
contact</a>
</li>
</ul>
</nav>
</div>
Brand/Logo navbar: The .navbar-brand class is used to highlight the brand/logo name.
<body>
<div class="container">
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<a class="navbar-brand" href="#">
CODOLEARN</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
contact</a>
</li>
</ul>
</nav>
</div>
</body>Collapsing Navbar: The collapsing navbar is used on small screens. It hides the navigation links and
replaces with a button. The class=”navbar-toggler”, data-toggle=”collapse” and data-target=”#thetarget” is
used to create collapse navigation bar.
<body>
<div class="container">
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<nav class="navbar navbar-expand-sm bg-success navbar-light">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
CODOLEARN </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse_Navbar">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="collapse_Navbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">
Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
contact</a>
</li>
</ul>
</div>
</nav>
</div>
</body>Dropdown Navbar: The navbar can be created by using dropdown menu.
<body>
<div class="container">
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
CODOLEARN </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse_Navbar">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="collapse_Navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
about</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Languages </a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
Link 1</a>
<a class="dropdown-item" href="#">
Link 2</a>
<a class="dropdown-item" href="#">
Link 3</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</body>
Forms and Buttons Navbar: The <form class=”form-inline”> element is used to group inputs and button
side-by-side. The .input-group-prepend or .input-group-append class is used to attach icon of input text
fields.
<body>
<div class="container">
<h1 style="color:red;text-align:center;">
CODOLEARN </h1>
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">
CODOLEARN </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse_Navbar">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="collapse_Navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">
Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
about</a>
</li>
</ul>
</div>
<form class="form-inline" action="#">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-warning" type="submit">
Search</button>
</form>
</nav>
</div>