Bootstrap Important

1.
<div class="w-100"></div> -------------for breake div
2.offset--for gap in between col in between class

3.order
<div class="container">
<div class="row">





<div class="col-md-8 orange order-md-2">

<h1>Heading</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Necessitatibus repellat laborum nihil amet
incidunt atque, rerum ullam vero quas quidem. Amet modi dolorem
laborum est iusto nesciunt deleniti
eligendi alias voluptate eaque maxime officia esse non
molestias vel cupiditate facilis ex
eveniet aut quas est nostrum ut similique mollitia inventore
voluptatibus minus at aperiam.</p>
</div>
<div class="col-md-4 pink order-md-1" >

<ul>
<li><a href="">About</a></li>
<li><a href="">contacts us</a></li>
<li><a href="">home</a></li>
<li><a href="">services</a></li>
<li><a href="">portfolio</a></li>
</ul>
</div>
</div>
</div>
4.margin classes:-------------------------------------also use row and container

.m-auto left right margin justlike auto center-----
.mr-auto
mb-3 margin botton.
mt-2 margin top.
ml-5 margin left.
mr-4 margin right.
m-5 margin both side margin.
0=0px
1=0.25rem
2=0.50rem
3=1rem
4=1.5rem
5=3rem
breakpoint margin.
.m-xl
.m-lg
.m-md
.m-sm
for left
.ml-xl
nagative margin--
.m-n5
.m-md-n3
5.paddong----------------------------------------also use row and container

.p-2 every side margin.
.pr-2 right
.pl-2 left
.pt-2 top
.pb-2 bottom
breakpoint margin.
.p-xl-5
.p-lg-2
.p-md-2
.p-sm-3
.pb-md-5
6.horizontal
alignment................................................................
<div class="row justify-content-start " > default
<div class="row justify-content-end " >
<div class="row justify-content-center">
<div class="row justify-content-between">
<div class="row justify-content-around">
breakpoint.
<div class="row justify-content-md-center">
<div class="row justify-content-xl-center">
<div class="row justify-content-sm-center">
7.vertical
alignment...................................................................
<div class="row align-items-stretch"> default
<div class="row align-items-start">
<div class="row align-items-end">
<div class="row align-items-center">
<div class="row align-items-baseline">
breakpoint.
<div class="row align-items-stretch"> default
<div class="row align-items-md-start">
<div class="row align-items-lg-end">
<div class="row align-items-sm-center">
<div class="row align-items--xl-baseline">
8.Align
content----------------------------------------------------------------------------
-------
<div class="row align-content-end" style="height: 400px;">
<div class="row align-content-start" style="height: 400px;">
<div class="row align-content-center" style="height: 400px;">
<div class="row align-content-between" style="height: 500px;">
<div class="row align-content-around" style="height: 500px;">
breakpoint
<div class="row align-content-md-end" style="height: 400px;">
<div class="row align-content-lg-start" style="height: 400px;">
<div class="row align-content-sm-center" style="height: 400px;">
<div class="row align-content-xl-between" style="height: 500px;">
<div class="row align-content-sm-around" style="height: 500px;">
9.vertical-aline----------------------------------------------------------------
for class
<div class="col-4 align-self-start pink">
<div class="col-3 align-self-center pink">
<div class="col-3 align-self-stretch pink"> default
for row and class--

<div class="row align-items-end" style="height: 500px;">
<div class="col-2 align-self-auto red"> ---------------inherit with parent row
10.Flex
direction........................................................................
<div class="row flex-row-reverse "> reverse
<div class="row flex-column "> coloum wise show
<div class="row flex-column-reverse ">
<div class="row flex-nowrap "> if my col is above 12 then not going another
line showing same line end of the contaner
<div class="row flex-wrap-reverse ">
<div class="col flex-fill green"> use in class --use for div full width --it's
work when we use col without size
breakpoint
<div class="row flex-md-row-reverse ">
<div class="row flex-xl-column ">
.11.Display
display:none------------d-none-----d-xl-none
display:inline----------d-inline---d-md-inline
display:inline-block----d-inline-block
display:block-----------d-block
display:table:----------d-table
display:table-cell------d-table-cell
display:table-row-------d-table-row
display-flex------------d-flex
example----
ex1..
<div class="p-2 d-inline-block green">
<p> Lorem ipsum dolor sit </p>
</div>
<div class="p-2 d-inline-block pink">
<p> Lorem ipsum dolo </p>
</div>
</div>
ex2..
<div class="col blue d-block d-md-none ">
print--
d-print-none
d-print-inline
d-print-inline-block
d-print-block
d-print-table
d-print-table-row
d-print-table-cell
d-print-flex
d-print-inline-flex
ex--
<div class="col green d-none d-print-block"> --only showing when print
12.flot.............................
float-left
float-right
clearfix--use for divhight fit
w-25----width25%
w-50----witdth50%
w-auto--autowidth
mw-100--maximum-width 100
vw-100
min-vw-100---auto increse width when content increse
h-25
h-50
h-auto
mh-100
vh-100
min-vh-100----auto increse height when content increse
14.position------------------------------------------------------------------------
---------------
position:relative--------position-relative
position:absolute;-------position-absolute
position:static;---------position-static
position:fixed;----------position-fixed
position-sticky----------position-sticky
fixed-top
fied-bottom
sticky-top
15.padding-margin2
Y-axis padding....py-(0-5)
X-axis padding----px-(0-5)
Y-axis margin....my-(0-5)
X-axis margin----mx-(0-5)
nagetive margin---mx-n5
no-gutters-----use for bydefalt margin padding 0
16.color & background

