Bootstrap 4
Sat Mar 23 2024 21:46:11 GMT+0000 (Coordinated Universal Time)
Saved by @DKMitt #bootstrap
Bootstrap 4.6.0 Carousel
https://www.thiscodeworks.com/bootstrap-4-6-0-the-default-breakpoints-css/64bba96cef21fa0013a53a7dSave snippets that work from anywhere online with our extensions
More like this
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
Hello, I can work on your website. I have experience in working with html, css, bootstrap, jquery, animations, javascript. I already have developed many templates. I deliver work with excellent code quality. If you will work with me for a project then you will find me a long term partner. we can negotioate on price over chat. thank you.
<div class="spinner-grow text-muted"></div> https://www.w3schools.com/bootstrap4/bootstrap_spinners.asp https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_well_size&stacked=h https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_input_help-block&stacked=h
/* Utilities */
/* Break points for Grid */
Extra small <576px
Small ≥576px
Medium ≥ 768px
Large ≥992px
Extra large ≥1200px
/* Basic Typography */
/* HEADINGS */
<h4>Heading Four</h4>
<h5 class="h1">Heading Five</h5> /* Biggest size */
<h6>Heading Six</h6>
/* DISPLAY CLASSES */
<h1 class="display-1">Display 1</h1>
<h1>Display 2</h1>
<h1>Display 3</h1>
<h1 class="display-4">Display 4</h1>
/* PARAGRAPHS */
<!-- LEAD -->
<p class="lead">Loremdita eum,quaerat, vitae dolorum, dolor autem reiciendis sapiente.</p>
<!-- MONOSPACE PARAGRAPH -->
<p class="text-monospace">My monospace paragraph</p>
/* STYLE CLASSES */
<p class="font-weight-bold">Bold Text</p>
<p class="font-weight-normal">Normal Text</p>
<p class="font-italic">Italic Text</pA>
/* TEXT TRANSFORMS */
<p class="text-lowercase">MAKE LOWERCASE</p>
<p class="text-uppercase">make uppercase</p>
<p class="text-capitalize">make capitalized</p>
/* BLOCKQUOTES */
<blockquote class="blockquote">
<p>This is a blockquote</p>
</blockquote>
<!-- BLOCKQUOTE RIGHT ALIGNED -->
<blockquote class="blockquote text-right">
<p>This is a blockquote aligned right</p>
</blockquote>
<!-- BLOCKQUOTE WITH FOOTER -->
<blockquote>
<footer class="blockquote-footer">Someone famous here.
</footer>
/* LISTS */
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<!-- INLINE LIST -->
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Lorem ipsum</li>
</ul>
/* -----------------------------XX---------------- */
/* Text-align and display */
<!-- ALIGNMENT -->
<p class="text-left">Text aligned left</p>
<p class="text-center">Text aligned center</p>
<p class="text-right">Text aligned right</p>
<!-- RESPONSIVE ALIGN -->
<p class="text-sm-right">Right aligned on small or larger</p>
<p class="text-lg-right">Right aligned on large or larger</p>
<p class="text-xl-right">Right aligned on xl or larger</p>
<p class="text-sm-left">Left aligned text on small or larger</p>
<p class="text-md-left">Left aligned text on medium or larger</p>
<p class="text-lg-left">Left aligned text on large or wider</p>
<p class="text-xl-left">Left aligned text on extra large or wider</p>
<p class="text-sm-center">Center aligned text on small or larger</p>
<p class="text-md-center">Center aligned text on medium or larger</p>
<p class="text-lg-center">Center aligned text on large or wider</p>
<p class="text-xl-center">Center aligned text on extra large or wider</p>
<!-- VERTICAL ALIGNMENT -->
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-bottom">bottom</span>
<span class="align-middle">middle</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
<!-- TURN BLOCK TO INLINE -->
<h1 class="d-inline">Hello</h1>
<h1 class="d-inline">Goodbye</h1>
<!-- TURN INLINE TO BLOCK -->
<span class="d-block bg-primary">Block</span>
<!-- INLINE BLOCK -->
<div class="d-inline-block bg-primary">
<h3 class=''>Hello</h3>
This is inline
</div>
<div class="d-inline-block bg-warning">
<h3 class=''>Hello</h3>
This is inline
</div>
/* -----------------------------XX--------------------- */
/* Floats & Fixed Positions */
<!-- FLOATS -->
<div class="float-left">Float left</div>
<br>
<div class="float-right">Float right</div>
<br>
<div class="float-none">Float none</div>
<br>
<!-- RESPONSIVE FLOATS -->
<div class="float-sm-right">Float right on small or wider</div>
<br>
<div class="float-md-right">Float right on medium or wider</div>
<br>
<div class="float-lg-right">Float right on large or wider</div>
<br>
<div class="float-xl-right">Float right on extra large or wider</div>
<br>
<div class="float-sm-left">Float left on small or wider</div>
<br>
<div class="float-md-left">Float left on medium or wider</div>
<br>
<div class="float-lg-left">Float left on large or wider</div>
<br>
<div class="float-xl-left">Float left on extra large or wider</div>
<br>
<div class="float-sm-none">Float none on small or wider</div>
<br>
<div class="float-md-none">Float none on medium or wider</div>
<br>
<div class="float-lg-none">Float none on large or wider</div>
<br>
<div class="float-xl-none">Float none on extra large or wider</div>
<br>
<br>
<br>
<!-- CLEARFIX -->
<div class="bg-success clearfix">
<button class="float-left">Float Left</button>
<button class="float-right">Float Right</button>
</div>
<!-- FIXED TOP -->
<h3 class="fixed-top">Fixed Top</h3>
<!-- FIXED STICKY -->
<h3 class="sticky-top bg-success">Sticky</h3>
<!-- FIXED BOTTOM -->
<h3 class="fixed-bottom">Fixed Bottom</h3>
/* Colors & Background */
<!-- TEXT COLORS -->
<p class="text-primary">Text Primary Color</p>
<p class="text-secondary">Text Secondary Color</p>
<p class="text-success">Text Success Color</p>
<p class="text-info">Text Info Color</p>
<p class="text-warning">Text Warning Color</p>
<p class="text-danger">Text Danger Color</p>
<p class="text-light">Text Light Color</p>
<p class="text-dark">Text Dark Color</p>
<p class="text-white">Text White Color</p>
<p class="text-muted">Text Muted</p>
<p class="text-black-50">Text Black 50</p>
<p class="text-white-50 bg-primary">Text White 50</p>
<br>
<br>
<!-- BACKGROUND COLORS -->
<div class="bg-primary">Background Primary Color</div>
<div class="bg-secondary">Background Secondary Color</div>
<div class="bg-success">Background Success Color</div>
<div class="bg-info">Background Info Color</div>
<div class="bg-warning">Background Warning Color</div>
<div class="bg-danger">Background Danger Color</div>
<div class="bg-light">Background Light Color</div>
<div class="bg-dark">Background Dark Color</div>
<div class="bg-white">Background White Color</div>
<div class="bg-transparent">Background Transparent</div>
<!-- INVISIBLE -->
<p class="invisible">Hello</p>
/* -----------------------------XX--------------------- */
/* Spacing */
Size and Values ( rem ):
0 : 0
1 : .25rem
2 : .5rem
3 : 1rem
4 : 1.25rem
5 : 3rem
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
<!-- MB MARGIN BOTTOM -->
<h1 class="bg-success mb-0">Margin Bottom 0</h1>
<h1 class="bg-success mb-1">Margin Bottom 1</h1>
<h1 class="bg-success mb-2">Margin Bottom 2</h1>
<h1 class="bg-success mb-3">Margin Bottom 3</h1>
<h1 class="bg-success mb-4">Margin Bottom 4</h1>
<h1 class="bg-success mb-5">Margin Bottom 5</h1>
<br>
<br>
<!-- MT MARGIN TOP -->
<h1 class="bg-success mt-0">Margin Top 0</h1>
<h1 class="bg-success mt-1">Margin Top 1</h1>
<h1 class="bg-success mt-2">Margin Top 2</h1>
<h1 class="bg-success mt-3">Margin Top 3</h1>
<h1 class="bg-success mt-4">Margin Top 4</h1>
<h1 class="bg-success mt-5">Margin Top 5</h1>
<br>
<br>
<!-- ML & MR -->
<p>
<span class="bg-success mr-5">Margin Right 5</span> dolor sit amet,
<span class="bg-success ml-3">Margin Left 3 </span>
</p>
<br>
<br>
<!-- MX MARGIN LEFT RIGHT -->
<p>Lorem ipsum
<span class="bg-success mx-5">Margin Left & Right 5</span>
</p>
<br>
<br>
<!-- MY MARGIN TOP BOTTOM -->
<p class="bg-success my-5">Margin Top & Bottom 5</p>
<br>
<br>
<!-- BLANK - ALL SIDES -->
<p class="bg-success m-5">Margin All Sides 5</p>
<br>
<br>
<!-- PB PADDING BOTTOM -->
<h1 class="bg-warning p-0">Padding Bottom 0</h1>
<h1 class="bg-warning pb-1">Padding Bottom 1</h1>
<h1 class="bg-warning pb-2">Padding Bottom 2</h1>
<h1 class="bg-warning pb-3">Padding Bottom 3</h1>
<h1 class="bg-warning pb-4">Padding Bottom 4</h1>
<h1 class="bg-warning pb-5">Padding Bottom 5</h1>
<br>
<br>
<!-- PT PADDING TOP -->
<h1 class="bg-warning pt-0">Padding Top 0</h1>
<h1 class="bg-warning pt-1">Padding Top 1</h1>
<h1 class="bg-warning pt-2">Padding Top 2</h1>
<h1 class="bg-warning pt-3">Padding Top 3</h1>
<h1 class="bg-warning pt-4">Padding Top 4</h1>
<h1 class="bg-warning pt-5">Padding Top 5</h1>
<br>
<br>
<!-- PL & PR -->
<p>
<span class="bg-warning pr-5">Padding Right 5</span> <span class="bg-warning pl-3">Padding Left 3 </span>
</p>
<br>
<br>
<!-- PX PADDING LEFT RIGHT -->
<p>Lorem ipsum
<span class="bg-warning pl-5 pr-5">Padding Left & Right 5</span>
</p>
<br>
<br>
<!-- PY PADDING TOP BOTTOM -->
<p class="bg-warning pt-5 pb-5">Padding Top & Bottom 5</p>
<br>
<br>
<!-- ALL SIDES -->
<p class="bg-warning p-5">Padding All Sides 5</p>
<!-- HORIZONTAL CENTERING -->
<div class="bg-info mx-auto" style="width: 200px;">
Horizontal Centering
</div>
/* -----------------------------XX----------------- */
/* Sizing & Borders */
<!-- WIDTH CLASSES -->
<div class="w-25 bg-success p-3">Width 25%</div>
<div class="w-50 bg-success p-3">Width 50%</div>
<div class="w-75 bg-success p-3">Width 75%</div>
<div class="w-100 bg-success p-3">Width 100%</div>
<div class="w-auto bg-success p-3">Width Auto</div>
<br>
<br>
<!-- HEIGHT CLASSES -->
<div style="height: 200px;border : 1px solid black">
<div class="h-25 bg-primary d-inline-block">Height 25%</div>
<div class="h-50 bg-primary d-inline-block">Height 50%</div>
<div class="h-75 bg-primary d-inline-block">Height 75%</div>
<div class="h-100 bg-primary d-inline-block">Height 100%</div>
<div class="h-auto bg-primary d-inline-block">Height Auto</div>
</div>
<br>
<br>
<!-- BORDERS -->
<div class="border p-3 mb-2 bg-light">Regular</div>
<div class="border-top b1 p-3 mb-2 bg-light">Border Top</div>
<div class="border-bottom p-3 mb-2 bg-light">Border Bottom</div>
<div class="border-right p-3 mb-2 bg-light">Border Right</div>
<div class="border-left p-3 mb-2 bg-light">Border Left</div>
<br>
<br>
<!-- BORDER COLORS -->
<div class="border border-primary p-3 mb-2 bg-light">Primary</div>
<div class="border border-secondary p-3 mb-2 bg-light">Secondary</div>
<div class="border border-success p-3 mb-2 bg-light">Success</div>
<div class="border border-info p-3 mb-2 bg-light">Info</div>
<div class="border border-warning p-3 mb-2 bg-light">Warning</div>
<div class="border border-danger p-3 mb-2 bg-light">Danger</div>
<div class="border border-light p-3 mb-2 bg-light">Light</div>
<div class="border border-dark p-3 mb-2 bg-light">Dark</div>
<div class="border border-white p-3 mb-2 bg-light">White</div>
<br>
<br>
<!-- BORDER RADIUS -->
<div class="border rounded p-3 mb-2 bg-light">Rounded</div>
<div class="border rounded-top p-3 mb-2 bg-light">Rounded Top</div>
<div class="border rounded-bottom p-3 mb-2 bg-light">Rounded Bottom</div>
<div class="border rounded-right p-3 mb-2 bg-light">Rounded Right</div>
<div class="border rounded-left p-3 mb-2 bg-light">Rounded Left</div>
<div class="border rounded-circle w-25 p-3 mb-2 bg-light">Rounded Circle</div>
<div class="border rounded-0 p-3 mb-2 bg-light">Dark</div>
/* -----------------------------XX---------------------- */
/* Custom Breakpoints */
/* "Components" */
/* Buttons */
<!-- BUTTONS -->
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-light" type="button">Light</button>
<button class="btn btn-dark" type="button">Dark</button>
<button class="btn btn-link" type="button">Link</button>
<br>
<br>
<!-- BUTTON TAGS/TYPES -->
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-light" type="submit">Button</button>
<input class="btn btn-dark" type="button" value="Input">
<input class="btn btn-warning" type="submit" value="Submit">
<input class="btn btn-success" type="reset" value="Reset">
<br>
<br>
<!-- OUTLINE BUTTONS -->
<button class="btn btn-outline-primary" type="button">Primary Outline</button>
<button class="btn btn-outline-secondary" type="button">Secondary Outline</button>
<button class="btn btn-outline-success" type="button">Success Outline</button>
<button class="btn btn-outline-success" type="button">Info Outline</button>
<button class="btn btn-outline-warning" type="button">Warning Outline</button>
<button class="btn btn-outline-danger" type="button">Danger Outline</button>
<button class="btn btn-outline-light" type="button">Light Outline</button>
<button class="btn btn-outline-dark" type="button">Dark Outline</button>
<br>
<br>
<!-- BUTTON SIZES -->
<button class="btn btn-lg" type="button">
<i class="fa fa-user"></i> Large button</button>
<button class="btn btn-sm" type="button">Small button</button>
<br>
<br>
<button class="btn btn-block btn-outline-dark" type="button">Block level button</button>
<br>
<br>
<!-- STATES -->
<button class="btn btn-primary" type="button">Regular Button</button>
<button class="btn btn-primary active" type="button">Active Button</button>
<button class="btn btn-primary disabled" type="button">Disabled Button</button>
<button class="btn btn-primary" data-toggle='button' type="button">
Toggle State
</button>
<br>
<br>
<!-- BUTTON GROUPS -->
<div class="btn-group">
<button class="btn btn-primary" type="button">Left</button>
<button class="btn btn-success" type="button">Middle</button>
<button class="btn btn-primary" type="button">Right</button>
</div>
<br></br>
<!-- BUTTON TOOLBAR -->
<div class="btn-toolbar">
<div class="btn-group mr-2">
<button class="btn btn-primary" type="button">1</button>
<button class="btn btn-primary" type="button">2</button>
<button class="btn btn-primary" type="button">3</button>
<button class="btn btn-primary" type="button">4</button>
</div>
<div class="btn-group mr-2">
<button class="btn btn-primary" type="button">5</button>
<button class="btn btn-primary" type="button">6</button>
<button class="btn btn-primary" type="button">7</button>
</div>
<div>
<button class="btn btn-primary" type="button">8</button>
</div>
</div>
<br>
<br>
<!-- VERTICAL GROUP -->
<div class="btn-group-vertical">
<button class="btn bg-primary" type="button">Left</button>
<button class="btn btn-dark" type="button">Middle</button>
<button class="btn bg-primary" type="button">Right</button>
</div>
<br>
<br>
<!-- BUTTON DROPDOWNS -->
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button">
My Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link One</a>
<a class="dropdown-item" href="#">Link Two</a>
<a class="dropdown-item" href="#">Link Three</a>
</div>
</div>
<br>
<br>
<!-- SPLIT DROPDOWNS -->
<div class="btn-group">
<button class="btn btn-primary" type="button">My Button</button>
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button">
<span>Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link One</a>
<a class="dropdown-item" href="#">Link Two</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Link Three</a>
</div>
</div>
/* ---------------------- XX ------------------ */
/* Navbar */
<!-- SIMPLE NAVBAR -->
<nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- NAVBAR WITH RESPONSIVE TOGGLE -->
<nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" data-toggle="collapse" data-target='#navbarNav'>
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR WITH FORM -->
<nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" data-toggle="collapse" data-target='#navbarNav'>
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline ml-auto">
<input class="form-control mr-2" placeholder="Search" type="text">
<button class="btn btn-outline-success ml-2">Search</button>
</form>
</div>
</div>
</nav>
<!-- NAVBAR WITH DROPDOWN -->
<nav class="navbar navbar-expand-sm navbar-light bg-light mb-5">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"> Dropdown </a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item"> Link 1 </a>
<a href="#" class="dropdown-item"> Link 2 </a>
<a href="#" class="dropdown-item"> Link 3 </a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- COLORS -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark text-white mb-3">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<br>
<br>
<!-- FIXED TOP -->
<nav style='z-index : 1;' class="navbar navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#" > Navbar Fixed Top </a>
</nav>
<!-- FIXED BOTTOM -->
<!-- FIXED TOP -->
<nav class="navbar navbar-dark bg-dark fixed-bottom">
<a class="navbar-brand" href="#" > Navbar Fixed Bottom </a>
</nav>
<!-- sticky TOP -->
<nav style='z-index:2;' class="navbar navbar-dark bg-dark sticky-top">
<a class="navbar-brand" href="#" > Navbar sticky Top </a>
</nav>
<br>
<br>
<div class="container">
<!-- NAVS -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="active nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 4</a>
</li>
</ul>
<!-- HORIZONTAL ALIGN -->
<ul style='border:2px solid red;' class="nav nav-pills mt-3 justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 4</a>
</li>
</ul>
<!-- RIGHT ALIGN -->
<ul style='border:2px solid red;' class="nav nav-pills mt-3 justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 4</a>
</li>
</ul>
<br>
<br>
<!-- VERTICAL -->
<ul style='border:2px solid red;' class="nav nav-pills mt-3 flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="active nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 4</a>
</li>
</ul>
<br>
<br>
<!-- FILL & JUSTIFY -->
<ul style='border:2px solid red;' class="nav nav-pills mt-3 nav-fill">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="active nav-link" href="#">Link 4</a>
</li>
</ul>
/* ---------------------- XX ------------------ */
/* List Groups & Badges */
<!-- LIST GROUP -->
<ul class="list-group mb-3">
<li class="list-group-item">My List Item One</li>
<li class="list-group-item">My List Item Two</li>
<li class="list-group-item">My List Item Three</li>
<li class="list-group-item">My List Item Four</li>
<li class="list-group-item">My List Item Five</li>
</ul>
<!-- LIST GROUP WITH LINKS -->
<ul class="list-group mb-3">
<a class="list-group-item" href="#">My List Item One</a>
<a class="list-group-item" href="#">My List Item Two</a>
<a class="list-group-item active" href="#">My List Item Three</a>
<a class="list-group-item" href="#">My List Item Four</a>
<a class="list-group-item" href="#">My List Item Five</a>
</ul>
<!-- CONTEXTUAL CLASSES -->
<ul class="list-group mb-3">
<li class="list-group-item">Regular List Item</li>
<li class="list-group-item list-group-item-primary">Primary List Item</li>
<li class="list-group-item list-group-item-secondary">Secondary List Item</li>
<li class="list-group-item list-group-item-success">Success List Item</li>
<li class="list-group-item list-group-item-info">Info List Item</li>
<li class="list-group-item list-group-item-warning">Warning List Item</li>
<li class="list-group-item list-group-item-danger">Danger List Item</li>
<li class="list-group-item list-group-item-light">Light List Item</li>
<li class="list-group-item list-group-item-dark">Dark List Item</li>
</ul>
<!-- FLUSH LIST GROUP -->
<ul class="list-group list-group-flush mb-3">
<li class="list-group-item">My List Item One</li>
<li class="list-group-item">My List Item Two</li>
<li class="list-group-item active">My List Item Three</li>
<li class="list-group-item">My List Item Four</li>
<li class="list-group-item">My List Item Five</li>
</ul>
<!-- BADGE -->
<ul class="list-group mb-3">
<li class="list-group-item">My List Item One</li>
<li class="list-group-item">My List Item Two</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
My List Item Three
<span class="badge badge-primary">30</span>
</li>
<li class="list-group-item">My List Item Four</li>
<li class="list-group-item">My List Item Five</li>
</ul>
<!-- BREADCRUMB -->
<ol class="breadcrumb">
<li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item" >Users</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">Users</a>
</li>
<li class="breadcrumb-item" >Brad</li>
</ol>
/* ---------------------- XX ------------------ */
/* Forms */
<!-- FORM -->
<form>
<!-- TEXT FIELD GROUPS -->
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" id="name" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input class="form-control form-control-lg" type="email" id="email" placeholder="Enter email">
<small class="form-text text-muted">
Your email will not ever be shared
</small>
</div>
<div class="form-group">
<label for="company">Company</label>
<input class="form-control form-control-sm" type="text" id="company" placeholder="Enter company name">
</div>
<div class="form-group">
<label for="company">Company 2 : </label>
<input class="form-control form-control-sm" type="text" id="company" placeholder="Read only Example" readonly>
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" id="password" placeholder="Password">
</div>
<!-- SELECT -->
<div class="form-group">
<label for="gender">Gender</label>
<select class="form-control" id="gender">
<option>Male</option>
<option>Female</option>
</select>
</div>
<!-- TEXTAREA -->
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" rows="3"></textarea>
</div>
<!-- FILE INPUT -->
<div class="form-group">
<label for="file">File input</label>
<input class="form-control-file" type="file" id="file">
<small class="form-text text-muted" id="fileHelp">Max 3mb size</small>
</div>
<!-- CUSTOM FILE INPUT -->
<div class="custom-file">
<input class="custom-file-input" type="file" id="myfile">
<label class="custom-file-label" for="myfile">Choose file</label>
</div>
<br>
<br>
<!-- RANGE -->
<div class="form-group">
<label for="membership">Membership Level</label>
<input class="custom-range" type="range" step="1" value='5' min="1" max="5">
</div>
<br>
<button class="btn btn-block btn-primary" type="submit">Submit</button>
</form>
<br>
<br>
<!-- INLINE FORM -->
<form class="form-inline">
<input class="form-control mr-2" type="text" id="username" placeholder="Enter username">
<input class="form-control mr-2" type="text" id="password" placeholder="Password">
<div class="form-check">
<label class="form-check-label mr-2">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button class="btn btn-light" type="submit">Submit</button>
</form>
<br>
<br>
<!-- FORM ROW -->
<form>
<div class="form-row">
<div class="col">
<input class="form-control" type="text" placeholder="First name">
</div>
<div>
<input class="form-control" type="text" placeholder="Last name">
</div>
</div>
</form>
<br>
<br>
<!-- VALIDATION -->
<div class="form-group">
<label for="username">Username</label>
<input class="form-control is-valid" type="text" id="username" placeholder="Validation example ( if it's valid )" >
</div>
<div class="form-group">
<label for="username">Username 2 </label>
<input class="form-control is-invalid" type="text" id="username" placeholder="Validation example ( if Not valid )" >
</div>
<div>
<label for="password">Password</label>
<input class="form-control is-invalid" type="text" id="password" placeholder="Feedback example ( below details )">
<div class="invalid-feedback">
Password not strong enough
</div>
</div>
<div>
<label for="password2">Confirm Password</label>
<input class="form-control" type="text" id="password2">
<div>
Password does not match
</div>
</div>
/* ---------------------- XX ------------------ */
/* Input Groups & Addons */
<!-- BASIC INPUT GROUPS -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input class="form-control" type="text" placeholder="Username">
</div>
<br>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Username">
<div class="input-group-append">
<span class="input-group-text">@something.com</span>
</div>
</div>
<br>
<label for="basic-url">Custom URL</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">https://something.com/member/</span>
</div>
<input type="text" class="form-control">
</div>
<br>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input class="form-control" type="text">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<br>
<!-- CHECKBOX -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox">
</div>
</div>
<input type="text" class="form-control">
</div>
<br>
<!-- RADIO -->
<div class="input-group mb-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="radio">
</div>
</div>
<input type="text" class="form-control">
</div>
<br>
<!-- MULTIPLE INPUTS -->
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">Name & Email</span>
</div>
<input class="form-control" type="text" placeholder="Full Name">
<input class="form-control" type="email" placeholder="Email">
</div>
<br>
<!-- BUTTON ADDONS -->
<div class="input-group mb-3">
<input class="form-control" type="text" placeholder="Find By Name...">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
</div>
/* ---------------------- XX ------------------ */
/* Alerts & Progress Bars */
<!-- ALERTS -->
<div class="alert alert-primary">
<strong>Primary</strong> Blog post added
</div>
<div class="alert alert-secondary">
<strong>Secondary</strong> Blog post added
</div>
<div class="alert alert-success">
<strong>Success</strong> Blog post added
</div>
<div class="alert alert-danger">
<strong>Danger</strong> Please check the log files
</div>
<div class="alert alert-info">
<strong>Info</strong> You have a new message
</div>
<div class="alert alert-warning">
<strong>Warning</strong> Please check the log files
</div>
<div class="alert alert-light">
<strong>Light</strong> Please check the log files
</div>
<div class="alert alert-dark">
<strong>Dark</strong> Please check the log files
</div>
<!-- DISMISSABLE ALERT -->
<div class="alert alert-success alert-dismissible">
<button class="close" type="button" data-dismiss="alert">
<span>×</span>
</button>
<strong>Dismissable</strong> Blog post added
</div>
<!-- EXTRA CONTENT -->
<div class="alert alert-success">
<h4 class="alert-heading">Congrats!</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit dignissimos eius, sit quo assumenda totam commodi
ipsum saepe molestias eligendi exercitationem repudiandae qui facilis deserunt non, harum ab quam? Cumque</p>
<hr>
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, odio?</p>
</div>
<br>
<br>
<!-- PROGRESS BARS -->
<div class="progress">
<div class="progress-bar" style='width:35%'></div>
</div>
<br>
<div class="progress">
<div class="progress-bar" style='width:80%'>80%</div>
</div>
<br>
<!-- STRIPED -->
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped" style='width : 70%;'></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped" style='width : 90%'>90%</div>
</div>
<!-- HEIGHT -->
<div class="progress my-3" style="height:2px">
<div class="progress-bar bg-success" style='width : 60%'></div>
</div>
<br>
<!-- ANIMATED -->
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style='width:60%;'></div>
</div>
<div class="progress mt-3">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style='width:90%;'>90%</div>
</div>
<br>
<!-- MULTIPLE BARS -->
<div class="progress">
<div class="progress-bar bg-warning" style='width:15%;'></div>
<div class="progress-bar bg-success" style='width:25%;'>25%</div>
<div class="progress-bar bg-primary progress-bar-striped progress-bar-animated" style='width:10%;'>Loading Amigo</div>
</div>
/* ---------------------- XX ----------------
-- */
/* Tables & Pagination */
<!-- TABLE -->
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>jdoe@gmail.com</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Will</td>
<td>Johnson</td>
<td>will@yahoo.com</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Shannon</td>
<td>Williams</td>
<td>shannon@yahoo.com</td>
</tr>
</tbody>
</table>
<br>
<!-- INVERSE/DARK TABLE -->
<table class="table table-dark">
</table>
<br>
<!-- TABLE HEAD INVERSE -->
<table class="table">
<thead class="thead-dark">
</thead>
</table>
<br>
<!-- STRIPED TABLE -->
<table class="table table-striped">
</table>
<!-- BORDERED TABLE -->
<table class="table table-bordered">
</table>
<br>
<!-- BORDERLESS TABLE -->
<table class="table table-borderless">
</table>
<br>
<!-- HOVERABLE -->
<table class="table table-hover">
</table>
<br>
<!-- CONTEXTUAL CLASSES -->
<table class="table">
</table>
<br>
<!-- SMALL TABLE -->
<table class="table table-sm table-hover table-striped">
</table>
<br>
<!-- RESPONSIVE TABLE - Scrollbars -->
<div class="table-responsive">
<table class="table">
</table>
</div>
<br>
<br>
<!-- PAGINATION -->
<nav>
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#">Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<!-- PAGINATION CENTERED -->
<nav>
<ul class="pagination justify-content-center">
</ul>
</nav>
<!-- PAGINATION RIGHT -->
<nav>
<ul class="pagination justify-content-end">
</li>
</ul>
</nav>
<!-- PAGINATION LARGE -->
<nav>
<ul class="pagination pagination-lg">
</ul>
</nav>
<!-- PAGINATION SMALL -->
<nav>
<ul class="pagination pagination-sm">
</ul>
</nav>
<!-- WITH ARROWS -->
<nav>
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#">
<span>«</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
<span>»</span>
</a>
</li>
</ul>
</nav>
/* ---------------------- XX ------------------ */
/* Cards */
<!-- BLOCK -->
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, voluptate.
</div>
</div>
<br>
<br>
<!-- SIMPLE CARD -->
<div class="card">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<h6 class="card-subtitle text-muted">Card subtitle</h6>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
<a class="btn btn-outline-primary" href="#">Read More</a>
</div>
</div>
<br>
<br>
<!-- CARD WITH IMAGE -->
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/random/300x200" alt="">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
<a class="btn btn-success btn-block" href="#">Read More</a>
</div>
</div>
<br>
<br>
<!-- CARD WITH HEADER -->
<div class="card">
<div class="card-header">
My Card
</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
<a class="btn btn-danger" href="#">Read More</a>
</div>
</div>
<br>
<br>
<!-- HEADER, FOOTER, CENTERED -->
<div class="card text-center">
<div class="card-header">
My Card
</div>
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, perspiciatis.</p>
<a class="btn btn-dark" href="#">Read More</a>
</div>
<div class="card-footer text-muted">
2 Days Ago
</div>
</div>
<br>
<br>
<!-- CARD WITH NAV -->
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</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. Aut, perspiciatis.</p>
<a class="btn btn-primary" href="#">Read More</a>
</div>
</div>
<br>
<br>
<!-- IMAGE OVERLAYS -->
<div class="text-white card">
<img class="card-img" src="https://source.unsplash.com/random/1000x300" alt="">
<div class="card-img-overlay">
<h4 class="card-text">Card title</h4>
<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>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<br>
<br>
<!-- BACKGROUND COLOR -->
<div class="card bg-primary text-white mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div class="card bg-danger text-white mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<br>
<br>
<!-- CARD OUTLINE -->
<div class="card border-primary mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div class="card border-danger mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<div class="card border-info mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
</div>
</div>
<br>
<br>
<!-- CARD GROUP -->
<div>
<div>
<div>
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
</div>
</div>
<div>
<div>
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
</div>
</div>
<div>
<div>
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
</div>
</div>
</div>
<br>
<br>
<!-- CARD DECK -->
<div>
<div>
<div>
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
</div>
</div>
<div>
<div>
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
</div>
</div>
<div>
<div>
<h4>Card Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, quas.</p>
</div>
</div>
</div>
<br>
<br>
<!-- CARD COLUMNS -->
<!-- CARD COLUMNS -->
<div class="card-columns">
<div class="card">
<img class="card-img-top img-fluid" src="https://source.unsplash.com/random/300x200" alt="">
<div class="card-body">
<h4 class="card-title">Card title that wraps to a new line</h4>
<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 class="card p-3">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small>
Someone famous in
<cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="https://source.unsplash.com/random/301x200" alt="">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<div class="card bg-dark text-white p-3">
<blockquote class="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer">
<small>
Someone famous in
<cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.
</p>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
<div class="card">
<img class="card-img-top img-fluid" src="https://source.unsplash.com/random/302x200" alt="">
</div>
<div class="card p-3 text-right">
<blockquote class="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small>
Someone famous in
<cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card bg-primary text-white">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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>
<p class="card-text">
<small class="text-muted">Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
/* ---------------------- XX ------------------ */
/* Media Object */
<!-- MEDIA OBJECT -->
<div class="media">
<img class="mr-3 mt-3" src="https://source.unsplash.com/random/90x90">
<div class="media-body">
<h5>Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue
felis in faucibus.
</div>
</div>
<br>
<br>
<!-- NESTING MEDIA OBJECTS -->
<div class="media">
<img class="mr-3" src="https://source.unsplash.com/random/90x91">
<div class="media-body">
<h5>Media heading</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue
felis in faucibus.
<div class="media mt-4">
<a href="#" class="pr-4">
<img src="https://source.unsplash.com/random/90x92">
</a>
<div class="media-body">
<h5>Nested Media</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
congue felis in faucibus.
</div>
</div>
</div>
</div>
<br>
<br>
<!-- TOP ALIGNED (DEFAULT) -->
<div class="media">
<img class="mr-3 align-self-start" src="https://source.unsplash.com/random/90x93">
<div class="media-body">
<h5>Top aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio,
vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.</p>
</div>
</div>
<br>
<br>
<!-- CENTER ALIGNED -->
<div class="media">
<img class="mr-3 align-self-center" src="https://source.unsplash.com/random/90x94">
<div class="media-body">
<h5>Center aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio,
vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.</p>
</div>
</div>
<br>
<br>
<!-- BOTTOM ALIGNED -->
<div class="media">
<img class="mr-3 align-self-end" src="https://source.unsplash.com/random/90x95">
<div class="media-body">
<h5>Bottom aligned media</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio,
vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
Donec lacinia congue felis in faucibus.</p>
</div>
</div>
<br>
<br>
<hr>
<!-- MEDIA LIST -->
<ul class="list-unstyled">
<li class="media">
<img class="mr-3" src="https://source.unsplash.com/random/90x96">
<div class="media-body">
<h5>List based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
congue felis in faucibus.
</div>
</li>
<li class="media">
<img class="mr-3" src="https://source.unsplash.com/random/90x97">
<div class="media-body">
<h5>List based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
congue felis in faucibus.
</div>
</li>
<li class="media">
<img class="mr-3" src="https://source.unsplash.com/random/90x98">
<div class="media-body">
<h5>List based media object</h5>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia
congue felis in faucibus.
</div>
</li>
</ul>
/* --------------- XX ----------- */
/* Jumbotron */
<!-- JUMBOTRON -->
<div class="jumbotron text-center">
<h1 class="display-4">Welcome To My Website!</h1>
<p class="lead">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum necessitatibus perspiciatis cum vitae, modi hic?</p>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, quibusdam.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Read More</a>
</div>
<br>
</div>
<!-- ./container -->
<!-- FLUID JUMBOTRON -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid Jumbotron</h1>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas recusandae voluptatibus, natus architecto asperiores
a.
</p>
</div>
</div>
/* --------------- XX ----------- */
/* Grid System */
<!-- RESPONSIVE GRID -->
<div class="row">
<div class="col-sm-6 col-md-8 col-lg-9 col-lg-10" style="border:1px solid #333">
<ul>
<li>6 column on small screens</li>
<li>8 column on medium screen</li>
<li>9 column on large screen</li>
<li>10 column on xlarge screen</li>
</ul>
</div>
<div class="col-sm-6 col-md-8 col-lg-9 col-lg-10" style="border:1px solid #333">
<ul>
<li>6 column on small screens</li>
<li>4 column on medium screen</li>
<li>3 column on large screen</li>
<li>2 column on xlarge screen</li>
</ul>
</div>
</div>
<!-- EQUAL WIDTH -->
<div class="row">
<div class="col" style="border:1px solid #333">Equal Width</div>
<div class="col" style="border:1px solid #333">Equal Width</div>
<div class="col" style="border:1px solid #333">Equal Width</div>
<div class="col" style="border:1px solid #333">Equal Width</div>
</div>
<!-- EQUAL WIDTH MULTI ROW -->
<div class="row">
<div class="col" style="border:1px solid #333">Equal Width Multi</div>
<div class="col" style="border:1px solid #333">Equal Width Multi</div>
<div class="w-100" style="border:1px solid #333"></div>
<div class="col" style="border:1px solid #333">Equal Width Multi</div>
<div class="col" style="border:1px solid #333">Equal Width Multi</div>
</div>
<!-- AUTO LAYOUT -->
<div class="row">
<div class="col" style="border:1px solid #333">Auto Layout</div>
<div class="col-6" style="border:1px solid #333">Auto Layout</div>
<div class="col-4" style="border:1px solid #333">Auto Layout</div>
</div>
<!-- EQUAL WIDTH STACKED -->
<div class="row">
<div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
<div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
<div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
</div>
<!-- ORDERING -->
<div class="row">
<div class="col order-3" style="border:1px solid #333">
First
</div>
<div class="col order-2" style="border:1px solid #333">
Second
</div>
<div class="col order-1" style="border:1px solid #333">
Third
</div>
</div>
<!-- OFFSETTING -->
<div class="row">
<!-- 6 column div offset by 3 -->
<div class="col-md-6 offset-md-3" style="border:1px solid #333">.col-md-6 .offset-md-3</div>
</div>
<div class="row">
<!-- 2 4 column divs, the second offset by 4 -->
<div class="col-md-4" style="border:1px solid #333">.col-md-4</div>
<div class="col-md-4 offset-md-4" style="border:1px solid #333">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<!-- 2 3 column divs, both offset by 3 -->
<div class="col-md-3 offset-md-3" style="border:1px solid #333">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3" style="border:1px solid #333">.col-md-3 .offset-md-3</div>
</div>
<!-- NESTING -->
<div class="row">
<div class="col-sm-9" style="border:1px solid blue">
Level 1: .col-sm-9
<div>
<div class="col-8 col-sm-6" style="border:1px solid red">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6" style="border:1px solid red">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
/* ------------------ XX --------------- */
/* Grid Alignment */
<!-- VERTICAL ALIGNMENT -->
<div class="container">
<div class="row align-items-start" style="height:200px;border:1px #333 solid">
<div class="col">
Top Aligned Text
</div>
<div class="col">
Top Aligned Text
</div>
<div class="col">
Top Aligned Text
</div>
</div>
<div class="row align-items-center" style="height:200px;border:1px #333 solid">
<div class="col">
Middle Aligned Text
</div>
<div class="col">
Middle Aligned Text
</div>
<div class="col">
Middle Aligned Text
</div>
</div>
<div class="row align-items-end" style="height:200px;border:1px #333 solid">
<div class="col">
Bottom Aligned Text
</div>
<div class="col">
Bottom Aligned Text
</div>
<div class="col">
Bottom Aligned Text
</div>
</div>
</div>
<br>
<br>
<!-- VERTICAL ALIGN INDIVIDUAL COLS -->
<div class="container">
<div class="row" style="height:200px;border:1px #333 solid">
<div class="col align-self-start">
Top Aligned
</div>
<div class="col align-self-center">
Middle Aligned
</div>
<div class="col align-self-end">
Bottom Aligned
</div>
</div>
</div>
<br>
<br>
<!-- HORIZONTAL ALIGNED COLS -->
<div class="container">
<div class="row justify-content-start" style="height:200px;border:1px #333 solid">
<div class="col-4">
Left Aligned Text
</div>
<div class="col-4">
Left Aligned Text
</div>
</div>
<div class="row justify-content-center" style="height:200px;border:1px #333 solid">
<div class="col-4">
Center Aligned Text
</div>
<div class="col-4">
Center Aligned Text
</div>
</div>
<div class="row justify-content-end" style="height:200px;border:1px #333 solid">
<div class="col-4">
Right Aligned Text
</div>
<div class="col-4">
Right Aligned Text
</div>
</div>
<div class="row justify-content-around" style="height:200px;border:1px #333 solid">
<div class="col-4">
Content Around
</div>
<div class="col-4">
Content Around
</div>
</div>
<div class="row justify-content-between" style="height:200px;border:1px #333 solid">
<div class="col-4">
Content Between
</div>
<div class="col-4">
Content Between
</div>
</div>
</div>
<br>
<br>
<!-- COLUMN WRAPPING & NO GUTTERS-->
<div class="row no-gutters">
<div class="col-9">
<div class="card">
<div class="card-block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card">
<div class="card-block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-block">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, repudiandae!</p>
</div>
</div>
</div>
</div>
</div>
/* ------------------ XX --------------- */
/* Flex */
<!-- FLEX ROW & FLEX ITEMS -->
<div class="d-flex flex-row row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- FLEX ROW REVERSE -->
<div class="d-flex flex-row-reverse row-hl">
<div class="p-4 item-hl">Flex Item 1</div>
<div class="p-4 item-hl">Flex Item 2</div>
<div class="p-4 item-hl">Flex Item 3</div>
</div>
<br>
<br>
<!-- JUSTIFY CONTENT - CONTENT START -->
<div class="d-flex row-hl justify-content-start">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- JUSTIFY CONTENT - CONTENT CENTER -->
<div class="d-flex row-hl justify-content-center">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- JUSTIFY CONTENT - CONTENT END -->
<div class="d-flex row-hl justify-content-end">
<div class="p-4 item-hl">Flex Item end</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- JUSTIFY CONTENT - CONTENT AROUND -->
<div class="d-flex row-hl justify-content-around">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- JUSTIFY CONTENT - CONTENT BETWEEN -->
<div class="d-flex row-hl justify-content-between">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- FLEX COLUMN -->
<div class="row-hl d-flex flex-column">
<div class="p-4 item-hl">Flex Item 11</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- FLEX COLUMN REVERSE -->
<div class="d-flex flex-column-reverse row-hl">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- VERTICAL ALIGN ITEMS - START -->
<div class="row-hl d-flex align-items-start">
<div class="p-4 item-hl">Flex Item Start</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- VERTICAL ALIGN ITEMS - CENTER -->
<div class="row-hl d-flex align-items-center">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- VERTICAL ALIGN ITEMS - END -->
<div class="row-hl d-flex align-items-end">
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- VERTICAL ALIGN ITEMS - BASELINE -->
<div class="row-hl d-flex align-items-baseline">
<div class="p-4 item-hl">Flex Item BASELINE</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- VERTICAL ALIGN ITEMS - STRETCH -->
<div class="row-hl d-flex align-items-stretch">
<div class="p-4 item-hl">Flex Item STRETCH</div>
<div class="p-4 item-hl">Flex Item</div>
<div class="p-4 item-hl">Flex Item</div>
</div>
<br>
<br>
<!-- ALIGN SELF -->
<div class="row-hl d-flex">
<div class="p-4 item-hl align-self-end">Flex Item End</div>
<div class="p-4 item-hl align-self-center">Flex Item</div>
<div class="p-4 item-hl align-self-start">Flex Item</div>
<div class="p-4 item-hl align-self-baseline">Flex baseline</div>
<div class="p-4 item-hl align-self-stretch">Flex stretch</div>
</div>
/* ------------------ XX --------------- */
/* Auto Margins & Wrap */
<!-- MR-AUTO -->
<div class="d-flex row-hl">
<div class="mr-auto p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
</div>
<br>
<br>
<!-- ML-AUTO -->
<div class="d-flex row-hl">
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="ml-auto p-2 item-hl">Flex item</div>
</div>
<br>
<br>
<!-- MB-AUTO -->
<div class="d-flex flex-column row-hl">
<div class="mb-auto p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
</div>
<br>
<br>
<!-- MT-AUTO -->
<div class="d-flex flex-column row-hl">
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 mt-auto item-hl">Flex item</div>
</div>
<br>
<br>
<!-- NO WRAP -->
<div class="d-flex row-hl">
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
</div>
<br>
<br>
<!-- WRAP -->
<div class="d-flex flex-wrap row-hl">
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
<div class="p-2 item-hl">Flex item</div>
</div>
<br>
<br>
<!-- ORDERING -->
<div class="d-flex row-hl">
<div class="p-2 order-3 item-hl">First flex item</div>
<div class="p-2 item-hl">Second flex item</div>
<div class="p-2 order-1 item-hl">Third flex item</div>
</div>
/* ------------------ XX --------------- */
/* Carousel */
<!--###################START HERE####################-->
<div class="container">
<div class="row">
<div class="col-sm-8 m-auto">
<!-- SIMPLE SLIDER -->
<div id="slider1" class="carousel slide mb-5" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
</div>
</div>
</div>
<!-- SLIDER WITH CONTROLS -->
<div id="slider2" class="carousel slide mb-5" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
</div>
</div>
<!-- CONTROLS -->
<a href="#slider2" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#slider2" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<!-- SLIDER WITH INDICATORS -->
<div id="slider3" class="carousel slide mb-5" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-target="#slider3" data-slide-to="0"></li>
<li data-target="#slider3" data-slide-to="1"></li>
<li data-target="#slider3" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
</div>
</div>
<!-- CONTROLS -->
<a href="#slider3" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#slider3" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<!-- SLIDER WITH CAPTIONS -->
<div id="slider4" class="carousel slide mb-5" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-target="#slider4" data-slide-to="0"></li>
<li data-target="#slider4" data-slide-to="1"></li>
<li data-target="#slider4" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://source.unsplash.com/wgq4eit198Q/700x400" alt="First Slide">
<div class="carousel-caption d-none d-md-block">
<h3>Slide One</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, illo?</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://source.unsplash.com/WLUHO9A_xik/700x400" alt="Second Slide">
<div class="carousel-caption d-none d-md-block">
<h3>Slide Two</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, illo?</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://source.unsplash.com/4yta6mU66dE/700x400" alt="Third Slide">
<div class="carousel-caption d-none d-md-block">
<h3>Slide Three</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus, illo?</p>
</div>
</div>
</div>
<!-- CONTROLS -->
<a href="#slider4" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#slider4" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</div>
/* ------------------ XX ------------------- */
/* collapse */
/* ------------------ XX ------------------- */
/* Tooltips */
/* ------------------ XX ------------------- */
/* Popovers */
/* ------------------ XX ------------------- */
/* Modals */
/* ------------------ XX ------------------- */
/* ScrollSpy */
/* ------------------ XX ------------------- */
/* Effect Animations */
//Methods :fadeOut, fadeIn, fadeTo, fadeToggle
$('elem').fadeOut(1000);
//fadeOut adds property 'display: none'
$('elem').fadeIn(1000)
$('elem').fadeTo(1000, 0.5);
// 0.5 will be the opacity.
$('elem').fadeToggle();
//Will Toggle between fadeOut and fadeIn. If it's already Faded out, It will fadeIn and vice-versa ( It will remeber opacity mentioned in line 6 and will provide same opacity.
$('elem').fadeTo(1000, 0);
// Opacity will be zero, But element will be there (Blank Space )
// Methods : hide , show, toggle
$('elem').hide();
// It will add prop "Display : none".
$('elem').hide(2000);
$('elem').show();
// It will add prop 'display : block'.
$('elem').show(2000);
$('elem').toggle();
//It will switch between none/block.
// Methods slideUp, slideDown, slideToggle
$('elem').slideUp();
$('elem').slideUp(2000);
//There will be cool animation, And it will add 'display:none'.
$('elem').slideUp();
$('elem').slideDown(3000);
// It will reverse the slideUp or it will pop up the element by adding prop 'display:block'.
$('elem').slideToggle(2000);
//It will switch between slideUp/slideDown.
//Animate ( Values have to be numerical )
$('div.blue-box').animate({
'margin-left' : '20px',
'margin-top':'18px'
}, 1000 )
// 1st way, It will set the margins and override the defauls ones,
// 2nd way, This is better as it will add/remove margins to the current provided
$('div.blue-box').animate({
'margin-left' : '+=20px',
'margin-top':'-=18px',
'opacity' : '0'
}, 1000 )
//We can also do camel casing in properties.
$('div.blue-box').animate({
'margin-left' : '+=200px',
'opacity' : '0.8',
'height' : '50px',
width : '50px',
'margin-top' : '10px',
borderRadius : '9px'
}, 1000 )
//Delaying and Chaining Examples.
$('elem').delay( time ).method( property )
$('p').delay(2000).slideToggle();
$('.box').delay(2000).fadeOut(1000,0.5).fadeOut().fadeIn();
//slideToggle() will work after 2 seconds.
//Timing the functinos according to the Time ( As a call back functions )
$('div#content .red-box').slideUp( 2000, 0, function(){
$('div#content .green-box').slideUp( 2000, 0 ,function(){
$('div#content .blue-box').slideUp(2000, 0 )
//All the call back functions are nested with each other.
})
})
// Or 1: using Arrow functions.
$('div#content .red-box').slideUp( 2000, 0 , () => {
$('div#content .green-box').slideUp( 2000, 0 , () => {
$('div#content .blue-box').slideUp(2000 , 0)
})
})
// Or 2: using Arrow functions + Chaining + using different methods in one program.
$('div#content .red-box').slideUp( 2000, 0 , () => {
$('div#content .green-box').animate({
marginTop : '20px',
'opacity' : '0.6',
}, 2000 , ()=>{
$('.blue-box').hide();
})
})
/* -----------------------XX ---------------------------- */
/* Selectors. */
$('.elem:first');
$('.elem:last');
$('.elem:even');
$('.elem:odd');
$('input:text,input:email');
$('input:checked');
$('input:selected');
$('body').children().not('.one').css('border' , '2px solid red');
$('.parent').children().not('.one').css("border","30px solid blue");
$('div.content').find('h1').css('text-align','center');
//or
$('ul').find('li').slideUp(2000);
//or
$('ul').children('li.spec').slideUp(2000); //Direct children 'li.spec' of 'ul'
//or
$('ul').find('li.spec').slideUp(2000);
$('ul').parent('body').css('color','red');
$('li').parents('ul').css('border', '2px solid red');
$('ul').children('ol').css('font-weight', 'bolder');
$('li').siblings('li').css('border', '2px solid red');
$('h1').next().css('border', '2px solid red');
$('h1').prev().css('border', '2px solid red');
$('li').filter(":odd").css('border', '2px solid red');
$('ul').find('li').filter(":even").css('border', '2px solid red');
$('ul').first().css('background-color', 'red');
$('ul').last().css('background-color', 'red')
$('li').eq( numberHere ).css('background-color', 'red');
$('li').eq( -numberHereFromBackToFront ).css('background-color', 'red');
/* -----------------------XX ----------------------*/
/* DOM */
//Adding
$('ol').append('<li> Will be last item on OL </li>');
$('<li> Seven </li>').appendTo(('ol'));
$('ol').prepend('<li> Will be Top Item on OL </li>');
$('<li> From Top Seven </li>').prependTo(('ol'));
$('div.one').after("<div class='box bg-info m -4'> after </div>");
$('div.one').before("<div class='box bg-secondary m -4'> before </div>")
$('div.one').before(()=>{
return "<div class='box bg-secondary m -4'> before </div>";
})
//We can do like this for all the above mentioned methods.
//replacing
$('li:even').replaceWith('<li> All the Even li will be replaced </li>');
$('li:even').replaceWith(()=>{
return 'Works same way, But we are returning using an function';
});
$('li:even').replaceAll('<li> All the Even li will be replaced </li>');
//Removing elements
$('li').remove();
$('p').empty(); //Will only remove the content inside the 'p', Will not remove the 'p' element itself. ( it basically empty it)
//Manipulating attributes.
$('a').attr('href');
$('img').attr('src');
$('div').attr('height');
//It will change the value;
$('a').attr('href','https://www.youtube.ca/');
//It will work as "checked" works in HTML. ( by default it will be checked )
$('input:checkbox').prop('checked');
//To get an value from the element. ( eleme.value ( vanilla script ))
$('eleme').val();
// classes
//Add class.
$('.select').addClass('classNameToBeAdd');
$('.select').addClass('classNameToBeAdd classNameToBeAdd2 classNameToBeAdd5'); //multiple classes.
$('div').addClass(function(index, currentClass){
if(currentClass === 'dummy01'){
return 'classNameOneToBeAdded' //Example : To add class using index or checking if the class prexisted or not.
}
})
//Remove classe.
$('.select').removeClass('classNameToBeRemoved');
$('.select').removeClass('classNameToBeRemoved classNameToBeRemoved2 classNameToBeRemoved4 ');
$('.select').addClass('class1').removeClasss('class3').addClass('blah blah2...') //Chaining it.
-------------------------------------
// data
let valuesArr = [10, 20, 30, 40, 50];
$('.element').data('keyHere', "valueHere");
console.log( $('.element').data('keyHere') );
$('.output').data('dataSet1', valuesArr);
$('.output').data('ds2', "Jaskaran");
console.log( $('.output').data('dataSet1')); //It will return the whole array('valuesArr')
console.log( $('.output').data('ds2') );
console.log($(".output").data()); //It will return all the data linked to the '.output' element.
$('.output').removeData("dataName"); // How to remove the data.
<p data-sampData1='Something to be stored'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio.
</p>
<script>
$('p').data();
//or
$('p').data('sampData1');
</script>
-----------------------------------------
//content
.text();
.html();
/* -----------------------XX ---------------------------- */
/* Event Handlers */
//Syntax
$('.elemt').methodName(function(){ });
$('eleme').click();
$('eleme').dblclick();
$('eleme').mouseenter();
$('eleme').mouseleave();
//hover(handlerIn, handerOut);
$('.elem').hover();
$('elem').hover( function(){console.log('code written from handlerIn')}, function(){console.log('code written from handlerOut')}) // We can use 'mouseenter' and 'mouseleave', But just another way to code.
//Adding multiple handlers on single "element" using "ON" method.
$('.elem').on("click dblclick mouseenter",function(){
console.log('Active : ')
});
//Delegated events,
//In case we add some dynamic elements( from js/external src). Events handlers are not added to the Dynamic content so we need to use 'Delegated events'.
$('.parent').on( "click", "p" ,function(){
$(this).slideUp();
});//In this case we have added 'p' tag from JS, So in order to access/select, We need to use such syntax.
//Data
<li data-item1='Item One Data Here...'>Write your own destiny</li>
<li data-item2="item Two Data here">Fate is what choices you make</li>
console.log($('li:first').data());
//{item1: "Item One Data Here..."}
console.log($('li:first').data('item1'));
//Item One Data Here
//KeyDown && keyup
$('elem').keydown(()=>{});
$('elem').keyup(()=>{});
$('elem').keydown((e)=>{console.log(e.which)});
//Focus, Change and blur
$('input').focus(function(){
$(this).css('box-shadow',"2px 2px 14px grey");
});
$('input').change(function(){
$(this).css('box-shadow',"2px 2px 14px grey");
})
$('input').blur(function(){
$(this).css('box-shadow',"2px 2px 14px grey");
})
//Css
$('elem').css('prop','val')
//classes
$('elem').addClass();
$('elem').removeClass();
$('elem').toggleClass();
$('.galleryBox').css('width');
//It will display 'width in pixels' properties of selector.
$('.galleryBox').width();
//It will display the width only in numbers ( no units )
//It will display the height only in numbers ( no units )
$('.galleryBox').height();
//chechbox toggle/update/check
let checkBox = $('input:checkbox').is(":checked");
console.log(checkBox)
//It will True if it's checked, False if unchecked.
,,,,,,,,,,
<!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
Comments