- Bootstrap is the most commonly used framework for Front-End Development.
- Bootstrap providing several predefined libraries for css and javascript.
- Website: getbootstrap.com
How to connect Bootstrap with HTML:
We can connect Bootstrap with HTML by using the following 2 ways
1) By using CDN
2) Locally
By using CDN: Content Delivery Network just add the following in the <head> part of our html
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
//always add this javascript link before closing the end tag of body
Locally: <link rel="stylesheet" href="Bootstrap.css"> //just download and use folder name
In below examples, all files are saved in jsp format
Topics Covered:
- Alerts
- Badge
- Breadcrumb
- Buttons
- Cards
- Carousel
- Collapse
- Navbar
- Login Form
- Grid
- Gallery
ALERT:
Alert with link and normal alert with changing width using class name
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Alert</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<style>
.ex{
width: 50%;
}
</style>
<body>
<div class="alert alert-primary ex" role ="alert">Primary!<a href="https://www.sookshmas.com/">Click here</a></div>
<div class="alert alert-secondary ex" role ="alert">Secondary!</div>
<div class="alert alert-warning ex" role ="alert">Warning!</div>
<div class="alert alert-light" role ="alert">Light!</div>
<div class="alert alert-success" role ="alert">Success!</div>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
Output:
Badges and Breadcrumb:
- Badges are similar to labels; the primary difference is that the corners are more rounded. Badges are mainly used to highlight new or unread items.
- Breadcrumbs are a great way to show hierarchy-based information for a site. In the case of blogs, breadcrumbs can show the dates of publishing, categories, or tags. They indicate the current page's location within a navigational hierarchy.
- You can change separator using :: before and content
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Badge and Bc</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<style>
.breadcrumb-item+.breadcrumb-item::before{
content:">"; /*to change format of breadcrumb icon*/
}
</style>
<body>
<h3>Sookshmas Test Series<sup><span class="badge bg-warning">New</sup></span></h3>
<button type="button" class="btn btn-secondary">Comments<span class="badge bg-warning">7</span></button>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#">About us</a></li>
</ol>
</nav>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
Output:
Buttons:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Buttons</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<h5>outline button</h5>
<button type="button" class="btn btn-outline-success">Success</button><br>
<h5>large buttons:</h5>
<button type="button" class="btn btn-primary btn-lg">Large
button</button><br><hr>
<h5>Block buttons:</h5>
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
<h5>To add link in buttons:</h5>
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button"
aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button"
aria-disabled="true">Link</a>
<h5>Disable</h5>
<button type="button" class="btn btn-lg btn-primary" disabled>Primary
button</button>
<h5>Button group:</h5>
<div class="btn-group" role="group" aria-label="example">
<button type="button" class="btn btn-success btn-lg">Left</button>
<button type="button" class="btn btn-success btn-lg">Middle</button>
<button type="button" class="btn btn-success btn-lg">Right</button>
</div>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
<button type="button" class="btn btn-secondary">4</button>
</div>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary
dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
</html>
Output:
Cards:
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Cards</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h5>How to create a card</h5>
<div class="card">
<div class="card-body">
This is First Card
</div> </div>
<h5>Card example by setting width,image and adding content</h5>
<div class="card mt-2" style="width:18rem">
<img src="image/GARDEN.JPG" class="card-img-top" alt="....">
<div class="card-body">
<h5 class="card-title">Sookshmas</h5>
<h6 class="subtitle mb-2 text-muted">Self-learning</h6>
<p>connecting every students and teachers</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Cards</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<style>
{
margin: 0 auto;
float: none;
margin-bottom: 10px;
font-weight: bolder;
}
</style>
<body>
<div class="container">
<h5>Adding Links to card</h5>
<div class="card mt-2" style="width:18rem">
<div class="card-header mb-2">Ed-platform</div>
<img src="image/GARDEN.JPG" class="card-img-top" alt="....">
<div class="card-body">
<h5 class="card-title">Sookshmas</h5>
<h6 class="subtitle mb-2 text-muted">Self-learning</h6>
<p>connecting every students and teachers</p>
<a href="#" class="card-link">Another link</a>
<a href="#" class="card-link">Card link</a>
<a href="#" class="btn btn-secondary">Subscribe</a>
</div>
</div>
<h5 class="text-center">Image overlay and changing position</h5>
<div class="card mt-2 ex" style="width:16rem">
<img src="image/download.jpg" class="card-img-top" alt="....">
<div class="card-img-overlay">
<div class="card-body">
<h5 class="card-title">Sookshmas</h5>
<h6 class="subtitle mb-2 text-muted">Self-learning</h6>
<p>connecting every students and teachers</p>
<a href="#" class="card-link">Another link</a>
<a href="#" class="card-link">Card link</a>
<a href="#" class="btn btn-secondary">Subscribe</a>
</div>
</div></div>
</div>
Carousel: A slideshow component for cycling through elements—images or slides of text—like a carousel.
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>corousel</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<style>
.carousel-indicators li{
border-radius:12px;
width: 12px;
height: 12px;
background-color: white;
}
</style>
<body>
<div class="container">
<div id="corouselEx" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#corouselEx" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#corouselEx" data-bs-slide-to="1"></li>
<li data-bs-target="#corouselEx" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image/GARDEN.JPG" class="d-block w-100" style="height:500px;" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Sookshmas</h5>
</div>
</div>
<div class="carousel-item">
<img src="image/download.jpg" class="d-block w-100" style="height:500px;" alt="...">
<div class="carousel-caption d-none d-md-block">
<p>Lorem fdfvjkluyscvhbjnkml,</p>
</div>
</div>
<div class="carousel-item">
<img src="image/img3.PNG" class="d-block w-100" style="height:500px;" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#corouselEx" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#corouselEx" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
Collapse: To hide any content
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Collapse</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<p class="text-center">
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEx" aria-expanded="false" aria-controls="collapseEx">
show more
</button>
</p>
<div class="collapse" id="collapseEx">
<div class="card card-body">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
Login Form:
mb-3: for spacing (margin bottom)
form-control: This class is responsible to make width as 100% for elements <input>, <textarea>, and <select>. It is also responsible for border styling
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Form</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Login Form</h1>
<form>
<div class="mb-3">
<label for="exemail" class="form-label">Email</label>
<input type="email" class="form-control" id="exemail" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="expass" class="form-label">Password</label>
<input type="password" class="form-control" id="expass" placeholder="Enter char and num">
</div>
<div class="mb-3">
<label for="exformfile" class="form-label">File</label>
<input type="file" class="form-control-file" id="exformfile">
</div>
</form>
<div class="text-right"><button type="button" name="button" class="btn btn-secondary">Login</button></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
Navs, Navbar and grid:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="image/download.jpg" alt="" width="30" height="24" class="d-inline-block align-top">
Sookshmas
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Service
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Shopping</a></li>
<li><a class="dropdown-item" href="#">Repairs</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Help</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-sm">
Element 1
</div>
<div class="col-sm">
Element 2
</div>
<div class="col-sm">
Element 3
</div>
</div>
<div class="row">
<div class="col-lg-3">Element-1</div>
<div class="col-lg-3">Element-1</div>
<div class="col-lg-3">Element-1</div>
<div class="col-lg-3">Element-1</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
<div class="row h-auto justify-content-center" style="grid-row-gap: 10px;">
<div class="col-sm-6 col-xl-4">
<div class="inner">
<div class="card shadow card-body">
<div class="card-title title1">
<h4>Sookshmas</h4>
</div>
<p class="card-text text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
<a href="#" class="btn btn-dark btn-lg btn-block btn1">EXPLORE</a>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-4">
<div class="inner">
<div class="card shadow card-body">
<div class="card-title title1">
<h4>Sookshmas</h4>
</div>
<p class="card-text text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Aenean massa. </p>
<a href="#" class="btn btn-dark btn-lg btn-block btn1">EXPLORE</a>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-4">
<div class="inner">
<div class="card shadow card-body">
<div class="card-title title1">
<h4>Sookshmas</h4>
</div>
<p class="card-text text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. </p>
<a href="#" class="btn btn-dark btn-lg btn-block btn1">EXPLORE</a>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-4">
<div class="inner">
<div class="card shadow card-body">
<div class="card-title title1">
<h4>Sookshmas</h4>
</div>
<p class="card-text text1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
<a href="#" class="btn btn-dark btn-lg btn-block btn1">EXPLORE<i
class="fas fa-external-link-square-alt" style="padding-left: 0.5em;"></i></a>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-4">
<div class="inner">
<div class="card shadow card-body">
<div class="card-title title1">
<h4>Sookshmas</h4>
</div>
<p class="card-text text1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
<a href="#" class="btn btn-dark btn-lg btn-block btn1">EXPLORE
</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
Responsive Gallery:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<div class="container-fluid bg">
<div class="row">
<div class="col-12">
<div class="hdiv">
<h1>Gallery</h1>
</div>
</div>
</div>
<div class="row">
<div class=" col-lg-3 col-md-4 col-xs-3 col-sm-6 image-responsive">
<img src="image/GARDEN.JPG" width="100%" height="500px" alt="">
</div>
<div class=" col-lg-3 col-md-4 col-xs-3 col-sm-6">
<img src="image/GARDEN.JPG" width="100%" height="500px" alt="">
</div>
<div class="col-lg-3 col-md-4 col-xs-3 col-sm-6 ">
<img src="image/GARDEN.JPG" width="100%" height="500px" alt="">
</div>
<div class="col-lg-3 col-md-12 col-xs-3 col-sm-6">
<img src="image/GARDEN.JPG" width="100%" height="500px" alt="">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
Second image on decreasing window width images aling one next to other.