colors..........................................................................
*background color classes...
.bg-primary --blue
.bg-secondary --gray
.bg-success --green
.bg-danger --red
.bg-warning --yellow
.bg-info --sky
.bg-light--light
.bg-dark --black
.bg-white -- white
.bg-transparent
*text color classess-------
.text-primary --blue
.text-secondary --gray
.text-success --green
.text-danger --red
.text-warning --yellow
.text-info --sky
.text-light--light
.text-dark --black
.text-white -- white
.text--body ---
.text-muted --light-gray
.text-white-50 ---white 50%
TEXT-ALINE....................................
text-left
text-right
text-center
text-justify --left and right eqal size
text-xl-left
text-lg-left
text-sm-left
text-lower
text-uppercase
text-capitalize
font-weidth-bold
font-weigth-lighter
font-weigth-normal
for ankertag..
text-decoration-none ----underline remove
text-reset-------text color parent
text-nowrap
text-truncate overflow text doted
text-break long text breake
text &list style---------------------------------------------------------------

display1 --for text big
lead --for text big
list style.......
.list-unstyled for list style none
<ul class="list-inline">
<li class="list-inline-item"> .....list inline
<blockquote>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam </p>
.....author written
<footer class="blockquote-footer"> --written by Yahoo Baba</footer>
</blockquote>
user-select-all ....after click auto select text

user-select-none ....user select disable
user-select-auto ---default
button.............................................................................
..............
btn
btn--primary
btn-secondary
btn-danger
<a href="" class="btn btn-primary">submit</a>

<a href="" class="btn btn-secondary">submit</a>
<button type="button" class="btn btn-danger">submit</button>
<button type="button" class="btn btn-danger">submit</button>
<a href="" class="btn btn-outline-info">submit</a>
<a href="" class="btn btn-outline-dark">submit</a>
btn-lg
btn-sm
btn-md
ex-
<a href="" class="btn btn-primary btn-lg">submit</a>
<a href="" class="btn btn-secondary btn-sm">submit</a>
btn-block big size like big div

ex-
<a href="" class="btn btn-primary btn-block ">submit</a>
btn-active ---dark color set

<a href="" class="btn btn-primary active">submit</a>
btn-disabled ---light color

<button type="button" class="btn btn-danger" disabled >submit</button>
<a href="" class="btn btn-danger disabled">submit</a>
btn-group....................................................
btn-group
btn-group-lg
btn-group-sm
ex-
<div class="btn-group btn-group-lg">
<a href="" class="btn btn-danger">submit</a>
<a href="" class="btn btn-warning">submit</a>
</div>
vertical group..
ex-
<div class="btn-group-vertical">
</div>
btn-toolbar... two group

ex
<div class="btn-toolbar">
<div class="btn-group mr-3">
</div>
<div class="btn-group">
</div>
/div>
icon in between buttom

ex-
<a href="" class="btn btn-primary"><i class="fa fa-facebook"></i></a>
list group
classes...........................................................................
<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>
</ul>
<ul class="list-group list-group-flush">

</ul>
color..
<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-danger">List item two </li>
</ul>
ul horizontal class.........
<ul class="list-group list-group-horizontal">
</ul>
clicable item...1
list-group-item-action use-for underline remove and full div clickable
<div class="list-group">
<a class="list-group-item list-group-item-action">List item one </a>
<a class="list-group-item list-group-item-action">List item two </a>
</div>
clicable item...real example

<div class="list-group list-group-">
<a href="" class="list-group-item list-group-item-action"> 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-primary list-group-item-action">
s am, mus bhree</a>
<a href="" class="list-group-item list-group-item-action"> list item four</a>
<a href="" class="list-group-item list-group-item-danger list-group-item-action">
list item five</a>
<a href="" class="list-group-item list-group-item-action"> list item six</a>
</div>
drop down item....................................

<div class="row">
<div class="col-12 py-3">
<button type="button" class="btn btn-danger ">submit</button>
<button type="button" class="btn btn-danger ">submit</button>
<a href="" class="btn btn-danger dropdown-toggle" data-
toggle="dropdown">submit</a>
<div class="dropdown-menu">
<a href="" class="dropdown-item">web design</a>
<a href="" class="dropdown-item">web Devlopment</a>
</div>
</div>
</div>
</div>
</div>
TABLE
CLASSES............................................................................
.................................
i.for-below border
<table class="table">
</table>
ii.for-dark color..
<table class="table table-dark">
</table>
iii.for dark color and borderless

<table class="table table-dark table-borderless">
</table>
iv.for light-gray-color and white color..

<table class="table table-striped">
</table>
v.for table head dark

<thead class="thead-dark">
</thead>
vi.for table head light color

<thead class="thead-light">
</thead>
x.for full side border....

<table class="table table-bordered">
</table>
xi.table hover
<table class="table table-hover">
</table>
xii.for table padding height diecress..

<table class="table table-sm">
</table>
for table color....................

table-light
table-primary
table-secondary
for table responsive

<table class="table table-responsive">
</table>
for breakpoint
pagination & breadcrumb

