00:00
Boot-Strap :
<!DOCTYPR html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.color1{ background-color: bisque; }
.color2{ background-color: rgb(185, 185, 10); }
.color3{ background-color: rgb(249, 180, 43); }
.color4{ background-color: aqua; }
.color5{ background-color: cornflowerblue; }
.color6{ background-color: coral; }
.color7{ background-color: rgb(0, 249, 17); }
.color8{ background-color: blueviolet; }
.color9{ background-color: rgb(3, 155, 243); }
.color10{ background-color: rgb(9, 241, 144); }
.color11{ background-color: rgb(151, 20, 151); }
.color12{ background-color: rgb(101, 37, 240); }
.border1{ border: 2px solid red;}
.border2{ border: 2px solid blue;}
.border3{ border: 4px solid rgb(140, 7, 127);}
.container{margin-bottom: 10px; background-color: bisque;}
.container-FLUID{margin-top: 10px; }
.sset{ margin:0px;padding: 2px;font-style: italic;color: white;background-color: black;}
</style>
<title>BootStrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 01 - [container] & [container-fluid] -->
<span class="sset"> 01 - [container] & [container-fluid] </span>
<div class="container color1"> container (1140px) </div>
<div class="container-fluid color2"> container-fluid (100%) </div>
<!-- 02 - row [row] -->
<span class="sset">02 - row [row]</span>
<div class="container">
<div class="row color4"> row-1</div>
<div class="row color5"> row-2</div>
</div>
<!-- 03 - Grid, col-x
left two grid empty - [col-6] [col-4]
two equal grid of 6 - [col-6] [col-6]
last grid next line - [col-6] [col-7]
-->
<span class="sset">03 - Grid, col-x [col-6] [col-4]</span>
<div class="container">
<div class="row border1">
<div class="col-6 color6"> col-6 </div>
<div class="col-4 color4"> col-4 </div>
</div>
</div>
<!-- 06 - col only [col] -->
<span class="sset">06 - col only [col]</span>
<div class="container color3">
<div class="row border1">
<div class="col color1"> 1 col </div>
<div class="col color2"> 2 col </div>
<div class="col color3"> 3 col </div>
<div class="col color4"> 4 col </div>
<div class="col color5"> 5 col </div>
<div class="col color6"> 6 col </div>
<div class="col color7"> 7 col </div>
<div class="col color8"> 8 col </div>
<div class="col color9"> 9 col </div>
<div class="col color10"> 10 col </div>
<div class="col color11"> 11 col </div>
<div class="col color12"> 12 col </div>
<div class="col color6"> 13 col </div>
</div>
</div>
<!-- 07 - col only with line break, line break after 2 col, otherwise all in one row [w-100]-->
<span class="sset">07 - col only with line break, line break after 2 col, otherwise all in one row [w-100]</span>
<div class="container color3">
<div class="row border1">
<div class="col color1"> 1 col </div>
<div class="col color2"> 2 col </div>
<div class="w-100"></div>
<div class="col color3"> 3 col </div>
<div class="col color4"> 4 col </div>
<div class="w-100"></div>
<div class="col color5"> 5 col </div>
<div class="w-100"></div>
<div class="col color6"> 6 col </div>
<div class="col color7"> 7 col </div>
<div class="col color8"> 8 col </div>
</div>
</div>
<!-- 08 - col only with auto line break,[row row-cols-3] -->
<span class="sset">08 - col only with auto line break,[row row-cols-3]</span>
<div class="container">
<div class="row row-cols-3">
<div class="col color1"> col-1 </div>
<div class="col color2"> col-2 </div>
<div class="col color3"> col-3 </div>
<div class="col color4"> col-4 </div>
<div class="col color5"> col-5 </div>
<div class="col color6"> col-6 </div>
<div class="col color7"> col-7 </div>
<div class="col color8"> col-8 </div>
</div>
</div>
<!-- 09 - col with breakpoint,992px by 3 ,below stack on each other [col-lg] -->
<span class="sset">09 - col with breakpoint,992px by 3 ,below stack on each other [col-lg]</span>
<div class="container">
<div class="row ">
<div class="col-lg color1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="col-lg color2"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="col-lg color3"> took a galley of type and scrambled it to make a type specimen book. It h </div>
</div>
</div>
<!-- 10 - above using [row row-cols-3] -->
<span class="sset">10 - above using [row row-cols-3]</span>
<div class="container">
<div class="row ">
<div class="col color1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="col color2"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="col color3"> took a galley of type and scrambled it to make a type specimen book. It h </div>
</div>
</div>
<!-- 11 - grid with breakpoints [col-md-3]-->
<span class="sset">11 - grid with breakpoints [col-md-3]</span>
<div class="container">
<div class="row ">
<div class="col-md-8 color5">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has </div>
<div class="col-md-4 color7"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has </div>
</div>
<div class="row ">
<div class="col-md-3 color9">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="col-md-6 color10"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has </div>
<div class="col-md-5 color6"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has </div>
</div>
</div>
<!-- 12 - basic website using grid-->
<span class="sset">12 - basic website using grid</span>
<div class="container">
<div class="row">
<div class="col-12 color1" id="header">
<h1>Website name</h1>
</div>
</div>
<div class="row">
<div class="col-12 color-2" id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About us</a></li>
<li><a href="">Contact us</a></li>
<li><a href="">Privacy policy</a></li>
<li><a href="">Gallery</a></li>
</ul>
</div>
</div>
<div class="row ">
<div class="col-8 color3" id="content">
<h2> sub heading </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
<div class="col-4 color4" id="sidebar">
<li><a href="">Home</li>
<li><a href="">About us</li>
<li><a href="">Contact us</li>
<li><a href="">Privacy policy</li>
<li><a href="">Gallery</li>
</ul>
</div>
</div>
<div class="row " id="footer">
<div class="col-12 color5"> copyright@2020 </div>
</div>
</div>
<!-- 13 - above with break points[col-md-4]-->
<span class="sset">13 - above with break points[col-md-4]</span>
<div class="container">
<div class="row">
<div class="col-12 color1" id="header">
<h1>Website name</h1>
</div>
</div>
<div class="row">
<div class="col-12 color-2" id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About us</a></li>
<li><a href="">Contact us</a></li>
<li><a href="">Privacy policy</a></li>
<li><a href="">Gallery</a></li>
</ul>
</div>
</div>
<div class="row ">
<div class="col-md-8 color3" id="content">
<h2> sub heading </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
<div class="col-md-4 color4" id="sidebar">
<li><a href="">Home</li>
<li><a href="">About us</li>
<li><a href="">Contact us</li>
<li><a href="">Privacy policy</li>
<li><a href="">Gallery</li>
</ul>
</div>
</div>
<div class="row " id="footer">
<div class="col-12 color5"> copyright.2020 </div>
</div>
</div>
<!-- 14 - above with different break points[col-md-8][col-lg-4]-->
<span class="sset">14 - above with different break points[col-md-8][col-lg-4]</span>
<div class="container">
<div class="row">
<div class="col-12 color6" id="header">
<h1>Website name</h1>
</div>
</div>
<div class="row">
<div class="col-12 color-7" id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About us</a></li>
<li><a href="">Contact us</a></li>
<li><a href="">Privacy policy</a></li>
<li><a href="">Gallery</a></li>
</ul>
</div>
</div>
<div class="row ">
<div class="col-md-8 col-lg-4 color8" id="content">
<h2> sub heading </h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
<div class="col-lg-8 col-md-4 color9" id="sidebar">
<li><a href="">Home</li>
<li><a href="">About us</li>
<li><a href="">Contact us</li>
<li><a href="">Privacy policy</li>
<li><a href="">Gallery</li>
</ul>
</div>
</div>
<div class="row " id="footer">
<div class="col-12 color5"> copyright2020 </div>
</div>
</div>
<!-- 15 - offset , extra sapce ,[col-5 offset-3 ], [col-md-4 offset-md-2 ] -->
<span class="sset">15 - offset , extra sapce ,[col-5 offset-3 ], [col-md-4 offset-md-2 ]</span>
<div class="container border1">
<div class="row">
<div class="col-5 color6">this text is plan text </div>
</div>
<div class="row">
<div class="col-5 offset-3 color2">text with offset </div>
<div class="col-2 offset-1 color7">text with offset </div>
</div>
<div class="row">
<div class="col-md-4 offset-md-2 color8">col -md and offset -md, breakpoint </div>
<div class="col-md-3 offset-md-1 offset-lg-2 color9">col -md and offset -lg, breakpoint </div>
</div>
</div>
</div>
<!-- 16 - reordering first to last, [col order-last] [col order-first] -->
<span class="sset">16 - reordering first to last, [col order-last] [col order-first] </span>
<div class="container">
<div class="row">
<h7><b>order last and first</b></h7>
</div>
<div class="row">
<div class="col order-last color4">first</div>
<div class="col color2">second</div>
<div class="col color5">third</div>
<div class="col order-first color6">fourth</div>
</div>
</div>
<!-- 17 - above with breakpoints, [order-md-last] [order-md-first] -->
<span class="sset">17 - above with breakpoints, [order-md-last] [order-md-first]</span>
<div class="container">
<div class="row">
<div class="col order-md-last color1">first</div>
<div class="col color2">second</div>
<div class="col order-md-first color3">third</div>
<div class="col color4">fourth</div>
</div>
</div>
<!-- 18 - above with col grid [col-md-5 order-md-2] [col-md-2 order-md-3] -->
<span class="sset">18 - above with col grid [col-md-5 order-md-2] [col-md-2 order-md-3]</span>
<div class="container">
<div class="row">
<div class="col-md-5 order-md-2 color10">first</div>
<div class="col-md-2 order-md-3 color11">second</div>
<div class="col-md-5 order-md-4 color12">third</div>
</div>
</div>
<!-- 19 - above with muliple breakpoints [col-md-5 order-md-2 order-sm-2] -->
<span class="sset">19 - above with muliple breakpoints [col-md-5 order-md-2 order-sm-2]</span>
<div class="container">
<div class="row">
<div class="col-md-5 order-md-2 order-sm-2 color6">first</div>
<div class="col-md-2 order-md-3 order-sm-4 color7">second</div>
<div class="col-md-5 order-md-4 order-sm-3 color8">third</div>
</div>
</div>
<!-- 20 - above practice -->
<span class="sset">20 - above practice </span>
<div class="container">
<div class="row">
<h7>responsive design using order </h7>
</div>
<div class="row">
<div class="col-md-8 order-md-3 color1">
<h1>this is text</h1>
<p>हो। गए, उनका एक समय में बड़ा नाम था। पूरे देश में तालाब बनते थे बनाने वाले भी पूरे देश में थे। कहीं यह विद्या जाति के विद्यालय | सिखाई जाती थी तो कहीं यह जात
से हट कर एक विशेष पांत भी जाती थी। बनाने वाले लोग कहीं एक जगह बसे मिलते थे तो कहीं -घूम कर इस काम को करते थे। I 국 घम गजधर एक सुन्दर शब्द है, तालाब
बनाने वालों को आदर के साथ याद करने के लिए। राजस्थान के कुछ भागों में यह शब्द आज भी बाकी है। गजधर यानी जो गज को धारण करता है। और गज वही जो नापने के
काम आता है। लेकिन फिर भी समाज ने इन्हें तीन हाथ की लोहे की छड़ लेकर घूमने वाला मिस्त्री नहीं माना। गजधर जो समाज को गहराई को नाप ले - उसे ऐसा दर्जा दिया गया है।
गजधर वास्तुकार थे। गांव-समाज हो या नगर-समाज - उसके नव निर्माण की, रख-रखाव की ज़िम्मेदारी गजधर निभाते थे। </p>
</div>
<div class="col-md-4 order-md-2 color10">
<ol>
<li>about us</li>
<li>hello</li>
<li>contact us</li>
<li>policy</li>
</ol>
</div>
</div>
</div>
<!-- 21 - nesting col -->
<span class="sset">21 - nesting col </span>
<div class="container color5">
<div class="row color6">
<div class="col-md-6 color2">
<div class="row">
<div class="col-md-6 color3"> first col </div>
<div class="col-md-6 color4">second col</div>
</div>
<div class="col-md-6 color2"> third</div>
</div>
</div>
</div>
<!-- 22 - nesting - nesting col -->
<span class="sset">22 - nesting - nesting col</span>
<div class="container">
<div class="row">
<div class="col-md-8 color4">
<div class="row">
<div class="col-md-6 color3"> first heading</div>
<div class="col-md-6 color2">
<div class="row">
<div class="col-md-3 color1">hello</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 23 - margin auto, centers the element horizontally - [col-md-2 m-auto] -->
<span class="sset">23 - margin auto, centers the element horizontally - [col-md-2 m-auto] </span>
<div class="container color7">
<div class="row">
<div class="col-md-2 m-auto color4">margin auto</div>
<div class="col-md-2 color6">no margin</div>
</div>
</div>
<!-- 24 - margin end, (LTR), "end" refers - right side,(RTL), "end" refers left side. [col-md-2 me-auto]-->
<span class="sset">24 - margin end, (LTR), "end" refers - right side, (RTL), "end" refers left side. [col-md-2 me-auto]</span>
<div class="container color1">
<div class="row">
<div class="col-md-2 me-auto color2">margin end v5.0</div>
<div class="col-md-2 color7">simple</div>
</div>
</div>
<!-- 25 - margin with breakpoints, [col-md-2 m-lg-auto]-->
<span class="sset">25 - margin with breakpoints, [col-md-2 m-lg-auto]</span>
<div class="container color1">
<div class="row">
<div class="col-md-2 m-lg-auto color3">margin with breakpoint</div>
<div class="col-md-2 color4">simple</div>
</div>
</div>
<!-- 26 - margin start with #, [col-md-2 ms-3]-->
<span class="sset">26 - margin with numbers, [col-md-2 ms-3]</span>
<div class="container color1">
<div class="row">
<div class="col-md-2 ms-3 color2">margin with number</div>
<div class="col-md-2 color3">simple</div>
</div>
</div>
<!-- 27 - margin top with numbers, [col-md-2 mt-3]
margin bottom [col-md-2 mb-3]
with breakpoint [col-md-2 mt-lg-3]
negative margin [col-md-2 me-n5] -->
<span class="sset">27 - margin top with numbers, [col-md-2 mt-3]</span>
<div class="container color1">
<div class="row">
<div class="col-md-2 mt-3 color2">margin top with number</div>
<div class="col-md-2 color3">simple</div>
</div>
</div>
<!-- 28 - padding , [col-md-3 p-5]-->
<span class="sset">28 - padding , [col-md-3 p-5]</span>
<div class="container color1">
<div class="row">
<div class="col-md-3 p-5 color2"> all side padding</div>
<div class="col-md-2 ps-4 color3">start</div>
<div class="col-md-2 pe-5 color4">end</div>
<div class="col-md-2 pt-4 color5">top</div>
<div class="col-md-2 pt-0 color6">zero</div>
</div>
</div>
<!-- 29 - padding with breakpoints, [col-md-3 p-md-5]-->
<span class="sset">29 - padding with breakpoints, [col-md-3 p-md-5]</span>
<div class="container color1">
<div class="row">
<div class="col-md-3 p-md-5 color2"> all side padding</div>
<div class="col-md-2 ps-md-4 color3">start</div>
<div class="col-md-2 pe-md-5 color4">end</div>
<div class="col-md-2 pt-md-4 color5">top</div>
<div class="col-md-2 pt-md-0 color6">zero</div>
</div>
</div>
<!-- 30 - padding on row , [row p-md-5]-->
<span class="sset">30 - padding on row , [row p-md-5]</span>
<div class="container color1">
<div class="row p-md-5">
<div class="col-md-3 p-5 color2"> all side padding</div>
<div class="col-md-2 ps-4 color3">start</div>
<div class="col-md-2 pe-5 color4">end</div>
<div class="col-md-2 pt-4 color5">top</div>
<div class="col-md-2 pt-0 color6">zero</div>
</div>
</div>
<!-- 31 - horizontal align ,aligns the columns to the end (right side in left-to-right (LTR) layouts) of the row.
right side - [row justify-content-end]
center side - [row justify-content-center]
between col - [row justify-content-between]
around col - [row justify-content-around]
start(left) - [row justify-content-start]
with breakpoints - [row justify-content-lg-around]
-->
<span class="sset">31 - horizontal align</span>
<div class="container color1">
<div class="row justify-content-end">
<div class="col-md-3 color2"> first</div>
<div class="col-md-3 color5"> second</div>
<div class="col-md-3 color4"> third</div>
</div>
</div>
<!-- 32 - vertical align , check if one col has more text than other.
top side - [row align-items-start]
bottom side - [row align-items-end]
center - [row align-items-center]
same height - [row align-items-stretch]
each column text align to their baseline - [row align-items-baseline]
with breakpoints - [row align-items-lg-center]
-->
<span class="sset">32 - vertical align</span>
<div class="container color1">
<div class="row align-items-start">
<div class="col-md-2 color2"> dummy text ever since the 1500s, when an unknown </div>
<div class="col-md-2 color3"> dustry. Lorem Ipsum has </div>
<div class="col-md-2 color4"> It has </div>
</div>
</div>
<!-- 33 - self align , अगर row की हाइट है और केवल किसी एक col पर अलाइन करना हो.
top align - [col-md-3 align-self-start]
bottom align - [col-md-3 align-self-end]
center align - [col-md-3 align-self-center]
with breakpoint - [col-md-3 align-self-lg-center pink]
-->
<span class="sset">33 - self align , अगर row की हाइट है और केवल किसी एक col पर अलाइन करना हो</span>
<div class="container color1">
<div class="row" style="height:200px;">
<div class="col-md-3 color2"> default text ever since the 1500s, when an unknown </div>
<div class="col-md-3 align-self-center color5"> dustry. Lorem Ipsum has </div>
<div class="col-md-5 align-self-end color3"> some text here</div>
</div>
</div>
<!-- 34 - [row align-items-start] with [col-md-3 align-self-center pink] -->
<span class="sset">34 - [row align-items-start] with [col-md-3 align-self-center pink]</span>
<div class="container color1">
<div class="row align-items-start" style="height:200px;">
<div class="col-md-3 color2"> default text ever since the 1500s, when an unknown </div>
<div class="col-md-3 align-self-center color3"> dustry. Lorem Ipsum has </div>
<div class="col-md-5 color6"> some text here</div>
</div>
</div>
<!-- 35 - column को रिवर्स या row को column में बदलना
row to be stacked vertically in reverse order - [row flex-row-reverse]
Creates a flex container with a vertical direction - [row flex-column]
prevents the flex items from wrapping - [row flex-nowrap]
new lines will be placed before the previous ones - [row flex-wrap-reverse]
[it take up the remaining space within the flex container] - [col flex-fill silver]
-->
<div class="container">
<div class="row flex-row-reverse">
<div class="col-md-3 color1"> <h1> Col-1 </h1>default text ever </div>
<div class="col-md-3 color2"> <h1> Col-2 </h1>default text ever </div>
<div class="col-md-3 color3"> <h1> Col-3 </h1>default text ever </div>
<div class="col-md-3 color4"> <h1> Col-4 </h1>default text ever </div>
</div>
</div>
<!-- 36 - display
sit next to each other horizontally but retain block-level styling - [p-3 d-inline-block]
above with breakpoint - [p-3 d-lg-inline-block pink]
display none - [col-md-3 d-none green]
display hides on mobile - [col-md-3 d-none d-sm-block green]
display show on mobile - [col-md-3 d-block d-sm-none green]
-->
<div class="container color1">
<div class="p-3 d-inline-block color4 ">
<h2>col-a</h2>
<p> this is a pragrapth </p>
</div>
<div class="p-3 d-inline-block color5">
<h2>col-b</h2>
<p> this is a pragrapth </p>
</div>
</div>
<!-- 37 - creates a flex container, child elements default flexible and arranging in a row.
[d-flex] -->
<div class="container color1">
<div class="d-flex" style ="border:3px solid blue">
<div class= "color2 p-3">Col A </div>
<div class= "color3 p-3">Col B </div>
<div class= "color4 p-3">Col C </div>
</div>
</div>
<!-- 38 - display flex with column [d-flex flex-column]-->
<div class="container color1">
<div class="d-flex flex-column" style ="border:3px solid blue">
<div class= "color2 p-3">Col A </div>
<div class= "color3 p-3">Col B </div>
<div class= "color4 p-3">Col C </div>
</div>
</div>
<!-- 39 display flex with column and reverse [d-flex flex-column-reverse] -->
<div class="container color1">
<div class="d-flex flex-column-reverse" style ="border:3px solid blue">
<div class= "color2 p-3">Col A </div>
<div class= "color3 p-3">Col B </div>
<div class= "color4 p-3">Col C </div>
</div>
</div>
<!-- 40 display flex order [d-flex flex-column] -->
<div class="container color1">
<div class="d-flex flex-column" style ="border:3px solid blue">
<div class= "order-3 color2 p-3">Col A </div>
<div class= "order-1 color3 p-3">Col B </div>
<div class= "order-2 color4 p-3">Col C </div>
</div>
</div>
<!-- 41 display item on print [col-md-3 d-none d-print-block] -->
<div class="container color1">
<div class="row">
<div class="col-md-3 color2">
<h2>col-a</h2>
this is a pragrapth
</div>
<div class="col-md-3 d-none d-print-block color3">
<h2>col-b</h2>
this is a pragrapth
</div>
<div class="col-md-3 color4">
<h2>col-c</h2>
this is a pragrapth
</div>
<div class="col-md-3 color5">
<h2>col-d</h2>
this is a pragrapth
</div>
</div>
</div>
<!-- 42 hide item while print [col-md-3 d-print-none]-->
<div class="container color1">
<div class="row">
<div class="col-md-3 color1">
<h2>col-a</h2>
this is a pragrapth
</div>
<div class="col-md-3 d-print-none color1">
<h2>col-bb</h2>
this is a pragrapth
</div>
<div class="col-md-3 color1">
<h2>col-c</h2>
this is a pragrapth
</div>
<div class="col-md-3 orange">
<h2>col-d</h2>
this is a pragrapth
</div>
</div>
</div>
<!-- 43 float-left,right [color6 w-25 float-start] , w-25 is the width set to 25% -->
<div class="container border3 color1">
<div class="color6 w-25 float-start">
paragraph float start
</div>
<div class="color4 w-25 float-end">
paragraph float end
</div>
</div>
<!--44 clear fix float div = [container clearfix]
with clear fix - [color5 w-25 float-start]
with breakpoints - [color6 w-25 float-md-start]
change position - [color7 w-25 float-md-start float-lg-end]
div updown - [color8 w-25 float-md-none float-lg-end]
-->
<div class="container clearfix">
<div class="color5 w-25 float-start">
this is a pragrapth
</div>
<div class="color6 w-25 float-end">
this is a pragrapth
</div>
</div>
<!--45 float with height div =[container clearfix] [style="height:300px]
with height - [color7 w-25 h-25 float-md-none float-lg-end]
view port - [color7 w-25 vh-25 float-lg-end]
view port + width - [color7 vw-100 vh-75 float-lg-end]
-->
<div class="container clearfix" style="height:300px">
<div class="color7 w-25 h-25 float-md-none float-lg-end">
this start pragrapth
</div>
<div class="green w-25 h-50 float-md-none float-lg-start">
this end pragrapth
</div>
</div>
<!-- 46 position
fixed top(browser) - [color5 w-25 fixed-top]
fixed bottom - [color5 w-25 fixed-bottom]
fixed top + bottom - [color5 w-25 fixed-top fixed-bottom]
sticky-top(content) - [color6 w-25 sticky-top]
-->
<div class="container">
<div class="clearfix" style="border:3px solid blue">
<div class="color5 w-25 fixed-top">
this is a pragrapth
</div>
<div class="green w-50 float-end height:1000px">
a<br>b<br>c<br>e<br>d<br>e<br>f<br>g<br>h<br>i<br>
<br>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q<br>r<br>
s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>
s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>
s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>
s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>
</div>
</div>
</div>
<!-- 47 overflow
if text acceed , horizontal bar - [overflow-auto]
over flow text hide - [overflow-hidden]
-->
<div class="container">
<div class="clearfix" style="border:3px solid blue">
<div class="color9 w-50 float-end overflow-auto" style="height:50px">
a<br>b<br>c<br>e<br>d<br>e<br>f<br>g<br>h<br>i<br>
<br>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q<br>r<br>
s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>
s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>
s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>
s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>
</div>
</div>
</div>
<!-- 48 - padding-gutters, remove all default padding which is 15px [row g-0] -->
<div class="container">
<div class="row g-0">
<div class="col-md-4" ><div class="lblue">first block</div></div>
<div class="col-md-4" ><div class="green">second block</div></div>
<div class="col-md-4" ><div class="orange">third block</div></div>
</div>
</div>
<!-- 49 - padding-y axis in col, top bottom space around text
on y axis - [py-5]
on both axis - [py-2] [px-3]
margrin x axis - [mx-5]
margrin y axis - [my-5]
padding with breakpoints - [lblue px-lg-5]
margin with breakpoints - [lblue mx-lg-5]
negative margin with breakpoints- [lblue mx-lg-n5]
-->
<div class="container">
<div class="row">
<div class="col-md-4" ><div class="lblue py-5">first block</div></div>
<div class="col-md-4" ><div class="green">second block</div></div>
<div class="col-md-4" ><div class="orange">third block</div></div>
</div>
</div>
<!-- 50 - project -->
<!-- 51 - colors
background colours - [bg-white]
[bg-danger]
[bg-primary]
[bg-secondary]
[bg-success]
[bg-warning]
[bg-danger]
[bg-info]
text color - [text-danger]
-->
<div class="container">
<div class="row">
<div class="col-md-12 bg-danger" ><h1 >css color </h1></div>
</div>
<div class="row">
<div class="col-md-3 bg-secondary text-white" ><h4>secondary color </h4></div>
<div class="col-md-3 bg-success text-danger" ><h4>negative margin </h4></div>
<div class="col-md-3 bg-warning text-info" ><h4>negative margin </h4></div>
<div class="col-md-3 bg-primary text-secondary" ><h4>negative margin </h4></div>
</div>
</div>
<!-- 52 - text formatting
display heading classes - [display-1]
- [display-2]
- [display-3]
smallest - [display-4]
-->
<div class="container">
<h6 class="mt-3 mb-5 text-center display-4">Text Formatting Classes</h6>
</div>
<!-- 53 - paragraph
lead is a Bootstrap class that makes the paragraph stand out by increasing the
font size and the line height slightly, making it look more prominent.
-->
<div class="container">
<div class="row">
<div class="col-md-4 py-3 mx-auto">
<p class="lead">Lorem ipsum dolor architecto porro.</p>
</div>
</div>
</div>
<!-- 54 - user select
[user-select]
[user-select-all]
[user-select-none]
[user-select-auto]
-->
<div class="container">
<h6 class="mt-3 mb-5 text-center display-4">Text Formatting Classes</h6>
<div class="row">
<div class="col-md-4 py-3 ">
<h3 class="text-danger">Sub Heading </h3>
<p class="lead user-select-none">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima
beatae sapiente excepturi dolorum recusandae. Obcaecati fuga quaerat
perspiciatis itaque totam veniam architecto porro.</p>
</div>
</div>
</div>
<!-- 55 list style Classes -->
<!-- list-unstyled -->
<div class="container">
<h6 class="mt-3 mb-5 text-center display-3">Text Formatting Classes</h6>
<div class="row">
<div class="col-md-4 ">
<ul class="list-unstyled">
<li>Orange</li>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
</ul>
</div>
</div>
</div>
<!-- 56 - list-inline -->
<div class="container">
<h6 class="mt-3 mb-5 text-center display-2">Text Formatting Classes</h6>
<div class="row">
<div class="col-md-4 ">
<ul class="list-inline">
<li class="list-inline-item">Orange</li>
<li class="list-inline-item">Apple</li>
<li class="list-inline-item">Banana</li>
<li class="list-inline-item">Grapes</li>
</ul>
</div>
</div>
</div>
<!-- 57 - blockquote -->
<div class="container">
<div class="row">
<div class="col-12">
<blockquote>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possi
praesentium veritatis illum!"</p>
<footer class="blockquote-footer">-- Yahoo Baba</footer>
</blockquote>
</div>
</div>
</div>
<!-- 58 button-color
link as button - [btn btn-primary]
button - [btn btn-danger]
size - [btn btn-primary btn-lg]
active - [btn btn-primary btn-lg active]
disable - [btn btn-secondary btn-sm disabled]
block button - [btn btn-primary btn-block]
-->
<div class="container">
<div class="row">
<div class="col py-3">
<a href="" class="btn btn-primary">Submit</a>
<a href="" class="btn btn-secondary">Submit</a>
<a href="" class="btn btn-success">Submit</a>
<button type="button" class="btn btn-danger">Submit</button>
<button type="button" class="btn btn-warning">Submit</button>
<a href="" class="btn btn-outline-info">Submit</a>
<a href="" class="btn btn-outline-dark">Submit</a>
</div>
</div>
</div>
<!-- 59 - group-button
group - [btn-group]
size group button - [btn-group btn-group-lg]
button group vertical - [btn-group-vertical]
-->
<div class="container">
<div class="row">
<div class="col py-3">
<div class="btn-group">
<button type="button" class="btn btn-primary">Click</button>
<button type="button" class="btn btn-success">Click</button>
<button type="button" class="btn btn-danger">Click</button>
</div>
</div>
</div>
</div>
<!-- 60 - button toolbar [btn-group me-3] -->
<div class="container">
<h2 class="mt-3 mb-5 text-center">toolbar</h2>
<div class="row">
<div class="col py-3">
<div class="btn-toolbar">
<div class="btn-group me-3">
<button type="button" class="btn btn-primary">Click</button>
<button type="button" class="btn btn-success">Click</button>
<button type="button" class="btn btn-danger">Click</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info">Click</button>
<button type="button" class="btn btn-secondary">Click</button>
</div>
</div>
</div>
</div>
</div></br></br>
<!-- 61 - icon menu-->
<div class="container">
<h2 class="mt-3 mb-5 text-center">toolbar</h2>
<div class="row">
<div class="col py-3">
<div class="btn-toolbar">
<div class="btn-group me-3">
<button type="button" class="btn btn-primary"><i class="fa-solid fa-house"></i></button>
<button type="button" class="btn btn-success">Click</button>
<button type="button" class="btn btn-danger">Click</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info">Click</button>
<button type="button" class="btn btn-secondary">Click</button>
</div>
</div>
</div>
</div>
</div></br></br>
<!-- 62 - nesting icon menu-->
<div class="container">
<h2 class="mt-3 mb-5 text-center">toolbar</h2>
<div class="row">
<div class="col py-3">
<div class="btn-toolbar">
<div class="btn-group me-3">
<button type="button" class="btn btn-primary"><i class="fa-solid fa-house"></i></button>
<button type="button" class="btn btn-success">Click</button>
<button type="button" class="btn btn-danger">Click</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info">Click</button>
<button type="button" class="btn btn-secondary">Click</button>
</div>
</div>
</div>
</div>
</div>
<!-- 63 - list-group -->
<div class="container">
<h2 class="mt-3 mb-5 text-center">Bootstrap List Group Classes</h2>
<div class="row">
<div class="col-sm-5 py-3">
<ul class="list-group">
<li class="list-group-item">List Item One</li>
<li class="list-group-item">List Item Two</li>
<li class="list-group-item">List Item Three</li>
<li class="list-group-item">List Item Four</li>
<li class="list-group-item">List Item Five</li>
</ul>
</div>
</div>
</div>
<!-- 64 - without outer border -->
<div class="container">
<h2 class="mt-3 mb-5 text-center">without outer border</h2>
<div class="row">
<div class="col-sm-5 py-3">
<ul class="list-group list-group-flush">
<li class="list-group-item">List Item One</li>
<li class="list-group-item">List Item Two</li>
<li class="list-group-item">List Item Three</li>
<li class="list-group-item">List Item Four</li>
<li class="list-group-item">List Item Five</li>
</ul>
</div>
</div>
</div>
<!-- 65 - active and disabled -->
<div class="container">
<h2 class="mt-3 mb-5 text-center">active and disabled</h2>
<div class="row">
<div class="col-sm-5 py-3">
<ul class="list-group list-group-flush">
<li class="list-group-item disabled">List Item One</li>
<li class="list-group-item">List Item Two</li>
<li class="list-group-item active">List Item Three</li>
</ul>
</div>
</div>
</div>
<!-- 66 - list with color -->
<div class="container">
<h2 class="mt-3 mb-5 text-center">list with color</h2>
<div class="row">
<div class="col-sm-5 py-3">
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-primary">List Item One</li>
<li class="list-group-item list-group-item-success">List Item Two</li>
<li class="list-group-item list-group-item-danger">List Item Three</li>
</ul>
</div>
</div>
</div>
<!-- 67 - horizontal list with breakpoints -->
<div class="container">
<h2 class="mt-3 mb-5 text-center">horizontal list with breakpoints </h2>
<div class="row">
<div class="col-sm-7 py-3">
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item list-group-item-primary">List Item One</li>
<li class="list-group-item list-group-item-success">List Item Two</li>
<li class="list-group-item list-group-item-danger">List Item Three</li>
<li class="list-group-item list-group-item-danger">List Item Three</li>
</ul>
</div>
</div>
</div>
<!-- 68 - list with clickable with color -->
<div class="container">
<h2 class="mt-3 mb-5 text-center">list with clickable with color</h2>
<div class="row">
<div class="col-sm-7 py-3">
<div class="list-group">
<a href="" class="list-group-item list-group-item-action list-group-item-primary">List Item One</a>
<a href="" class="list-group-item list-group-item-action">List Item Two</a>
<a href="" class="list-group-item list-group-item-action list-group-item-success">List Item Three</a>
<a href="" class="list-group-item list-group-item-action">List Item Four</a>
</div>
</div>
</div>
</div>
<!-- 69 - without outer border -->
<div class="container">
<h2 class="mt-3 mb-5 text-center">without outer border</h2>
<div class="row">
<div class="col-sm-5 py-3">
<ul class="list-group list-group-flush">
<li class="list-group-item">List Item One</li>
<li class="list-group-item">List Item Two</li>
<li class="list-group-item">List Item Three</li>
<li class="list-group-item">List Item Four</li>
<li class="list-group-item">List Item Five</li>
</ul>
</div>
</div>
</div>
<!-- 70 - active and disabled -->
<div class="container">
<h2 class="mt-3 mb-5 text-center">active and disabled</h2>
<div class="row">
<div class="col-sm-5 py-3">
<ul class="list-group list-group-flush">
<li class="list-group-item disabled">List Item One</li>
<li class="list-group-item">List Item Two</li>
<li class="list-group-item active">List Item Three</li>
</ul>
</div>
</div>
</div>
<!-- 71 - list with color -->
<div class="container">
<h2 class="mt-3 mb-5 text-center">list with color</h2>
<div class="row">
<div class="col-sm-5 py-3">
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-primary">List Item One</li>
<li class="list-group-item list-group-item-success">List Item Two</li>
<li class="list-group-item list-group-item-danger">List Item Three</li>
</ul>
</div>
</div>
</div>
<!-- 72 - horizontal list with breakpoints -->
<div class="container">
<h2 class="mt-3 mb-5 text-center">horizontal list with breakpoints </h2>
<div class="row">
<div class="col-sm-7 py-3">
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item list-group-item-primary">List Item One</li>
<li class="list-group-item list-group-item-success">List Item Two</li>
<li class="list-group-item list-group-item-danger">List Item Three</li>
<li class="list-group-item list-group-item-danger">List Item Three</li>
</ul>
</div>
</div>
</div>
<!-- 73 - list with clickable with color -->
<div class="container">
<h2 class="mt-3 mb-5 text-center">list with clickable with color</h2>
<div class="row">
<div class="col-sm-7 py-3">
<div class="list-group">
<a href="" class="list-group-item list-group-item-action list-group-item-primary">List Item One</a>
<a href="" class="list-group-item list-group-item-action">List Item Two</a>
<a href="" class="list-group-item list-group-item-action list-group-item-success">List Item Three</a>
<a href="" class="list-group-item list-group-item-action">List Item Four</a>
</div>
</div>
</div>
</div>
<!-- 74 - simple table -->
<div class="container">
<h2 class="mt-3 mb-3 text-center">Bootstrap Table Classes</h2>
<div class="row ">
<div class="col-md-6 py-3">
<table>
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>ramkumar@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td>salmankhan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Anil</td>
<td>Kapoor</td>
<td>anilkapoor@mail.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 75 - row padding with bottom border -->
<div class="container">
<h2 class="mt-3 mb-3 text-center">Bootstrap Table Classes</h2>
<div class="row ">
<div class="col-md-6 py-3">
<table class="table">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>ramkumar@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td>salmankhan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Anil</td>
<td>Kapoor</td>
<td>anilkapoor@mail.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 76 - table with dark mode -->
<div class="container">
<h2 class="mt-3 mb-3 text-center">Bootstrap Table Classes</h2>
<div class="row ">
<div class="col-md-6 py-3">
<table class="table table-dark">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>ramkumar@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td>salmankhan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Anil</td>
<td>Kapoor</td>
<td>anilkapoor@mail.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 77 - alternative color -->
<div class="container">
<h2 class="mt-3 mb-3 text-center">Bootstrap Table Classes</h2>
<div class="row ">
<div class="col-md-6 py-3">
<table class="table table-dark table-striped">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>ramkumar@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td>salmankhan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Anil</td>
<td>Kapoor</td>
<td>anilkapoor@mail.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 78 - style heading only -->
<!-- table-dark -->
<!-- table-light -->
<div class="container">
<h2 class="mt-3 mb-3 text-center">Bootstrap Table Classes</h2>
<div class="row ">
<div class="col-md-6 py-3">
<table class="table ">
<thead class="table-dark">
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>ramkumar@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td>salmankhan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Anil</td>
<td>Kapoor</td>
<td>anilkapoor@mail.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 79 - table hover -->
<div class="container">
<h2 class="mt-3 mb-3 text-center">Bootstrap Table Classes</h2>
<div class="row ">
<div class="col-md-6 py-3">
<table class="table table-hover">
<thead class="table-dark">
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>ramkumar@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td>salmankhan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Anil</td>
<td>Kapoor</td>
<td>anilkapoor@mail.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 80 - remove borders -->
<div class="container">
<h2 class="mt-3 mb-3 text-center">Bootstrap Table Classes</h2>
<div class="row ">
<div class="col-md-6 py-3">
<table class="table table-hover table-borderless">
<thead class="table-dark">
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>ramkumar@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td>salmankhan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Anil</td>
<td>Kapoor</td>
<td>anilkapoor@mail.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 81 - all around borders -->
<div class="container">
<h2 class="mt-3 mb-3 text-center">Bootstrap Table Classes</h2>
<div class="row ">
<div class="col-md-6 py-3">
<table class="table table-hover table-bordered">
<thead class="table-dark">
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>ramkumar@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td>salmankhan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Anil</td>
<td>Kapoor</td>
<td>anilkapoor@mail.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- 82 - padding up down remove -->
<div class="container">
<h2 class="mt-3 mb-3 text-center">Bootstrap Table Classes</h2>
<div class="row ">
<div class="col-md-6 py-3">
<table class="table table-hover table-bordered table-sm">
<thead class="table-dark">
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>ramkumar@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td>salmankhan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Anil</td>
<td>Kapoor</td>
<td>anilkapoor@mail.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- table row different color -->
<div class="container">
<h2 class="mt-3 mb-3 text-center">Bootstrap Table Classes</h2>
<div class="row ">
<div class="col-md-6 py-3">
<table class="table table-hover table-bordered table-sm">
<thead class="table-dark">
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>ramkumar@mail.com</td>
</tr>
<tr class="table-warning">
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td>salmankhan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td class="bg-warning">Anil</td>
<td>Kapoor</td>
<td>anilkapoor@mail.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- responsive table -->
<div class="container">
<h2 class="mt-3 mb-3 text-center">table-responsive</h2>
<div class="row ">
<div class="col-md-6 py-3">
<div class="table-responsive">
<table class="table ">
<thead class="table-dark">
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>ramkumar@mail.com</td>
</tr>
<tr class="table-warning">
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td>salmankhan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td class="bg-warning">Anil</td>
<td>Kapoor</td>
<td>anilkapoor@mail.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- responsive with breakpoint -->
<div class="container">
<h2 class="mt-3 mb-3 text-center">table-responsive md</h2>
<div class="row ">
<div class="col-md-6 py-3">
<div class="table-responsive-md">
<table class="table ">
<thead class="table-dark">
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>ramkumar@mail.com</td>
</tr>
<tr class="table-warning">
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td>salmankhan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td class="bg-warning">Anil</td>
<td>Kapoor</td>
<td>anilkapoor@mail.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- pagination -->
<ul class="pagination pagination-sm justify-content-center">
<!-- pagination-sm -->
<!-- pagination-lg -->
<!-- justify-content-center -->
<!-- justify-content-left -->
<!-- justify-content-right -->
<div class="container">
<h2 class="mt-3 mb-3 text-center">Bootstrap Pagination Classes</h2>
<div class="row ">
<div class="col-md-6 py-3 mx-auto">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>ramkumar@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td>salmankhan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Anil</td>
<td>Kapoor</td>
<td>anilkapoor@mail.com</td>
</tr>
<tr>
<td>4</td>
<td>Hrithik</td>
<td>Roshan</td>
<td>hrithikroshan@mail.com</td>
</tr>
</tr>
<tr>
<td>5</td>
<td>Anushka</td>
<td>Sharma</td>
<td>anushkasharma@mail.com</td>
</tr>
</tbody>
</table>
<nav>
<ul class="pagination pagination-sm justify-content-center">
<li class="page-item">
<a href="" class="page-link disabled">Previous</a>
</li>
<li class="page-item">
<a href="" class="page-link active">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">Next</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- breadcrumb -->
<div class="container">
<h2 class="mt-3 mb-3 text-center">Bootstrap Pagination Classes</h2>
<div class="row ">
<div class="col-md-6 py-3 mx-auto">
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="">Home</a></li>
<li class="breadcrumb-item"><a href="">Students</a></li>
<li class="breadcrumb-item active">Recordsk</li>
</ol>
</nav>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>ramkumar@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td>salmankhan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Anil</td>
<td>Kapoor</td>
<td>anilkapoor@mail.com</td>
</tr>
<tr>
<td>4</td>
<td>Hrithik</td>
<td>Roshan</td>
<td>hrithikroshan@mail.com</td>
</tr>
</tr>
<tr>
<td>5</td>
<td>Anushka</td>
<td>Sharma</td>
<td>anushkasharma@mail.com</td>
</tr>
</tbody>
</table>
<nav>
<ul class="pagination pagination-sm justify-content-center">
<li class="page-item">
<a href="" class="page-link disabled">Previous</a>
</li>
<li class="page-item">
<a href="" class="page-link active">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">Next</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- gutter x axis -->
<div class="container">
<div class="row gx-2">
<div class="col-md-6">
<div class="bg-info">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
<div class="col-md-6">
<div class="bg-danger">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
</div>
</div></br></br>
<!-- gutter y axis -->
<div class="container">
<div class="row gy-2">
<div class="col-md-6">
<div class="bg-info">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
<div class="col-md-6">
<div class="bg-danger">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
<div class="col-md-6">
<div class="bg-danger">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
<div class="col-md-6">
<div class="bg-danger">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
</div>
</div>
<!-- gutter on xy axis -->
<div class="container">
<div class="row g-2">
<div class="col-md-6">
<div class="bg-info">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
<div class="col-md-6">
<div class="bg-danger">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
<div class="col-md-6">
<div class="bg-danger">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
<div class="col-md-6">
<div class="bg-danger">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
</div>
</div>
<!-- gutter with breakpoints -->
<div class="container">
<div class="row g-lg-2">
<div class="col-md-6">
<div class="bg-info">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
<div class="col-md-6">
<div class="bg-danger">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
<div class="col-md-6">
<div class="bg-danger">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
<div class="col-md-6">
<div class="bg-danger">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
</div>
</div>
<!-- line height -->
<!-- <div class="lh-lg"> -->
<!-- <div class="lh-1"> -->
<!-- <div class="lh-sm"> -->
<!-- <div class="lh-base"> -->
<div class="container">
<div class="row g-lg-2">
<div class="col-md-6">
<div class="bg-info text-white lh-sm">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
<div class="col-md-6">
<div class="bg-danger text-white lh-lg">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
<div class="col-md-6">
<div class="bg-success text-white lh-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
<div class="col-md-6">
<div class="bg-primary text-white lh-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore
temporibus officiis voluptate quod vero consectetur repudiandae
perspiciatis placeat veritatis! Alias, cum, repellendus. Sequi,
</div>
</div>
</div>
</div>
<!-- simple table with border color-->
<div class="container">
<h2 class="mt-3 mb-3 text-center">Bootstrap Table Classes</h2>
<div class="row ">
<div class="col-md-6 py-3">
<table class="table table-bordered border-danger">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>ramkumar@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td>salmankhan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>Anil</td>
<td>Kapoor</td>
<td>anilkapoor@mail.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- table-align -->
<div class="container">
<h2 class="mt-3 mb-3 text-center">Bootstrap Table Classes</h2>
<div class="row ">
<div class="col-md-6 py-3">
<table class="table table-bordered border-danger">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore temporibus officiis voluptate quod vero consectetur repudiandae</td>
</tr>
<tr class="align-middle">
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore temporibus officiis voluptate quod vero consectetur repudiandae</td>
</tr>
<tr class="align-bottom">
<td>3</td>
<td>Anil</td>
<td>Kapoor</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore temporibus officiis voluptate quod vero consectetur repudiandae</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- table-align baseline -->
<div class="container">
<h2 class="mt-3 mb-3 text-center">Bootstrap Table Classes</h2>
<div class="row ">
<div class="col-md-6 py-3">
<table class="table table-bordered border-danger">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ram</td>
<td>Kumar</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore temporibus officiis voluptate quod vero consectetur repudiandae</td>
</tr>
<tr class="align-baseline">
<td>2</td>
<td>Salman</td>
<td>Khan</td>
<td><h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore temporibus officiis voluptate quod vero consectetur repudiandae</h3></td>
</tr>
<tr class="align-bottom">
<td>3</td>
<td>Anil</td>
<td>Kapoor</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore temporibus officiis voluptate quod vero consectetur repudiandae</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- conntainer reakpoints -->
<style>
.container, .container-lg{
border:1px solid black;
}
.row{
border:0px solid blue;
}
</style>
</head>
<body>
<div class="container-lg">
hello world
</div>
<body>
<!-- <input type="text" class="form-control form-control-lg"> -->
<!-- <input type="text" class="form-control form-control-sm"> -->
<!-- <input type="file" class="form-control-file"> -->
<!-- <input type="range" class="form-control-range"> -->
<!-- radio -->
<!-- <input type="radio" class="form-check-input" name="gender" id="maleradio"> -->
<!-- <label for="maleradio" class="form-check-label">Male</label> -->
<!-- upload -->
<!-- <input type="file" class="form-control-file"> -->
<div class="container">
<h2 class="py-3 text-center">Bootstrap 4 Form Classes</h2>
<div class="row py-3">
<div class="col-md-6">
<!-- large form -->
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control form-control-lg">
</div>
<!-- small form -->
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control form-control-sm">
</div>
<!-- read only -->
<div class="form-group">
<label>Email</label>
<input type="text" value="rajat@gmail.com" class="form-control-plaintext" readonly>
</div>
<!-- small text below the password -->
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control">
<small class="form-text text-muted"> Your password must be 8-20 Characters long. </small>
</div>
<div class="form-group">
<label>Country</label>
<select name="" id="" class="form-control">
<option value="">India</option>
<option value="">Pakistan</option>
<option value="">Bangladesh</option>
<option value="">Nepal</option>
</select>
</div>
<div class="form-group">
<label>Message</label>
<textarea name="" class="form-control"></textarea>
</div>
</div>
<!-- upload boxs -->
<div class="col-md-6">
<div class="form-group">
<label>File Upload</label>
<input type="file" class="form-control-file">
</div>
<div class="form-group">
<label>Amount</label>
<input type="range" class="form-control-range">
</div>
<!-- multiple select checkboxs -->
<div class="form-group">
<label>Hobbies</label>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="musicCheck">
<label for="musicCheck" class="form-check-label">Music</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="sportCheck">
<label for="sportCheck" class="form-check-label"> Sports</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="bookCheck" disabled>
<label for="bookCheck" class="form-check-label">Books</label>
</div>
</div>
<!-- radio buttons -->
<div class="form-group">
<label>Gender</label>
<div class="form-check">
<input type="radio" class="form-check-input" name="gender" id="maleradio">
<label for="maleradio" class="form-check-label">Male</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="gender" id="femaleradio">
<label for="femaleradio" class="form-check-label"> female</label>
</div>
</div>
</div>
</div>
</div>
<!-- form inline -->
<body>
<div class="container">
<h2 class="py-3 text-center">Bootstrap Inline & Horizontal Form Classes</h2>
<form class="row py-3">
<div class="col-md-4">
<label class="sr-only">User Name</label>
<input type="text" class="form-control" placeholder="User Name">
</div>
<div class="col-md-4">
<label class="sr-only">Password</label>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</form>
<!-- inline check box -->
<div class="row">
<div class="col py-3">
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="musicCheck">
<label for="musicCheck" class="form-check-label">Music</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="SportCheck">
<label for="SportCheck" class="form-check-label">Sport</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="bookCheck" disabled>
<label for="bookCheck" class="form-check-label">Book</label>
</div>
</div>
</div>
<!-- inline radio buttons -->
<div class="row">
<div class="col py-3">
<div class="form-check form-check-inline">
<input type="radio" name="gender" class="form-check-input" id="maleCheck">
<label for="maleCheck" class="form-check-label">Male</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" name="gender" class="form-check-input" id="femaleCheck">
<label for="femaleCheck" class="form-check-label">Female</label>
</div>
</div>
</div>
<!-- horizontal form -->
<div class="row">
<div class="col">
<form action="">
<div class="form-group row">
<label class="col-sm-2 col-form-label-lg py-2">
User Name
</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-lg">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label-sm">
Password
</label>
<div class="col-sm-10">
<input type="password" class="form-control">
</div>
</div>
<div class="row">
<div class="col">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- custom form -->
<div class="container mb-5">
<h2 class="py-3 text-center">Bootstrap 4 Custom Form Classes</h2>
<div class="row py-3">
<div class="col">
<select name="" class="custom-select mb-3">
<option value="">India</option>
<option value="">Pakistan</option>
<option value="">Bangladesh</option>
<option value="">Nepal</option>
<option value="">SriLanka</option>
</select>
<select name="" class="custom-select custom-select-lg mb-3">
<option value="">India</option>
<option value="">Pakistan</option>
<option value="">Bangladesh</option>
<option value="">Nepal</option>
<option value="">SriLanka</option>
</select>
<select name="" class="custom-select custom-select-sm mb-3">
<option value="">India</option>
<option value="">Pakistan</option>
<option value="">Bangladesh</option>
<option value="">Nepal</option>
<option value="">SriLanka</option>
</select>
<select name="" class="custom-select mb-3" multiple size="3">
<option value="">India</option>
<option value="">Pakistan</option>
<option value="">Bangladesh</option>
<option value="">Nepal</option>
<option value="">SriLanka</option>
</select>
</div>
<div class="col">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customcheckbox1">
<label class="custom-control-label" for="customcheckbox1">Music</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customcheckbox2">
<label class="custom-control-label" for="customcheckbox2">Sports</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customcheckbox3">
<label class="custom-control-label" for="customcheckbox3">Books</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" name="gender" class="custom-control-input" id="customcheckbox4">
<label class="custom-control-label" for="customcheckbox4">Male</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" name="gender" class="custom-control-input" id="customcheckbox5">
<label class="custom-control-label" for="customcheckbox5">Female</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customcheckbox6">
<label class="custom-control-label" for="customcheckbox6">Sports</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customcheckbox7">
<label class="custom-control-label" for="customcheckbox7">Music</label>
</div>
</div>
</div>
<div class="row py-3">
<div class="col">
<input type="range" class="custom-range">
</div>
<div class="col">
<div class="custom-file">
<input type="file" class="custom-file-input">
<label class="custom-file-label">Choose File</label>
</div>
</div>
</div>
<div class="row py-3">
<div class="col">
<div class="form-inline">
<div class="form-group">
<label class="sr-only">Enter name</label>
<input type="text" class="form-control is-valid" placeholder="Enter Username">
<div class="valid-feedback">Look Good!</div>
</div>
<div class="form-group mx-3">
<label class="sr-only">Enter Password</label>
<input type="password" class="form-control is-invalid" placeholder="Password">
<div class="invalid-feedback">Enter valid Password</div>
</div>
<button class="btn btn-primary">Login</button>
</div>
</div>
</div>
</div>
<!-- image-video -->
<div class="container mb-5">
<h2 class="py-3 text-center">Bootstrap Image & Video Classes</h2>
<div class="row py-3">
<div class="col-md-4">
<img src="road.jpg" class="img-fluid rounded-pill" alt="">
</div>
<div class="col-md-4">
<img src="road.jpg" class="img-fluid img-thumbnail" alt="">
</div>
<div class="col-md-4">
<figure class="figure">
<img src="road.jpg" class="figure-img img-fluid " alt="">
<figcaption class="figure-caption text-right">Some text goes here</figcaption>
</figure>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="embed-responsive embed-responsive-16by9"><!-- 16 by 9 screen , rectangle-->
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/ILVGJlsVg0g" frameborder="0"></iframe>
</div>
</div>
<div class="col-md-4">
<div class="embed-responsive embed-responsive-21by9"><!-- 21 by 9 screen -->
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/ILVGJlsVg0g" frameborder="0"></iframe>
</div>
</div>
<div class="col-md-4">
<div class="embed-responsive embed-responsive-4by3"><!-- 4 by 3 screen -->
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/ILVGJlsVg0g" frameborder="0"></iframe>
</div>
</div>
<div class="col-md-4">
<div class="embed-responsive embed-responsive-1by1"><!-- 1 by 1 screen , square-->
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/ILVGJlsVg0g" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
<!-- a card -->
<!-- subtite, links & headings -->
<div class="container">
<h2 class="py-2 text-center">Card : subtite, links & headings</h2>
<div class="row py-2">
<div class="col-md-6">
<div class="card mb-3 border-success text-success">
<!-- <img src="road.jpg" class="card-img-top" alt=""> -->
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<h5 class="card-subtitle text-muted">Subtitle </h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus
iste dicta soluta alias aspernatur similique consequatur.</p>
<a href="" class="card-link">Read more</a>
<a href="" class="card-link">Another Link</a>
</div>
</div>
</div>
</div>
</div>
<!-- borders -->
<div class="container">
<h2 class="py-2 text-center">Card : borders</h2>
<div class="row py-2">
<div class="col-md-6">
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- bg color -->
<div class="container">
<h2 class="py-2 text-center">Card : bg colors</h2>
<div class="row py-2">
<div class="col-md-6">
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
<!-- text alignment center, end, default -->
<div class="container">
<h2 class="py-2 text-center">Card : text alignment center, end, default </h2>
<div class="row py-2">
<div class="col-md-6">
<div class="card text-end" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
<!-- quotes -->
<div class="container">
<h2 class="py-2 text-center">Card : quotes </h2>
<div class="row py-2">
<div class="col-md-8">
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<!-- specials -->
<div class="container">
<h2 class="py-2 text-center">Card : specials </h2>
<div class="row py-2 justify-content-center">
<div class="col-md-8">
<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</div>
</div>
</div>
<!-- card with top image -->
<div class="container">
<h2 class="py-2 text-center">Card : card with top image</h2>
<div class="row py-2">
<div class="col-md-6">
<div class="card mb-3 border-success text-success">
<img src="road.jpg" class="card-img-top" alt="">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<h5 class="card-subtitle text-muted">Subtitle </h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus
iste dicta soluta alias aspernatur similique consequatur.</p>
<a href="" class="card-link">Read more</a>
<a href="" class="card-link">Another Link</a>
</div>
</div>
</div>
</div>
</div>
<!-- image with all corner round -->
<div class="container">
<h2 class="py-2 text-center">Card : image with all corner round</h2>
<div class="row py-2">
<div class="col-md-6">
<div class="card mb-3 border-success text-success">
<img src="road.jpg" class="card-img" alt="">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<h5 class="card-subtitle text-muted">Subtitle </h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus
iste dicta soluta alias aspernatur similique consequatur.</p>
<a href="" class="card-link">Read more</a>
<a href="" class="card-link">Another Link</a>
</div>
</div>
</div>
</div>
</div>
<!-- card with bottom image -->
<div class="container">
<h2 class="py-2 text-center"> Card : card with bottom image</h2>
<div class="row py-2">
<div class="col-md-6">
<div class="card mb-3 border-success text-success">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<h5 class="card-subtitle text-muted">Subtitle </h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus
iste dicta soluta alias aspernatur similique consequatur.</p>
<a href="" class="card-link">Read more</a>
<a href="" class="card-link">Another Link</a>
</div>
<img src="images/road.jpg" class="card-img-bottom" alt="">
</div>
</div>
</div>
</div>
<!-- nav links in header with text in footer -->
<div class="container">
<h2 class="py-2 text-center">Card : nav links in header with text in footer</h2>
<div class="row py-2">
<div class="col-md-6">
<div class="card mb-3">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a href="" class="nav-link">Link One</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Link Two</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Link Three</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Link Four</a>
</li>
</ul>
</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus
iste dicta soluta alias aspernatur similique consequatur.</p>
</div>
<div class="card-footer text-muted">Footer Goes Here</div>
</div>
</div>
</div>
</div>
<!-- with list group -->
<div class="container">
<h2 class="py-2 text-center">Card : with list group</h2>
<div class="row py-2">
<div class="col-md-4">
<div class="card">
<img src="road.jpg" class="card-img-top" alt="">
<ul class="list-group list-group-flush">
<li class="list-group-item">Lorem ipsum dolor.</li>
<li class="list-group-item">Lorem ipsum dolor.</li>
<li class="list-group-item">Lorem ipsum dolor.</li>
<li class="list-group-item">Lorem ipsum dolor.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- horizontal card -->
<div class="container">
<h2 class="py-2 text-center">Card : horizontal card</h2>
<div class="row py-2">
<div class="col-md-7">
<div class="card">
<div class="row no-gutters">
<div class="col-md-4">
<img src="road.jpg" class="card-img" alt="">
</div>
<div class="col-md-8">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis
voluptatibus iste dicta soluta alias aspernatur similique consequatur.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- image overlay -->
<div class="container">
<h2 class="py-2 text-center">Card : image overlay</h2>
<div class="row py-2">
<div class="col-md-4">
<div class="card text-white">
<img src="road.jpg" class="card-img" alt="">
<div class="card-img-overlay">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus
iste dicta soluta alias aspernatur similique consequatur.</p>
<button class="btn btn-primary">Read More</button>
</div>
</div>
</div>
</div>
</div>
<!-- simple card group -->
<div class="container">
<h2 class="py-2 text-center">Card : simple card group </h2>
<div class="row py-2">
<div class="col">
<div class="card-group">
<div class="card">
<img src="road.jpg" class="card-img-top" alt="">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus
iste dicta soluta alias aspernatur similique consequatur.</p>
</div>
</div>
<div class="card">
<img src="road.jpg" class="card-img-top" alt="">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing .</p>
</div>
</div>
<div class="card">
<img src="road.jpg" class="card-img-top" alt="">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio totam quis voluptatibus
iste dicta soluta alias aspernatur similique consequatur.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- card group with footer -->
<div class="container">
<h2 class="py-2 text-center">Card : card group with footer </h2>
<div class="row py-2">
<div class="col">
<div class="card-group">
<div class="card">
<img src="road.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="road.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="road.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- card group with 2 col -->
<div class="container">
<h2 class="py-2 text-center">Card : card group with 2 col </h2>
<div class="row row-cols-1 row-cols-md-2 g-4"> <!-- row-cols-1 = below md this will happen , can use row-cols-3, insted of -->
<div class="col">
<div class="card">
<img src="road.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="road.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="road.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="road.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</div>
<!-- card group with 3 col -->
<div class="container">
<h2 class="py-2 text-center">Card : card group with 3 col </h2>
<div class="row row-cols-1 row-cols-md-3 g-4"> <!-- row-cols-1 = below md this will happen , can use row-cols-3, insted of -->
<div class="col">
<div class="card">
<img src="road.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="road.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="road.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="road.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</div>
<!-- border shadow -->
<!-- border
border-top
border-bottom
border-left
border-right
border-0
border-top-0
border-bottom-0
border-left-0
border-right-0
-->
<div class="container mb-3">
<h2 class="py-1 text-center">Bootstrap Border & Shadow Classes</h2>
<div class="row py-3">
<div class="col-md-4 mx-auto">
<div id="box" class="border shadow-none p-5">
shadow none
</div>
</div>
</div>
</div>
<div class="container mb-3">
<h2 class="py-1 text-center">Bootstrap Border & Shadow Classes</h2>
<div class="row py-3">
<div class="col-md-4 mx-auto">
<div id="box" class="border shadow-sm p-5">
shadow-sm
</div>
</div>
</div>
</div>
<div class="container mb-3">
<h2 class="py-1 text-center">Bootstrap Border & Shadow Classes</h2>
<div class="row py-3">
<div class="col-md-4 mx-auto">
<div id="box" class="border shadow-lg p-5">
shadow-lg
</div>
</div>
</div>
</div>
<div class="container mb-3">
<h2 class="py-1 text-center">Bootstrap Border & Shadow Classes</h2>
<div class="row py-3">
<div class="col-md-4 mx-auto">
<div id="box" class="border border-top p-5">
Lorem ipsum dolor sit amet,
</div>
</div>
</div>
</div>
<div class="container mb-3">
<h2 class="py-1 text-center">Bootstrap Border & Shadow Classes</h2>
<div class="row py-3">
<div class="col-md-4 mx-auto">
<div id="box" class="border border-bottom p-5">
border at bottom ,
</div>
</div>
</div>
</div>
<div class="container mb-3">
<h2 class="py-1 text-center">Bootstrap Border & Shadow Classes</h2>
<div class="row py-3">
<div class="col-md-4 mx-auto">
<div id="box" class="border border-bottom-0 p-5">
border all side except bottom
</div>
</div>
</div>
</div>
<div class="container mb-3">
<h2 class="py-1 text-center">Bootstrap Border & Shadow Classes</h2>
<div class="row py-3">
<div class="col-md-4 mx-auto">
<div id="box" class="border border-top-0 p-5">
border all side except top
</div>
</div>
</div>
</div>
<div class="container mb-3">
<h2 class="py-1 text-center">Bootstrap Border & Shadow Classes</h2>
<div class="row py-3">
<div class="col-md-4 mx-auto">
<div id="box" class="border border-primary p-5">
border with color
</div>
</div>
</div>
</div>
<div class="container mb-3">
<h2 class="py-1 text-center">Bootstrap Border & Shadow Classes</h2>
<div class="row py-3">
<div class="col-md-4 mx-auto">
<div id="box" class="border border-danger border-bottom-0 p-5">
border with color
</div>
</div>
</div>
</div>
<!-- media twitter page -->
<!-- using div -->
<div class="container mb-5">
<h2 class="py-3 text-center">Media Object : using div </h2>
<div class="row py-5">
<div class="col">
<div class="media">
<img src="user.png" class="mr-3 align-self-center">
<div class="media-body">
<h5 class="mt-0">Ram Kumar</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores possimus autem exercitationem
illum deleniti asperiores </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure sequi, dolores repellat sapiente
enim sit non, est ad cum ullam.</p>
</div>
</div>
<div class="media">
<img src="user.png" class="mr-3">
<div class="media-body">
<h5 class="mt-0">Ram Kumar</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores possimus autem exercitationem
illum deleniti asperiores </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure sequi, dolores repellat sapiente
enim sit non, est ad cum ullam.</p>
</div>
</div>
<div class="media">
<img src="user.png" class="mr-3">
<div class="media-body">
<h5 class="mt-0">Ram Kumar</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores possimus autem exercitationem
illum deleniti asperiores </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure sequi, dolores repellat sapiente
enim sit non, est ad cum ullam.</p>
</div>
</div>
</div>
</div>
</div>
<!-- using list -->
<div class="container mb-5">
<h2 class="py-3 text-center">Media Object : using list </h2>
<div class="row py-5">
<div class="col">
<ul class="list-unstyled">
<li class="media mb-3">
<img src="user.png" class="mr-3">
<div class="media-body">
<h5 class="mt-0">Ram Kumar</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores possimus autem exercitationem
illum deleniti asperiores </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure sequi, dolores repellat sapiente
enim sit non, est ad cum ullam.</p>
</div>
</li>
<li class="media mb-3">
<img src="user.png" class="mr-3">
<div class="media-body">
<h5 class="mt-0">Yahoo Baba</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores possimus autem exercitationem
illum deleniti asperiores
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- badges and notifications with numers -->
<!-- Badge with heading -->
<div class="container mb-5">
<h2 class="py-2 text-center">Badge : with heading</h2>
<div class="row py-2">
<div class="col">
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
</div>
</div>
</div>
<!-- Badge with notification -->
<div class="container mb-5">
<h2 class="py-2 text-center">Badge : with notification</h2>
<div class="row py-2">
<div class="col">
<button type="button" class="btn btn-primary">
Notifications <span class="badge bg-secondary">4</span>
</button>
</div>
</div>
</div>
<!-- Badge with Positioned -->
<div class="container mb-5">
<h2 class="py-2 text-center">Badge : with Positioned</h2>
<div class="row py-2">
<div class="col">
<button type="button" class="btn btn-primary position-relative">
Inbox
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
</div>
</div>
</div>
<!-- Badge with Positioned Dot -->
<div class="container mb-5">
<h2 class="py-2 text-center">Badge : with Positioned Dot </h2>
<div class="row py-2">
<div class="col">
<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button>
</div>
</div>
</div>
<!-- Badge with bg color-->
<div class="container mb-5">
<h2 class="py-2 text-center">Badge : with bg color</h2>
<div class="row py-2">
<div class="col">
<span class="badge bg-success">Success</span>
</div>
</div>
</div>
<!-- Badge with pill shape-->
<div class="container mb-5">
<h2 class="py-2 text-center">Badge : with pill shape</h2>
<div class="row py-2">
<div class="col">
<span class="badge rounded-pill bg-danger">Danger</span>
</div>
</div>
</div>
<!-- Bootstrap Badge Classes -->
<div class="container mb-5">
<h2 class="py-2 text-center">Bootstrap Badge Classes</h2>
<div class="row py-2">
<div class="col">
<button class="btn btn-primary">Notifications
<span class="badge badge-light">5</span>
</button>
<a href="" class="badge badge-info">Read More</a>
<a href="" class="badge badge-pill badge-danger p-2">Read More</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, consequatur est illum numquam repellat
<span class="badge bg-warning"> sapiente sed dicta saepe</span>, velit, consectetur deserunt culpa aliquid ducimus itaque ullam eaque
distinctio earum. Sint, autem, ab. Tenetur illum, magni, voluptatum vitae atque provident ea nemo
alias minus dolorem nam ipsum, maiores dolores deleniti at.
</p>
</div>
</div>
</div>
<!-- progress bar -->
<div class="container mb-5">
<h2 class="py-3 text-center">Bootstrap Progress Bar Classes</h2>
<div class="row py-5">
<div class="col">
<h5>First</h5>
<div class="progress mb-3">
<div class="progress-bar" style="width: 20%" >20%</div>
</div>
<h5>Second</h5>
<div class="progress mb-3">
<div class="progress-bar progress-bar-striped bg-danger" style="width: 30%" >30%</div>
</div>
<h5>Third</h5>
<div class="progress mb-3" style="height : 2px">
<div class="progress-bar progress-bar-striped bg-danger" style="width: 40%" >40%</div>
</div>
<h5>Fourth</h5>
<div class="progress mb-3" style="height : 25px">
<div class="progress-bar progress-bar-striped bg-info" style="width: 30%" ></div>
</div>
<h5>Fifth</h5>
<div class="progress mb-3">
<div class="progress-bar" style="width: 25%">25%</div>
<div class="progress-bar bg-danger" style="width: 15%">15%</div>
<div class="progress-bar bg-info" style="width: 18%">18%</div>
</div>
<h5>Sixth</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 50%">
50%
</div>
</div>
</div>
</div>
</div>
<!-- spinner -->
<div class="container">
<h2 class="py-3 text-center">Bootstrap Spinners Classes</h2>
<div class="row py-5">
<div class="col">
<div class="spinner-border text-primary m-5 float-right">
<span class="sr-only">Loading..</span>
</div>
</div>
</div>
<div class="row py-5">
<div class="col">
<div class="spinner-border text-primary">
<span class="sr-only">Loading..</span>
</div>
<div class="spinner-border text-success"></div>
<div class="spinner-border spinner-border-sm text-danger"></div>
<div class="spinner-border text-info" style="width:80px;height: 80px;"></div>
</div>
</div>
<div class="row py-5">
<div class="col">
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow spinner-grow-sm text-danger"></div>
</div>
</div>
<div class="row py-5">
<div class="col">
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading...
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
</button>
</div>
</div>
</div>
<!-- jumotron -->
<style>
.container{
border: 5px solid #000;
margin-bottom:3px;
}
#second-jumbo{
background : url(road.jpg) no-repeate;
}
</style>
<div class="container mb-3">
<h2 class="py-3 text-center">Bootstrap Jumbotron</h2>
<div class="row py-3">
<div class="col">
<div class="jumbotron bg-danger text-white">
<h1 class="display-4">Hello World</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda architecto maxime velit aspernatur
fuga quia qui ducimus necessitatibus natus nihil.</p>
<hr class="mr-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, nostrum minus ipsa ipsam. Ratione, eligendi?</p>
<a href="" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
</div>
<div class="jumbotron jumbotron-fluid" id="second-jumbo">
<div class="container">
<h1 class="display-4">Hello World</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda architecto maxime velit aspernatur fuga quia
qui ducimus necessitatibus natus nihil.</p>
</div>
</div>
</body>
</html>
