URL: https://getbootstrap.com/
Download the required files for working with bootstrap.
Starting template:
https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template
copy all the link from starter template and download the files for working offline.
for the demo purpose. now remove all integrity and cross-origin attribute from link tags.
Tutorial Link:
https://www.youtube.com/watch?v=Udyaj2hf6wM&list=PLvQjNLQMdagNNLxYL_2Tg-CUxjSufZlGC&index=25
Lession starts here:
<!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="bootstrap/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<!-- Lesson 1: Container-->
<div class="container">
<h1 style="background: red" class="text-primary">Hello, world!</h1>
</div>
<div class="container-fluid">
<h1 style="background: red" class="text-primary">Hello, world!</h1>
</div>
<!-- Lesson 1: Container END-->
<!-- Lesson 2: Grid System in Bootstrap 4 -->
<div class="row"><!-- A row consist of 12 columns-->
<div class="col-lg-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-lg-4" style="background: blue">Hello World</div><!--merging 4 columns-->
<div class="col-lg-4" style="background: red">Hello World</div><!--merging 4 columns-->
</div>
<div class="row"><!-- A row consist of 12 columns-->
<div class="col-md-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-md-4" style="background: blue">Hello World</div><!--merging 4 columns-->
<div class="col-md-4" style="background: red">Hello World</div><!--merging 4 columns-->
</div>
<div class="row"><!-- A row consist of 12 columns-->
<div class="col-sm-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-sm-4" style="background: blue">Hello World</div><!--merging 4 columns-->
<div class="col-sm-4" style="background: red">Hello World</div><!--merging 4 columns-->
</div>
<div class="row"><!-- A row consist of 12 columns-->
<div class="col-md-6" style="background: red">Hello World</div><!--merging 6 columns-->
<div class="col-md-6" style="background: green">Hello World</div><!--merging 6 columns-->
</div>
<!-- Lesson 2: Grid System in Bootstrap 4 END-->
<!-- Lesson 3: Offset in Grid System in Bootstrap 4 -->
<div class="row"><!-- A row consist of 12 columns-->
<div class="col-lg-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-lg-4 offset-md-4" style="background: blue">Hello World</div><!--merging 4 columns-->
</div>
<div class="row"><!-- A row consist of 12 columns-->
<div class="col-lg-4 offset-md-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-lg-4" style="background: green">Hello World</div><!--merging 4 columns-->
</div>
<!-- Lesson 3: Offset in Grid System in Bootstrap 4 END-->
<div style="background-color: black">
<!-- Lesson 4: Text formatting in Bootstrap 4 -->
<!-- Lesson 4.1: Text coloring in Bootstrap 4 -->
<p class="text-danger">Hello World</p>
<p class="text-success">Hello World</p>
<p class="text-info">Hello World</p>
<p class="text-warning">Hello World</p>
<p class="text-primary">Hello World</p>
<p class="text-secondary">Hello World</p>
<p class="text-muted">Hello World</p>
<p class="text-dark">Hello World</p>
<p class="text-light">Hello World</p>
<!-- Lesson 4.1: Text coloring in Bootstrap 4 END -->
<!-- Lesson 4.2: Text allignment in Bootstrap 4 -->
<p class="text-left">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-justify text-uppercase">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-justify text-lowercase">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-justify text-capitalize">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-right">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p class="text-center">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<!-- Lesson 4.2: Text allignment in Bootstrap 4 END -->
<!-- Lesson 4.3: Backgrounds in Bootstrap 4 -->
<p class="text-center bg-danger">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-success">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-info">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-primary">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-secondary">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-warning">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-dark">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-light">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-white">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
</div>
<!-- Lesson 4.3: Backgrounds in Bootstrap 4 END -->
<!-- Lesson 4.4: Buttons in Bootstrap 4 -->
<button class="btn btn-primary">Home</button>
<button class="btn btn-secondary">Home</button>
<button class="btn btn-success">Home</button>
<button class="btn btn-info">Home</button>
<button class="btn btn-danger">Home</button>
<button class="btn btn-warning">Home</button>
<button class="btn btn-dark">Home</button>
<button class="btn btn-light">Home</button>
<button class="btn btn-default">Home</button>
<button class="btn btn-link">Home</button>
<br/>
<button class="btn-sm btn-primary">Home Small</button>
<button class="btn-lg btn-primary">Home large</button>
<br/>
<button class="btn btn-outline-primary">Home</button>
<button class="btn btn-outline-secondary">Home</button>
<button class="btn btn-outline-success active">Clicked Button</button>
<button class="btn btn-outline-info">Home</button>
<button class="btn btn-outline-danger">Home</button>
<button class="btn btn-outline-warning">Home</button>
<button class="btn btn-outline-dark">Home</button>
<button class="btn btn-outline-light">Home</button>
<button class="btn btn-outline-default disabled">click disabled</button>
<br/>
<br/>
<button class="btn btn-danger btn-block">Home</button><!--button in full horizontal width-->
<!-- Lesson 4.4.1: Buttons group in Bootstrap 4 END -->
<br/>
<br/>
<div class="btn-group">
<button class="btn btn-danger">Home</button>
<button class="btn btn-outline-success">Home</button>
<button class="btn btn-primary">Home</button>
</div>
<br/>
<br/>
<div class="btn-group-vertical">
<button class="btn btn-danger">Home</button>
<button class="btn btn-outline-success">Home</button>
<button class="btn btn-primary">Home</button>
</div>
<!-- Lesson 4.4.1: Buttons group in Bootstrap 4 END -->
<!-- Lesson 4.4: Buttons in Bootstrap 4 END -->
<!-- Lession 4.5: Typography in Bootstrap 4 -->
<p class="h1">Home</p>
<p class="h2">Home</p>
<p class="h3">Home</p>
<p class="h4">Home</p>
<p class="h5">Home</p>
<p class="h6">Home</p>
<br/>
<br/>
<p class="display-1">Home</p>
<p class="display-2">Home</p>
<p class="display-3">Home</p>
<p class="display-4">Home</p>
<!-- Lession 4.5: Typography in Bootstrap 4 END -->
<!-- Lession 4.6: Jumbotron & Badge in Bootstrap 4 -->
<!-- Badge -->
<button class="btn btn-danger"> Home <span class="badge badge-primary"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-success"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-info"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-secondary"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-dark"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-light"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-warning"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-default"> 2.0 </span></button>
<!-- Jumbotron to set specific background for header and footer-->
<div class="jumbotron jumbotron-fluid bg-primary">
<p>Home</p>
</div>
<!-- Lession 4.6: Jumbotron & Badge in Bootstrap 4 END -->
<!-- Lesson 4: Text formatting in Bootstrap 4 END -->
<!-- Lesson 5: image in Bootstrap 4 rounded-for round corner,img-thumbnail- for making the thumbnail boundary, d-block mx-auto- for keeping the image in center, img-fluid- for making the image as responsive -->
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<!-- Lesson 5: image in Bootstrap 4 END -->
<!-- Lesson 5: Alert in Bootstrap 4 -->
<p class="alert alert-danger">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">×</span></p>
<p class="alert alert-success">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">×</span></p>
<p class="alert alert-info">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">×</span></p>
<p class="alert alert-warning">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">×</span></p>
<p class="alert alert-primary">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">×</span></p>
<p class="alert alert-secondary">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">×</span></p>
<p class="alert alert-dark">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">×</span></p>
<!-- Lesson 5: Alert in Bootstrap 4 END -->
<!-- Lesson 6: Modal in Bootstrap 4 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#modal1">Open Modal</button>
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">Modal Header</div></div>
<div class="modal-body">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal">Close Modal</button>
</div>
</div>
</div>
</div>
<!-- Lesson 6: Modal in Bootstrap 4 END -->
<!-- Lesson 7: Collapse in Bootstrap 4 -->
<div class="container">
<a href="#pCollapse" data-toggle="collapse">Click here to Expand and Collapse</a>
<p class="collapse" id="pCollapse">Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello worldHello World Hello World Hello World v Hello World</p>
<br><br><br>
<button data-target="#paraCollapse" data-toggle="collapse">Click here to Expand and Collapse</button>
<p class="collapse" id="paraCollapse">Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello worldHello World Hello World Hello World v Hello World</p>
</div>
<!-- Lesson 7: Collapse in Bootstrap 4 END -->
<!-- Lesson 8: Cards in Bootstrap 4 -->
<div class="card" style="width: 300px; margin: 10px; float: left;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<div class="card-body">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
<div class="card-footer">footer</div>
</div>
<div class="card" style="width: 300px; margin: 10px; float: left;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<div class="card-body">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
<div class="card-footer">footer</div>
</div>
<div class="card" style="width: 300px; margin: 10px; float: left;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<div class="card-body">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
<div class="card-footer">footer</div>
</div>
<div class="card" style="width: 300px; margin: 10px; float: left;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<div class="card-body">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
<div class="card-footer">footer</div>
</div>
<!-- Lesson 8.1: Cards (Deck, Collapse, Group) in Bootstrap 4 -->
<!-- Lesson 8.1.1: Cards Group in Bootstrap 4 -->
<div class="container card-group">
<div class="card" style="width: 300px;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<div class="card-body bg-info">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
<div class="card-footer">footer</div>
</div>
<div class="card" style="width: 300px;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<div class="card-body bg-info">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
<div class="card-footer">footer</div>
</div>
<div class="card" style="width: 300px;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<div class="card-body bg-info">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
<div class="card-footer">footer</div>
</div>
</div>
<!-- Lesson 8.1.1: Cards Group in Bootstrap 4 END -->
<!-- Lesson 8.1.2: Cards Collapse in Bootstrap 4 -->
<div class="card" style="width: 300px;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg" data-toggle="collapse" data-target="#msdBody"></image>
<div class="card-body bg-info collapse" id="msdBody">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
</div>
<div class="card" style="width: 300px;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg" data-toggle="collapse" data-target="#msdBodyTest"></image>
<div class="card-body bg-info collapse" id="msdBodyTest">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
</div>
<!-- Lesson 8.1.2: Cards Collapse in Bootstrap 4 END -->
<!-- Lesson 8.1.3: Cards deck in Bootstrap 4 -->
<div class="card-deck-wrapper">
<div class="card-deck">
<div class="card" style="width: 300px;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg">
</image>
<div class="card-body bg-info" id="msdBody">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
</div>
<div class="card" style="width: 300px;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg">
</image>
<div class="card-body bg-info" id="msdBody">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
</div>
<div class="card" style="width: 300px;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg">
</image>
<div class="card-body bg-info" id="msdBody">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
</div>
</div>
</div>
<!-- Lesson 8.1.3: Cards deck in Bootstrap 4 END -->
<!-- Lesson 8.1: Cards (Deck, Collapse, Group) in Bootstrap 4 END-->
<!-- Lesson 8: Cards in Bootstrap 4 END-->
<!-- Lesson 9: Table in Bootstrap 4 -->
<table class="table table-sm table-sm-responsive table-danger table-striped table-hover">
<tr>
<td>Name</td>
<td>Name</td>
<td>Name</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Name</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Name</td>
</tr>
</table>
<!-- Lesson 9: Table in Bootstrap 4 END-->
<!-- Lesson 10: Nav & Tabs in Bootstrap 4 -->
<div class="container">
<ul class="nav nav-tabs"><!--nav-tabs similar of nav-pills-->
<li class="nav-item">
<a href="#one" class="nav-link active" data-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a href="#two" class="nav-link" data-toggle="tab">Contact Us</a>
</li>
<li class="nav-item">
<a href="#three" class="nav-link" data-toggle="tab">Login</a>
</li>
</ul>
<div class="tab-content">
<li class="tab-pane" id="one"> This is first tab.</li>
<li class="tab-pane" id="two">This is second tab.</li>
<li class="tab-pane" id="three">This is third tab.</li>
</div>
</div>
<!-- Lesson 10: Nav & Tabs in Bootstrap 4 END-->
<!-- Lesson 11: Navbar Responsive in Bootstrap 4 -->
<nav class="navbar navbar-expand-sm navbar-light bg-danger"><!--It does not come under any container class-->
<a href="#" class="navbar-brand">LOGO</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#cl" >
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="cl">
<span class="mr-auto"></span>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About US</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact US</a>
</li>
</ul>
</div>
</nav>
<!-- Lesson 11: Navbar Responsive in Bootstrap 4 END-->
<!-- Lesson 12: Breadcrumb in Bootstrap 4 -->
<div class="container">
<ul class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">About US</a>
</li>
<li class="breadcrumb-item">
<a href="#">Contact US</a>
</li>
</ul>
</div>
<!-- Lesson 12: Breadcrumb in Bootstrap 4 END-->
<!-- Lesson 13: Pagination in Bootstrap 4 -->
<div class="container">
<div class="pagination">
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
</div>
<div class="pagination pagination-lg">
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
</div>
<div class="pagination pagination-sm">
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
</div>
<div class="pagination pagination-sm">
<li class="page-item disabled"><a href="#" class="page-link">Previous</a></li>
<li class="page-item active"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</div>
</div>
<!-- Lesson 13: Pagination in Bootstrap 4 END-->
<!-- Lesson 14: Carousel Slider in Bootstrap 4 -->
<div class="">
<div id="car" class="carousel slide" data-ride="carousel" data-interval="2000">
<ol class="carousel-indicators">
<li class="" data-target="#car" data-slide-to="0" class="active"></li>
<li class="" data-target="#car" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
</div>
<div class="carousel-item">
<image class="img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
</div>
<div class="carousel-item">
<image class="img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
</div>
</div>
</div>
<a href="#car" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#car" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<!-- Lesson 14: Carousel Slider in Bootstrap 4 END-->
<!-- Lesson 15: Tooltip & Popover in Bootstrap 4 -->
<!--https://www.w3schools.com/bootstrap4/bootstrap_tooltip.asp-->
<div class="container">
<br>
<br>
<a href="#" data-toggle="tooltip" data-title="Sample Text" data-placement="bottom">
ToolTip Sample
</a>
<br>
<br>
<!--https://www.w3schools.com/bootstrap4/bootstrap_popover.asp-->
<a href="#" data-toggle="popover" data-title="Header" data-content="world Hello" data-placement="right">
Popover Sample
</a>
</div>
<!-- Lesson 15: Tooltip & Popover in Bootstrap 4 END-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="bootstrap/js/jquery-3.3.1.slim.min.js"></script>
<script src="bootstrap/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
Download the required files for working with bootstrap.
Starting template:
https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template
copy all the link from starter template and download the files for working offline.
for the demo purpose. now remove all integrity and cross-origin attribute from link tags.
Tutorial Link:
https://www.youtube.com/watch?v=Udyaj2hf6wM&list=PLvQjNLQMdagNNLxYL_2Tg-CUxjSufZlGC&index=25
Lession starts here:
<!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="bootstrap/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<!-- Lesson 1: Container-->
<div class="container">
<h1 style="background: red" class="text-primary">Hello, world!</h1>
</div>
<div class="container-fluid">
<h1 style="background: red" class="text-primary">Hello, world!</h1>
</div>
<!-- Lesson 1: Container END-->
<!-- Lesson 2: Grid System in Bootstrap 4 -->
<div class="row"><!-- A row consist of 12 columns-->
<div class="col-lg-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-lg-4" style="background: blue">Hello World</div><!--merging 4 columns-->
<div class="col-lg-4" style="background: red">Hello World</div><!--merging 4 columns-->
</div>
<div class="row"><!-- A row consist of 12 columns-->
<div class="col-md-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-md-4" style="background: blue">Hello World</div><!--merging 4 columns-->
<div class="col-md-4" style="background: red">Hello World</div><!--merging 4 columns-->
</div>
<div class="row"><!-- A row consist of 12 columns-->
<div class="col-sm-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-sm-4" style="background: blue">Hello World</div><!--merging 4 columns-->
<div class="col-sm-4" style="background: red">Hello World</div><!--merging 4 columns-->
</div>
<div class="row"><!-- A row consist of 12 columns-->
<div class="col-md-6" style="background: red">Hello World</div><!--merging 6 columns-->
<div class="col-md-6" style="background: green">Hello World</div><!--merging 6 columns-->
</div>
<!-- Lesson 2: Grid System in Bootstrap 4 END-->
<!-- Lesson 3: Offset in Grid System in Bootstrap 4 -->
<div class="row"><!-- A row consist of 12 columns-->
<div class="col-lg-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-lg-4 offset-md-4" style="background: blue">Hello World</div><!--merging 4 columns-->
</div>
<div class="row"><!-- A row consist of 12 columns-->
<div class="col-lg-4 offset-md-4" style="background: red">Hello World</div><!--merging 4 columns-->
<div class="col-lg-4" style="background: green">Hello World</div><!--merging 4 columns-->
</div>
<!-- Lesson 3: Offset in Grid System in Bootstrap 4 END-->
<div style="background-color: black">
<!-- Lesson 4: Text formatting in Bootstrap 4 -->
<!-- Lesson 4.1: Text coloring in Bootstrap 4 -->
<p class="text-danger">Hello World</p>
<p class="text-success">Hello World</p>
<p class="text-info">Hello World</p>
<p class="text-warning">Hello World</p>
<p class="text-primary">Hello World</p>
<p class="text-secondary">Hello World</p>
<p class="text-muted">Hello World</p>
<p class="text-dark">Hello World</p>
<p class="text-light">Hello World</p>
<!-- Lesson 4.1: Text coloring in Bootstrap 4 END -->
<!-- Lesson 4.2: Text allignment in Bootstrap 4 -->
<p class="text-left">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-justify text-uppercase">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-justify text-lowercase">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-justify text-capitalize">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-right">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<p class="text-center">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<!-- Lesson 4.2: Text allignment in Bootstrap 4 END -->
<!-- Lesson 4.3: Backgrounds in Bootstrap 4 -->
<p class="text-center bg-danger">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-success">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-info">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-primary">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-secondary">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-warning">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-dark">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-light">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
<p class="text-center bg-white">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<br/>
</div>
<!-- Lesson 4.3: Backgrounds in Bootstrap 4 END -->
<!-- Lesson 4.4: Buttons in Bootstrap 4 -->
<button class="btn btn-primary">Home</button>
<button class="btn btn-secondary">Home</button>
<button class="btn btn-success">Home</button>
<button class="btn btn-info">Home</button>
<button class="btn btn-danger">Home</button>
<button class="btn btn-warning">Home</button>
<button class="btn btn-dark">Home</button>
<button class="btn btn-light">Home</button>
<button class="btn btn-default">Home</button>
<button class="btn btn-link">Home</button>
<br/>
<button class="btn-sm btn-primary">Home Small</button>
<button class="btn-lg btn-primary">Home large</button>
<br/>
<button class="btn btn-outline-primary">Home</button>
<button class="btn btn-outline-secondary">Home</button>
<button class="btn btn-outline-success active">Clicked Button</button>
<button class="btn btn-outline-info">Home</button>
<button class="btn btn-outline-danger">Home</button>
<button class="btn btn-outline-warning">Home</button>
<button class="btn btn-outline-dark">Home</button>
<button class="btn btn-outline-light">Home</button>
<button class="btn btn-outline-default disabled">click disabled</button>
<br/>
<br/>
<button class="btn btn-danger btn-block">Home</button><!--button in full horizontal width-->
<!-- Lesson 4.4.1: Buttons group in Bootstrap 4 END -->
<br/>
<br/>
<div class="btn-group">
<button class="btn btn-danger">Home</button>
<button class="btn btn-outline-success">Home</button>
<button class="btn btn-primary">Home</button>
</div>
<br/>
<br/>
<div class="btn-group-vertical">
<button class="btn btn-danger">Home</button>
<button class="btn btn-outline-success">Home</button>
<button class="btn btn-primary">Home</button>
</div>
<!-- Lesson 4.4.1: Buttons group in Bootstrap 4 END -->
<!-- Lesson 4.4: Buttons in Bootstrap 4 END -->
<!-- Lession 4.5: Typography in Bootstrap 4 -->
<p class="h1">Home</p>
<p class="h2">Home</p>
<p class="h3">Home</p>
<p class="h4">Home</p>
<p class="h5">Home</p>
<p class="h6">Home</p>
<br/>
<br/>
<p class="display-1">Home</p>
<p class="display-2">Home</p>
<p class="display-3">Home</p>
<p class="display-4">Home</p>
<!-- Lession 4.5: Typography in Bootstrap 4 END -->
<!-- Lession 4.6: Jumbotron & Badge in Bootstrap 4 -->
<!-- Badge -->
<button class="btn btn-danger"> Home <span class="badge badge-primary"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-success"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-info"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-secondary"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-dark"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-light"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-warning"> 2.0 </span></button>
<button class="btn btn-danger"> Home <span class="badge badge-default"> 2.0 </span></button>
<!-- Jumbotron to set specific background for header and footer-->
<div class="jumbotron jumbotron-fluid bg-primary">
<p>Home</p>
</div>
<!-- Lession 4.6: Jumbotron & Badge in Bootstrap 4 END -->
<!-- Lesson 4: Text formatting in Bootstrap 4 END -->
<!-- Lesson 5: image in Bootstrap 4 rounded-for round corner,img-thumbnail- for making the thumbnail boundary, d-block mx-auto- for keeping the image in center, img-fluid- for making the image as responsive -->
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<!-- Lesson 5: image in Bootstrap 4 END -->
<!-- Lesson 5: Alert in Bootstrap 4 -->
<p class="alert alert-danger">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">×</span></p>
<p class="alert alert-success">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">×</span></p>
<p class="alert alert-info">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">×</span></p>
<p class="alert alert-warning">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">×</span></p>
<p class="alert alert-primary">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">×</span></p>
<p class="alert alert-secondary">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">×</span></p>
<p class="alert alert-dark">Home <a href="#">Click Here</a> To continue <span class="close" data-dismiss="alert">×</span></p>
<!-- Lesson 5: Alert in Bootstrap 4 END -->
<!-- Lesson 6: Modal in Bootstrap 4 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#modal1">Open Modal</button>
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">Modal Header</div></div>
<div class="modal-body">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal">Close Modal</button>
</div>
</div>
</div>
</div>
<!-- Lesson 6: Modal in Bootstrap 4 END -->
<!-- Lesson 7: Collapse in Bootstrap 4 -->
<div class="container">
<a href="#pCollapse" data-toggle="collapse">Click here to Expand and Collapse</a>
<p class="collapse" id="pCollapse">Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello worldHello World Hello World Hello World v Hello World</p>
<br><br><br>
<button data-target="#paraCollapse" data-toggle="collapse">Click here to Expand and Collapse</button>
<p class="collapse" id="paraCollapse">Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello worldHello World Hello World Hello World v Hello World</p>
</div>
<!-- Lesson 7: Collapse in Bootstrap 4 END -->
<!-- Lesson 8: Cards in Bootstrap 4 -->
<div class="card" style="width: 300px; margin: 10px; float: left;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<div class="card-body">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
<div class="card-footer">footer</div>
</div>
<div class="card" style="width: 300px; margin: 10px; float: left;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<div class="card-body">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
<div class="card-footer">footer</div>
</div>
<div class="card" style="width: 300px; margin: 10px; float: left;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<div class="card-body">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
<div class="card-footer">footer</div>
</div>
<div class="card" style="width: 300px; margin: 10px; float: left;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<div class="card-body">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
<div class="card-footer">footer</div>
</div>
<!-- Lesson 8.1: Cards (Deck, Collapse, Group) in Bootstrap 4 -->
<!-- Lesson 8.1.1: Cards Group in Bootstrap 4 -->
<div class="container card-group">
<div class="card" style="width: 300px;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<div class="card-body bg-info">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
<div class="card-footer">footer</div>
</div>
<div class="card" style="width: 300px;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<div class="card-body bg-info">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
<div class="card-footer">footer</div>
</div>
<div class="card" style="width: 300px;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
<div class="card-body bg-info">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
<div class="card-footer">footer</div>
</div>
</div>
<!-- Lesson 8.1.1: Cards Group in Bootstrap 4 END -->
<!-- Lesson 8.1.2: Cards Collapse in Bootstrap 4 -->
<div class="card" style="width: 300px;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg" data-toggle="collapse" data-target="#msdBody"></image>
<div class="card-body bg-info collapse" id="msdBody">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
</div>
<div class="card" style="width: 300px;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg" data-toggle="collapse" data-target="#msdBodyTest"></image>
<div class="card-body bg-info collapse" id="msdBodyTest">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
</div>
<!-- Lesson 8.1.2: Cards Collapse in Bootstrap 4 END -->
<!-- Lesson 8.1.3: Cards deck in Bootstrap 4 -->
<div class="card-deck-wrapper">
<div class="card-deck">
<div class="card" style="width: 300px;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg">
</image>
<div class="card-body bg-info" id="msdBody">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
</div>
<div class="card" style="width: 300px;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg">
</image>
<div class="card-body bg-info" id="msdBody">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
</div>
<div class="card" style="width: 300px;">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg">
</image>
<div class="card-body bg-info" id="msdBody">
<h2 class="card-title">MS Dhoni</h2>
<h2 class="card-subtitle">indian Caption</h2>
<p class="card-text">This is sample text</p>
<a href="#" class="card-link">Read More...</a>
</div>
</div>
</div>
</div>
<!-- Lesson 8.1.3: Cards deck in Bootstrap 4 END -->
<!-- Lesson 8.1: Cards (Deck, Collapse, Group) in Bootstrap 4 END-->
<!-- Lesson 8: Cards in Bootstrap 4 END-->
<!-- Lesson 9: Table in Bootstrap 4 -->
<table class="table table-sm table-sm-responsive table-danger table-striped table-hover">
<tr>
<td>Name</td>
<td>Name</td>
<td>Name</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Name</td>
</tr>
<tr>
<td>Name</td>
<td>Name</td>
<td>Name</td>
</tr>
</table>
<!-- Lesson 9: Table in Bootstrap 4 END-->
<!-- Lesson 10: Nav & Tabs in Bootstrap 4 -->
<div class="container">
<ul class="nav nav-tabs"><!--nav-tabs similar of nav-pills-->
<li class="nav-item">
<a href="#one" class="nav-link active" data-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a href="#two" class="nav-link" data-toggle="tab">Contact Us</a>
</li>
<li class="nav-item">
<a href="#three" class="nav-link" data-toggle="tab">Login</a>
</li>
</ul>
<div class="tab-content">
<li class="tab-pane" id="one"> This is first tab.</li>
<li class="tab-pane" id="two">This is second tab.</li>
<li class="tab-pane" id="three">This is third tab.</li>
</div>
</div>
<!-- Lesson 10: Nav & Tabs in Bootstrap 4 END-->
<!-- Lesson 11: Navbar Responsive in Bootstrap 4 -->
<nav class="navbar navbar-expand-sm navbar-light bg-danger"><!--It does not come under any container class-->
<a href="#" class="navbar-brand">LOGO</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#cl" >
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="cl">
<span class="mr-auto"></span>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About US</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact US</a>
</li>
</ul>
</div>
</nav>
<!-- Lesson 11: Navbar Responsive in Bootstrap 4 END-->
<!-- Lesson 12: Breadcrumb in Bootstrap 4 -->
<div class="container">
<ul class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">About US</a>
</li>
<li class="breadcrumb-item">
<a href="#">Contact US</a>
</li>
</ul>
</div>
<!-- Lesson 12: Breadcrumb in Bootstrap 4 END-->
<!-- Lesson 13: Pagination in Bootstrap 4 -->
<div class="container">
<div class="pagination">
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
</div>
<div class="pagination pagination-lg">
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
</div>
<div class="pagination pagination-sm">
<li class="page-item"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
</div>
<div class="pagination pagination-sm">
<li class="page-item disabled"><a href="#" class="page-link">Previous</a></li>
<li class="page-item active"><a href="#" class="page-link">1</a></li>
<li class="page-item"><a href="#" class="page-link">2</a></li>
<li class="page-item"><a href="#" class="page-link">3</a></li>
<li class="page-item"><a href="#" class="page-link">4</a></li>
<li class="page-item"><a href="#" class="page-link">5</a></li>
<li class="page-item"><a href="#" class="page-link">Next</a></li>
</div>
</div>
<!-- Lesson 13: Pagination in Bootstrap 4 END-->
<!-- Lesson 14: Carousel Slider in Bootstrap 4 -->
<div class="">
<div id="car" class="carousel slide" data-ride="carousel" data-interval="2000">
<ol class="carousel-indicators">
<li class="" data-target="#car" data-slide-to="0" class="active"></li>
<li class="" data-target="#car" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<image class="rounded img-thumbnail img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
</div>
<div class="carousel-item">
<image class="img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
</div>
<div class="carousel-item">
<image class="img-fluid d-block mx-auto" src="bootstrap/images/Chrysanthemum.jpg"></image>
</div>
</div>
</div>
<a href="#car" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#car" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<!-- Lesson 14: Carousel Slider in Bootstrap 4 END-->
<!-- Lesson 15: Tooltip & Popover in Bootstrap 4 -->
<!--https://www.w3schools.com/bootstrap4/bootstrap_tooltip.asp-->
<div class="container">
<br>
<br>
<a href="#" data-toggle="tooltip" data-title="Sample Text" data-placement="bottom">
ToolTip Sample
</a>
<br>
<br>
<!--https://www.w3schools.com/bootstrap4/bootstrap_popover.asp-->
<a href="#" data-toggle="popover" data-title="Header" data-content="world Hello" data-placement="right">
Popover Sample
</a>
</div>
<!-- Lesson 15: Tooltip & Popover in Bootstrap 4 END-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="bootstrap/js/jquery-3.3.1.slim.min.js"></script>
<script src="bootstrap/js/popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
No comments:
Post a Comment