classes................................................................
pagination...
for--next page move when click
<nav>
<ul class="pagination">
<li class="page-item"><a href="#" class="page-link"> Previous </a></li>
<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">Next </a></li>
</nav>
for click link blue(active)color and previous link dark-light(disabled)
<nav>
<ul class="pagination">
<li class="page-item active"><a href="#" class="page-link"> Previous </a></li>
<li class="page-item disabled"><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">Next </a></li>
</nav>
for size..
pagination pagination-sm
pagination pagination-lg
breadcrumbs class...............................
for-page path create
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home </a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
</nav>
custom form
classess...........................................................................
.......
custom selectbox..
<div class="row ">
<div class="col-7 mb-5 ">
<select name="" class="custom-select custom-select-lg">
<option value="">INDIA</option>
<option value="">PAKISTHAN</option>
<option value="">BANGLADESH</option>
<option value="">NEPAL</option>
<option value="">CHINA</option>
</select>
<select name="" class="custom-select custom-select-sm" multiple size="3">
<option value="">INDIA</option>
<option value="">PAKISTHAN</option>
<option value="">BANGLADESH</option>
<option value="">NEPAL</option>
<option value="">CHINA</option>
</select>
</div>
</div>
range......................................
<div class="col-7 mb-5 ">
<input type="range" class="custom-range">
<label for="" class="custom-file-label">Choose file</label>
</div>
chose file.................................
<div class="custom-file">
<input type="file" class="custom-file-input">
<label for="" class="custom-file-label">Choose file</label>
</div>
checkbox..................................
<div class="col">
<div class="customcontrol custom-checkbox">
<input type="checkbox" class="custom-control-input "
id="custom-checkbox1">
<label for="custom-checkbox1" class="custom-control-
label">music</label>
</div>
<input type="checkbox" class="custom-control-input" id="custom-
checkbox2">
label">sports</label>
</div>
<input type="checkbox" class="custom-control-input" id="custom-
checkbox3">
label">books</label>
</div>
</div>
radio..................................................
<div class="col">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" name="gender" class="custom-control-input "
id="supriyo">
<label for="supriyo" class="custom-control-label">Male</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" name="gender" class="custom-control-input"
id="supriyo2">
<label for="supriyo2" class="custom-control-label">female</label>
</div>
</div>
switchcase.............................................
<div class="col">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input "
id="supriyo3">
<label for="supriyo3"
class="custom-control-label">sports</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input"
id="supriyo4">
<label for="supriyo4"
class="custom-control-label">music</label>
</div>
</div>
username& password......................................
<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-tooltip">looks good</div>
</div>
<div class="form-group mx-3">
<label class="sr-only"> Enter name</label>
<input type="password" class="form-control is-invalid"
placeholder="Enter password">
<div class="invalid-tooltip ">enter valid password</div>
</div>
<button class="btn btn-primary">Login</button>
</div>
</div>
</div>
css..
.invalid-tooltip{
left:auto;
}
.valid-tooltip{
left:auto;
}
input group prepend & append.......................

prepend
<div class="row mt-5">

<div class="col-6">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">supriyol</span>
</div>
<input type="text" class="form-control">
</div>
</div>
append
<div class="col-6">
<div class="input-group-append">
<span class="input-group-text">supriyolhgfdhfr</span>
</div>
</div>
prepend and append same time..

<div class="col-6 mt-5">
<span class="input-group-text">supriyol</span>
</div>
<span class="input-group-text">supriyolhgfdhfr</span>
</div>
</div>
</div>
check box.......
<span class="input-group-text">
<input type="checkbox">
</span>
</div>
</div>
</div>
radio........
<input type="checkbox">
</span>
</div>
</div>
</div>
same input group two tag.................

mr.
</span>
</div>
<input type="text" class="form-control" placeholder="username">
<input type="text" class="form-control" placeholder="password">
</div>
</div>
input group button......................

<button class="btn btn-danger">don</button>
</div>
</div>
</div>
input group group button.............

<button class="btn btn-primary dropdown-toggle" data-
toggle="dropdown">don</button>
<a href="" class="dropdown-item">Link one</a>
<a href="" class="dropdown-item">two</a>
<a href="" class="dropdown-item">three</a>
</div>
</div>
</div>
</div>
</div>
input-group and dropdown icon splip......

<div class="col-md-6 mt-5 ">
<div class="input-group mb-4">
<input type="text" class="form-control" placeholder="user name">
<button class="btn btn-primary">signin</button>
<button class="btn btn-danger dropdown-toggle dropdown-toggle-
split" data-toggle="dropdown"></button>
<a href="" class="dropdown-item">link one</a>
<a href="" class="dropdown-item">link two</a>
<a href="" class="dropdown-item">link three</a>
</div>
</div>
</div>
</div>
input-group select box..........

<div class="col-md-6 mt-5">
<select name="" id="" class="custom-select">
<option value=""></option>
<option value="">two</option>
<option value="">three</option>
</select>
<button class="btn btn-secondary"> click</button>
</div>
</div>
</div>
input-group file upload---------------

<div class="col-md-6">
<div class="custom-file">
<input type="file" class="custom-file-input">
<label class="custom-file-label">chose-file</label>
</div>
<span class="input-group-text"> Upload</span>
</div>
</div>
</div>
NAV
classes............................................................................
....................................
1.navigation bar with li..............
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<a class="nav-link active">About Us</a>
</li>
</ul>
2.navigation bar with link a...........
<nav class="nav justify-content-end ">

<a href="" class="nav-link"> Home </a>
<a href="" class="nav-link"> About us </a>
<a href="" class="nav-link"> gallery </a>
<a href="" class="nav-link"> Blog </a>
</nav>
css:..
.nav{ background: darkcyan;}
.nav-link{color:#fff;}
.nav-link:hover{ color:#fff;
background:sandybrown;
}
3.nav with active and hover like buttom....

use nav-fill = stretch nav item in full page
nav-justified = stretch nav-item in equal space
<nav class="nav justify-content-end nav-pills nav-fill/nav-justified">

<a href="" class="nav-link"> Home </a>
<a href="" class="nav-link"> About us </a>
<a href="" class="nav-link"> gallery </a>
<a href="" class="nav-link"> Blog </a>
</nav>
css:..
.nav{ background: darkcyan;}
.nav-link{color:#000;}
.nav-link:hover,.nav-link.active {color:#fff;
background:sandybrown;}
navbar.............................................................................
...............
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand">company Name</a>
<ul class="navbar-nav">
<a class="nav-link"> About Us </a>
</li>
</ul>
</nav>
navbar with toggle............

<div class="col">
<nav class="navbar navbar-expand-lg">
<a href="" class="navbar-brand">bapan bokachoda company</a>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown" data-
toggle="dropdown">Home</a>
</div>
</li>
<li class="nav-item ">
<a href="" class="nav-link">services</a>
</li>
<a href="" class="nav-link">about</a>
</li>
</ul>
</nav>
</div>
full nabar tap create............

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a href="" class="navbar-brand "><img src="left awwow.png"
height=30px, width="30px" class="mr-auto" alt=""> bapan bokachoda company</a>
<button class="navbar-toggler" data-toggle="collapse" data-

target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="mynavbar">

<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-
toggle="dropdown">Home</a>
</div>
</li>
<li class="nav-item ">
<a href="" class="nav-link">services</a>
</li>
<a href="" class="nav-link">about</a>
</li>
</ul>
<span class="navbar-text">This is testing text</span>

</div>
</nav>
</div>
border &
Shadow.............................................................................
......................................
.border
.border-top
.border-right
.border-bottom
.border-left
.border-0
.border-top-0
.border-right-0
.border-left-0
.border-bottom-0
border color...
.border-primary
.border-secondary
.border-info
.border-light
.border-white
.border-dark
border shadow....
.shadow-none
.shadow-sm
.shadow
.shadow-lg
card-------------------------------------------------------------------------------
--------------------------------------
.card
.card-img-top
.card-img-bottom
.card-body
.card-text
.card-title
.card link
.card-subtitle
.list-group (list-group-item)
.list-group-flush --for border remove
.card-header
.card-footer
.no-gutters ---for gap remove
ex.
<div class="card-header">header</div>
<div class="card-footer">footer</div>
<a href=""class="card link">job hay</a>
<h5 class="card-subtitle ">job nahi hay</h5>
<ul class="list-group">
<li class="list-group-item">sobai bakachoda</li>
<li class="list-group-item">sabail valochele</li>
<li class="list-group-item">sabai goodboy</li>
</ul>
ex..
<div class="card">
<img src="left awwow.png" alt="" class="car-img-top">
<div class="card-body">
<h4 class="card-title">card title</h4>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Dicta quasi adipisci, sapiente obcaecati quisquam est, esse tempore vero
magni exercitationem, inventore cum nemo sit facere rerum ipsum quos asperiores
odit deserunt sint qui. Aliquid expedita dolores in vitae, necessitatibus, dolor
sequi optio, est exercitationem harum itaque. Aperiam optio sed laborum.
</p>
<button class="btn-primary"> read more</button>
</div>
</div>
</div>
ex-2..background text in image

<div class="card">
<img src="left awwow.png" alt="" class="car-img-top">
<div class="card-img-overlay">
<h4 class="card-title">card title</h4>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Dicta quasi adipisci, sapiente obcaecati quisquam est, esse tempore vero
magni exercitationem, inventore cum nemo sit facere rerum ipsum quos asperiores
odit deserunt sint qui. Aliquid expedita dolores in vitae, necessitatibus, dolor
sequi optio, est exercitationem harum itaque. Aperiam optio sed laborum.
</p>
<button class="btn-primary"> read more</button>
</div>
</div>
</div>
card-group ,card-
columns ...........................................................................
...................
.card-group ---two or more card in one group
.card-deck ----two or more card in one group with space in between
.card-columns --- auto masonry layout degine( auto adjust space on every div)
ex..
<div class="card-group">
<div class="card">
<img>.....
........
</div>
<div class="card">
<img>.....
........
</div>
</div>
ex-2
<div class="card-columns">
<div class="card">
<img>.....
........
</div>
<div class="card">
<img>.....
........
</div>
</div>
media object(40 number

tutorial)..........................................................................
.....................................
.media
.media-body
.align-self-center/end/start ..for image posision set
ex..

<div class="media">
<img src="left awwow.png" alt="" class="mr-3 align-self-
center">
<div class="media-body">
<h5 class="mt-0">yahoobaba</h5>
<p>bokachoda Lorem ipsum dolor sit amet consectetur
adipisicing elit. Velit earum repudiandae
laudantium harum, non odit cum ut temporibus quam
fugiat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Aperiam fugit quod sunt accusantium
repellendus quasi velit repellat labore commodi sint?
</p>
</div>
</div>
</div>
badge(41)..........................................................................
........................................
<span class="badge badge-light"> 4 </span> ..........for hilight any sentance

<button class="badge badge-light"> 4 </button>
.badge-primary
.badge-secondary
progress
bar................................................................................
..........................
.progress
.progress-bar
.progress-bar-striped...striped line
.progress-bar-animated-----animation
<div class="col-12">
<h5>html</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-
animated" style="width:25%">25%</div>
</div>
<h5>webdegine</h5>
<div class="progress" style="height:20px">
<div class="progress-bar bg-danger" style="width:15%">15%</div>
<div class="progress-bar" style="width:50%">50%</div>
</div>
<h5>supriyo</h5>
<div class="progress">
<div class="progress-bar ba-info" style="width: 18%">18%</div>
</div>
</div>
spinners...........................................................................
..................................................................................
<span class="sr-only">loading</span>
.spinner-border...like google searcg

.spinner-grow ---round fill with color
text-primary ----spinner color set
text-center
<div class="col">
<div class="spinner-border spinner-border-sm text-primary
"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-danger" style="width:80px;
height:80px"></div>
</div>
</div>
<div class="col">
<div class="spinner-grow text-primary "></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow spinner-grow-sm
text-primary"></div>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn-primary ">
<span class="spinner-border spinner-border-sm"></span>
loading....
</button>
</div>
</div>
</div>
jumbotron..........................................................................
...............................................................................
.jumbotron-fluid --parent size
ex..
<div class="row">
<div class="col">
<div class="jumbotron ">
<h1 class="display-4">Helow world</h1>
<p class="lead">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Cumque ipsam
tempora nemo nobis, eius nostrum totam laudantium! Dolor,
reprehenderit laudantium!</p>
<a href="" class="btn btn-primary">Learn more</a>
</div>
</div>
</div>
</div>
<div class="jumbotron jumbotron-fluid " id="gg">

<div class="row">
<div class="col">
<h1 class="display-4">Helow world</h1>

<p class="lead">Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Cumque ipsam
tempora nemo nobis, eius nostrum totam laudantium! Dolor,
reprehenderit laudantium!
</p>
<a href="" class="btn btn-primary">Learn more</a>
</div>
</div>
</div>
</div>
popovers...........................................................................
.................................................................................
title="popover title" ----titlebar

data-contant="popover content goes here" ---content like paragrap ,bottom
dtat-placement="top" -------popover placement
bottom
left
right
data-toggle="popovere" -------for animate,clik,hide
$(function(){ ---for pass data-toggle use function
$('[data-toggle="popover"]'.popover()
})
ex................
<script>
$(function () {
$('[data-toggle="popover"]').popover();
});
</script>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-7 mx-auto">
<button class="btn btn-primary" data-placement="bottom" data-
toggle="popover" title="popover title"
data-content=" fmnekf ,nlkds vnfew nmfeoiwne dv
cv">popover</button>
</div>
</div>
</div>
</body>
..........OR..............
<script>
$(function () {
$('#example').popover();
});
</script>
</head>
<body>
<div class="row">
<button id="example" class="btn btn-primary" data-
placement="bottom" data-toggle="popover" title="popover title"
data-content=" fmnekf ,nlkds vnfew nmfeoiwne dv
cv">popover</button>
</div>
</div>
</div>
</body>
POPOVER METHOD............
SHOW --click to show
HIDE -- click to hide
TOGGLE --when fasttime click then showing then after 2nd time click then hide
DISPOSE
ENABLE
DISABLE
TOGGLEENABLED
ex..
<script>
$(function () {
$('#example').popover({
html: true,
title: "popover title",
content: "<h2> lorem nkf lkjoidf ioiwfe iniodv ionjio divjnjiovgrl
gloirjhvgo r",
placement: "bottom"
});
$('#showbtn').click(function () {
$('#example').popover('show');
})
$('#hidebtn').click(function () {
$('#example').popover('hide');
})
});
</script>
</head>
<body>
<div class="row">
<button id="example" class="btn btn-primary">POPOVER</button>
<button id="showbtn" class="btn btn-primary">show</button>

<button id="hidebtn" class="btn btn-primary">hide</button>
</div>
</div>
</div>
</body>
popover event........................................ when click then popup showing

show.bs.popover --1st popup show
inserted.bs.popover 2nd popup show
shown.bs.popover -3rd popup show
hide.bs.popover -- 1st popup show for hide

hidden.bs.popover --2nd popup show
<script>
$(function () {
$('#example').popover({
html: true,
title: "popover title",
content: "<h2> lorem nkf lkjoidf ioiwfe iniodv ionjio divjnjiovgrl
gloirjhvgo r",
placement: "bottom"
});
$('#example').on("show.bs.popover",function(){
alert("supriyo");
})
$('#example').on("shown.bs.popover",function(){
alert("pabitra")
})
$('#example').on("hide.bs.popover",function(){
alert("don")
})
$('#example').on("hidden.bs.popover",function(){
alert("hero")
})
$('#example').on("inserted.bs.popover",function(){
alert("bapan")
})
});
</script>
</head>
<body>
<div class="row">
<button id="example" class="btn btn-primary">POPOVER</button>
<button id="showbtn" class="btn btn-primary">show</button>

<button id="hidebtn" class="btn btn-primary">hide</button>
</div>
</div>
</div>
</body>
ALERT..............................................................................
...................................................................................
showing one alert message....
color..
.alert-primary
.alert-secondary
<body>
<div class="row py-3 justify-content-center">
<div class="col-md-7 ">
<div class="alert alert-primary">
Lorem ipsum dolor sit amet.
</div>
</div>
<div class="alert alert-danger">
Lorem ipsum dolor sit amet.jortn ltjog <a class="alert-link"
href="">my name is khan</a> gojopreg m
gmrjgpo omgporgjr gomgreg rogmreg
</div>
</div>
<div class="alert alert-success">
<h3 class="alert-heading"> Lorem ipsum dolor sit
amet.</h3><p>kjhwfnkl/fegvwljkefwnkldljovgrjm ljorg lojpreg frvn</p>
</div>
</div>
</div>
</div>
</body>
alert js feachers............................................................
for close.................with button
<button class="close" data-dismiss="alert">
</button>
ex..
<div class="col-md-7 ">
<div class="alert alert-primary">
Lorem ipsum dolor sit amet.
<button class="close" data-dismiss="alert">
<span>×</span>
</button>
</div>
</div>
for close.................with js...................
$().alert('close')-
code--................................
<script>
$(function () {
$("#closebtn").click(function () {
$("#redbox").alert('close');
})
});
</script>
</head>
<body>
<div id="redbox" class="alert alert-success">
<h3 class="alert-heading"> Lorem ipsum dolor sit amet.</h3>
<p>kjhwfnkl/fegvwljkefwnkldljovgrjm ljorg lojpreg frvn</p>
</div>
<button class="btn btn-danger" id="closebtn">close</button>
</div>
alert event.................after close then one alert messase

showing ..................
.close.bs.alert
.close.bs.alert
ex-
<script>
$(function () {
$("#closeBtn").click(function () {
$("#redbox").alert('close');
})
$("#redbox").on("close.bs.alert",function(){
alert("close");
})
$("#redbox").on("closed.bs.alert",function(){
alert("closed");
})
});
</script>
</head>
<body>
<div id="redbox" class="alert alert-success">
<h3 class="alert-heading"> Lorem ipsum dolor sit amet.</h3>
<p>kjhwfnkl/fegvwljkefwnkldljovgrjm ljorg lojpreg frvn</p>
</div>
<button class="btn btn-danger" id="closeBtn">close</button>
</div>
modal
plugin.............................................................................
.............................................................................
.data-toggle="modal"
.data-target="#mymodal"
.modal id="mymodal"
.modal-dialog
.modal-content
.modal-header
.modal-body
.modal-footer
<div class="modal fade " id="mymodal" data-backdrop="static">------data-

backdrop="static" -when outside click then not close only close button click
close
.modal-dialog-centered open dialog box in center
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> -----
dialog-scrollable--- for more content then create scroll bar
<div class="modal fade " id="mymodal" data-backdrop="static" tabindex="-1"> ---
tabindex="-1---- keboard esc key preess to close
ex..
<body>
<button class="btn btn-primary" data-toggle="modal" data-
target="#mymodal">launch model</button>
<div class="modal fade " id="mymodal" data-backdrop="static">

<div class="modal-dialog modal-dialog-centered modal-dialog-
scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 modal-title>model title</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">Lorem ipsum dolor sit
amet.</div>
amet.</div>
</div>
<div class="row">
amet.</div>
amet.</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-
dismiss="modal">close</button>
<button class="btn btn-danger">save</button>

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
modal optional sizes......................

small- --- .modal-sm - max-width --300px
default --.none - max-width --500px
large --.modal-lg - max-width --800px
extra large --.modal-xl - max-width --1140px
<script>
$(function () {
$('#mymodal').modal({
backdrop: 'static',
keyboard: false .......Esc key press close off
});
})
</script>
modal methods................................
.show
.hide
.toggle
.dispose
.handleUpdate
<script>
$(function () {
$('#showbtn').click(function(){
$('#mymodal').modal('show');
})
$('#supriyoclose').click(function(){
$('#mymodal').modal('hide');
})
});
</script>
modal event......................................
show.bs.modal
.shown.bs.modal
.hide.bs.modal
.didden.bs.modal
.hidePrevented.bs.modal
<script>
$(function () {
$('#showbtn').click(function(){
$('#mymodal').modal('show');
})
$('#supriyoclose').click(function(){
$('#mymodal').modal('hide');
})
$('#mymodal').on('show.bs.modal',function(){
alert('show');
})
$('#mymodal').on('shown.bs.modal',function(){
alert('showsupriyo');
})
$('#mymodal').on('hide.bs.modal',function(){
alert('hidesupriyo');
})
$('#mymodal').on('hidden.bs.modal',function(){
alert('hiddensupriyo');
})
$('#mymodal').on('hidePrevented.bs.modal',function(){
alert('prevented');
})
});
</script>
collapse
plugin.............................................................................
............................................................................
data-toggle="collapse"
data-target="#mycollapse"
.collapse
id="mycollapse"
class="card card-body"
<div class="collapse show" id="collapseone" data-
parent="#accordionExample">...show..bydefault show
<button class="btn btn-link btn-block text-left collapsed" data-toggle="collapse"
.. collapsed--use for style because when click one link then anothe link's htms
auto remove but only collapased not removed so we can make color through in this
collapsed class.
ex...
<body>
<div class="accordion" id="accordionExample">

<div class="card">
<div class="card-header">
<button class="btn btn-link btn-block text-left " data-
toggle="collapse"
data-target="#collapseone">heading number
one</button>
</div>
parent="#accordionExample">
<div class="card card-body">
Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Distinctio dicta vitae quia
quaerat
delectus nihil, nostrum quidem cupiditate
temporibus incidunt.
</div>
</div>
</div>
<div class="card">
<button class="btn btn-link btn-block text-left
collapsed" data-toggle="collapse"
data-target="#collapsetwo">heading number
two</button>
</div>
<div class="collapse" id="collapsetwo" data-
quaerat
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
collapsed methods.......
.show
.hide.
.toggle
.dispose
<script>
$(function () {
$('#newbtn').click(function () {
$('#newcollapse').collapse('show');
})
$('#closebtn').click(function () {
$('#newcollapse').collapse('hide');
})
$('#newbtn').click(function(){
$('#newcollapse').collapse('toggle');
})
})
</script>
</head>
<body>
<div class="col-md-7 py-3">
<button id="newbtn" class="btn btn-primary text-left ">click
heare</button>
<button id="closebtn" class="btn btn-primary text-left
">close</button>
<div class="collapse " id="newcollapse">
<div class="card-body">
quaerat
delectus nihil, nostrum quidem cupiditate temporibus
incidunt.
</div>
</div>
<div class="accordion" id="accordionExample">

<div class="card">
<button class="btn btn-link btn-block text-left "
data-toggle="collapse"
data-target="#collapseone">heading number
one</button>
</div>
Lorem ipsum dolor sit, amet consectetur
adipisicing elit. Distinctio dicta vitae
quia
quaerat
</div>
</div>
</div>
collapse event......................................................
.show.bs.collapse
.shown.bs.collapse
.hide.bs.collapse
.hidden.bs.collapse
<script>
$(function () {
})
$('#newcollapse').on('show.bs.collapse',function(){
alert("show");
})
$('#newcollapse').on('shown.bs.collapse',function(){
alert("shown")
})
})
</script>
tab
plugin.............................................................................
..............................................................................
<ul class="nav">
<a class="nav-link active">Home</a> ----data-toggle="tab"
</li>
<a href="#home" class="nav-link">profile</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane show active" id="home"> content Goes here
</div>
<div class="tab-pane" id="profile"> Content Goes Here</div>
</div>
ex...
<body>
<ul class="nav nav-tabs" id="mytab">
<a class="nav-link active" data-toggle="tab" href="#home">
home
</a>
</li>
<a href="#profile" class="nav-link" data-
toggle="tab">profile</a>
</li>
<a class="nav-link" data-toggle="tab"
href="#contact">contact</a>
</li>
</ul>
<div class="tab-content py-3" id="mytabContent">

<div class="tab-pane fade show active" id="home">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Corrupti, accusantium?
</div>
<div class="tab-pane fade" id="profile">

</div>
<div class="tab-pane fade" id="contact">

</div>
</div>
</div>
<ul class="nav nav-pills" id="pills-tab">
<a class="nav-link active" data-toggle="pill"
href="#home1">
home
</a>
</li>
<a href="#profile1" class="nav-link" data-
toggle="pill">profile</a>
</li>
<a class="nav-link" data-toggle="pill"
href="#contact1">contact</a>
</li>
</ul>
<div class="tab-content py-3" id="mytabContent">

<div class="tab-pane fade show active" id="home1">
</div>
<div class="tab-pane fade" id="profile1">

</div>
<div class="tab-pane fade" id="contact1">

</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<ul class="nav nav-pills flex-column" id="vertical-tab">
<a class="nav-link active" data-toggle="pill"
href="#home2">
home
</a>
</li>
<a href="#profile2" class="nav-link" data-
toggle="pill">profile</a>
</li>
<a class="nav-link" data-toggle="pill"
href="#contact2">contact</a>
</li>
</ul>
</div>
<div class="col-9">
<div class="tab-content py-3" id="vertical-tabContent">
<div class="tab-pane fade show active" id="home2">
</div>
<div class="tab-pane fade" id="profile2">

</div>
<div class="tab-pane fade" id="contact2">

</div>
</div>
</div>
</div>
</div>
</body>
tab-methods...............
<script>
$(function(){
$('#mytab a').on('click',function(e){
e.preventDefault();
$(this).tab('show');
})
})
</script>
</head>
<body>
<ul class="nav nav-tabs" id="mytab">
<a class="nav-link active" href="#home">
home
</a>
</li>
<a href="#profile" class="nav-link" >profile</a>
</li>
<a class="nav-link" href="#contact">contact</a>
</li>
</ul>
tab:event:....................................
.show.bs.tab
.shown.bs.tab
.hide.bs.tab
.hidden.bs.tab
<script>
$(function(){
$('#mytab a').on('click',function(e){
e.preventDefault();
$(this).tab('show');
})
$('#mytab a').on('show.bs.tab',function(e){
alert('show')
})
})
</script>
carousel...........................................................................
.................................................................................
carousel slide -- for slide change

carousel-fade..after click then img change slow motion not auto change
carousel-indicators --INDICATION FOR ONE PAGE TO ANOTHER PAGE
carousel-caption ----FOR page name or description
<div class="carousel-item active" data-interval="2000"> ---timing change for next
page
</head>
<style>
.carousel-inner h5,
.carousel-inner p{
background: white;
color: black;
}
</style>
<body>
<div class="col">
<div class="carousel slide carousel-fade" id="myCarousel" data-
ride="carousel">

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"
class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="tcs-named-worlds-most-admired-companies-
list_Large.jpg" class="d-block w-100"
alt="">
<div class="carousel-caption d-md-block d-none">
<h5>fast slide label</h5>
<p>Lorem ipsum dolor sit amet consectetur
adipisicing elit. Sit, vitae?</p>
</div>
</div>
<div class="carousel-item">
<img src="what-we-do-story-home_Large.jpg" class="d-
block w-100" alt="">
</div>
</div>
<div class="carousel-item">
<img src="who-we-are-story-home_Large.jpg" class="d-

block w-100" alt="">
</div>
</div>
</div>

<a href="#myCarousel" class="carousel-control-prev" data-

slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#myCarousel" class="carousel-control-next" data-
slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(function(){
$('.carousel').carousel({
interval:2000, ...for slide change timing
wrap:false ...for one time slide change
});
})
</script>
carousel
methods............................................................................
........................................................................
.prev
.next
.pause
.cycle
.number
.dispose
<script>
$(function(){
$('.carousel').carousel({
interval:2000,
});
$('#nextbtn').click(function(){
$('#myCarousel').carousel('next');
})
$('#prebtn').click(function(){
$('#myCarousel').carousel('prev');
})
$('#pausebtn').click(function(){
$('#myCarousel').carousel('pause');
})
$('#cyclebtn').click(function(){
$('#myCarousel').carousel('cycle');
})
$('#onebtn').click(function(){
$('#myCarousel').carousel(0);
})
$('#twobtn').click(function(){
})
$('#threebtn').click(function(){
})
})
</script>
carosel event .......................................

.slide.bs.carousel -----before slide change showing this alert
.slid.bs.carousel ----- after slide change showing this alert
$('#myCarousel').on('slid.bs.carousel',function(){
alert(1);
})
$('#myCarousel').on('slide.bs.carousel',function(){
alert(1);
})
Toast..............................................................................
...................................................................................
.toast
.toast-header
.toast-body
<button class="close" data-dismiss="toast">-----data-dismiss="toast"--when click
this button then close toast
<script>
$(function(){
$('.toast').toast();
});
</script>
</head>
<body>
<div class="col">
<div class="toast show">
<div class="toast-header">
<img class="rounded mr-2" src="uu.jpg" alt="" width="20px">
<b class="mr-auto">Bootstrap Toast</b>
<small class="=text-muted">1 sec ago</small>
<button class="close ml-2" data-dismiss="toast">
<span>×</span>
</button>
</div>
<div class="toast-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Cupiditate, ab?
</div>
</div>
</div>
</div>
</div>
</body>
toasts methods .....................................................
.show
.hide
.dispose
data-autohide="false" --toast auto hide off
<script>
$(function () {
$("#mytoast").toast({
autohide:false,
animation:false,
delay:2000
});
});
</script>
Tasts Events.......................................................
.show.bs.toast
.shown.bs.toast
.hide.bs.toast
.hidden.bs.toast
$("#mytoast").on('show.bs.toast',function(){
alert('show')
})
scrollspy
plugin.............................................................................
.........................................................................
data-spy="scroll"
data-target"#mynavbar"
ex-------------------
<body data-spy="scroll" data-offset="60" data-target="#mynavbar">
<nav id="mynavbar" class="navbar bg-primary navbar-dark navbar-expand-lg fixed-

top ">
<a class="navbar-brand" href="">MY Company</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#kuiri">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="kuiri">
<ul class="navbar-nav mr-auto ">
<li class="nav-item"><a class="nav-link" href="#section1">section
1</a></li>
<li class="nav-item"><a class="nav-link" href="#section2">section-
2</a></li>
<li class="nav-item"><a class="nav-link" href="#section3">section
3</a></li>
<li class="nav-item dropdown"><a href="#" class="nav-link dropdown-
toggle active" data-toggle="dropdown"
>section 4</a>
<a href="#section12" class="dropdown-item">link one</a>
</div>
</li>
</ul>
<form action="" class="form-inline">
<input type="search" class="form-control mr-sm-2"
placeholder="Search">
<button class="btn btn-light btn-outline-success my-sm-
0">Search</button>
</form>
</div>
</nav>
<div class="container-fluid" id="section1" style="background: rgb(165, 182,

190);">
<h2>section 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa qui
distinctio labore ipsum odio
deleniti. Rem suscipit delectus aliquid nesciunt.</p>
</div>
90);">
<h2>section 2</h2>
</div>
157);">
<h2>section 3</h2>
</div>
255);">
<h2>section 4 submenu 1</h2>
</div>
<div class="container-fluid" id="section12" style="background-color:
aquamarine;">
<h2>section 4 submenu 2</h2>
</div>
</div>
</div>
</body>
script tag......
<script>
$(function(){
$("body").scrollspy({
target:"#mynavbar",
offset:50
})
})
</script>
scrollspy method....................
.refresh
.dispose
<script>
$(function(){
$("body").each(function(){
$(this).scrollspy('refresh'); ......for refresh scrollspy
})
})
</script>
scrollspy event..............................
.activate.bs.scrollspy
JAVASCRIPT
PLUGINS............................................................................
........................................................................
.tooltip
popovers
alert
modal
collapse
tabs
carousel
toasts
scrollspy

Bootstrap Important

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap Important

Uploaded by

Copyright:

Available Formats

1.

<div class="w-100"></div> -------------for breake div

2.offset--for gap in between col in between class

<div class="col-md-8 orange order-md-2">

<div class="col-md-4 pink order-md-1" >

4.margin classes:-------------------------------------also use row and container

5.paddong----------------------------------------also use row and container

for row and class--

no-gutters-----use for bydefalt margin padding 0

16.color & background

*text color classess-------

text &list style---------------------------------------------------------------

user-select-all ....after click auto select text

<a href="" class="btn btn-primary">submit</a>

btn-block big size like big div

btn-active ---dark color set

btn-disabled ---light color

btn-toolbar... two group

icon in between buttom

<ul class="list-group list-group-flush">

clicable item...real example

drop down item....................................

iii.for dark color and borderless

iv.for light-gray-color and white color..

v.for table head dark

vi.for table head light color

x.for full side border....

xii.for table padding height diecress..

for table color....................

for table responsive

pagination & breadcrumb

<li class="page-item"><a href="#" class="page-link">2 </a></li>

input group prepend & append.......................

<div class="row mt-5">

prepend and append same time..

same input group two tag.................

input group button......................

<div class="col-6 mt-5">

input group group button.............

<div class="col-6 mt-5">

input-group and dropdown icon splip......

input-group select box..........

input-group file upload---------------

1.navigation bar with li..............

<ul class="nav flex-column">

2.navigation bar with link a...........

<nav class="nav justify-content-end ">

3.nav with active and hover like buttom....

<nav class="nav justify-content-end nav-pills nav-fill/nav-justified">

navbar with toggle............

full nabar tap create............

<button class="navbar-toggler" data-toggle="collapse" data-

<div class="collapse navbar-collapse " id="mynavbar">

<!-- <form action="" class="form-inline">

ex-2..background text in image

media object(40 number

<div class="col-12 mt-5">

<span class="badge badge-light"> 4 </span> ..........for hilight any sentance

.spinner-border...like google searcg

.jumbotron-fluid --parent size