What is Bootstrap?
Bootstrap
is a free front-end framework for faster and easier web development
Bootstrap
includes HTML and CSS based design templates for typography, forms, buttons,
tables, navigation, modals, image carousels and many other, as well as optional
JavaScript plugins
Bootstrap
also gives you the ability to easily create responsive designs
What is Responsive Web Design?
Responsive
web design is about creating web sites which automatically adjust themselves to
look good on all devices, from small phones to large desktops.
Why use Bootsrap?
Advantages
of Bootstrap:
Easy to use: Anybody
with just basic knowledge of HTML and CSS can start using Bootstrap
Responsive features: Bootstrap's
responsive CSS adjusts to phones, tablets, and desktops
Mobile-first approach: In
Bootstrap, mobile-first styles are part of the core framework
Browser compatibility: Bootstrap
4 is compatible with all modern browsers (Chrome, Firefox, Internet Explorer
10+, Edge, Safari, and Opera)
Where to Get Bootstrap 4?
You can:
Include Bootstrap 4 from a CDN
Download Bootstrap 4 from getbootstrap.com
One advantage of using the Bootstrap 4 CDN:
Many users already have downloaded Bootstrap 4 from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.
jQuery and Popper?
Bootstrap 4 use jQuery and Popper.js for JavaScript components (like modals, tooltips, popovers etc). However, if you just use the CSS part of Bootstrap, you don't need them.
Many users already have downloaded Bootstrap 4 from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.
jQuery and Popper?
Bootstrap 4 use jQuery and Popper.js for JavaScript components (like modals, tooltips, popovers etc). However, if you just use the CSS part of Bootstrap, you don't need them.
Bootstrap 4 Grid System
Grid Classes
The
Bootstrap 4 grid system has five classes:
.col- (extra
small devices - screen width less than 576px)
.col-sm- (small
devices - screen width equal to or greater than 576px)
.col-md- (medium
devices - screen width equal to or greater than 768px)
.col-lg- (large
devices - screen width equal to or greater than 992px)
.col-xl- (xlarge
devices - screen width equal to or greater than 1200px)
The
classes above can be combined to create more dynamic and flexible layouts.
Responsive Coloumns
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Two Unequal Responsive Columns
<div
class="container-fluid">
<h1>Two Unequal Responsive
Columns</h1>
<p>Resize the browser window to see the
effect.</p>
<p>The columns will automatically stack
on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-4"
style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-8"
style="background-color:lavenderblush;">.col-sm-8</div>
</div>
</div>
Bootstrap
4 Colors
The classes for text colors are: .text-muted,
•
.text-primary,
•
.text-success,
•
.text-info,
•
.text-warning,
•
.text-danger,
•
.text-secondary,
•
.text-white,
•
.text-dark,
•
.text-body (default body color/often black) and
•
.text-light:
<p
class="text-muted">This text is muted.</p>
<p class="text-primary">This
text is important.</p>
<p class="text-success">This
text indicates success.</p>
<p class="text-info">This
text represents some information.</p>
<p class="text-warning">This
text represents a warning.</p>
<p class="text-danger">This
text represents danger.</p>
<p
class="text-secondary">Secondary text.</p>
<p class="text-dark">This
text is dark grey.</p>
<p class="text-body">Default
body color (often black).</p>
<p class="text-light">This
text is light grey (on white background).</p>
<p class="text-white">This
text is white (on white background).</p>
</div>
Opacity
Text Colors
<p
class="text-black-50">Black text with 50% opacity on white
background</p>
<p class="text-white-50
bg-dark">White text with 50% opacity on black background</p>
Background
Colors
<p
class="bg-primary text-white">This text is important.</p>
<p
class="bg-success text-white">This text indicates
success.</p>
<p class="bg-info
text-white">This text represents some information.</p>
<p class="bg-warning
text-white">This text represents a warning.</p>
<p class="bg-danger
text-white">This text represents danger.</p>
<p class="bg-secondary
text-white">Secondary background color.</p>
<p class="bg-dark
text-white">Dark grey background color.</p>
<p class="bg-light
text-dark">Light grey background color.</p>
Bootstrap
4 Tables
<table
class="table">
<thead>
<tr>
<th>Firstname</th> <th>Lastname</th> <th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td> <td>Doe</td> <td>john@example.com</td>
</tr>
</tbody>
</table>
Bootstrap
4 Images
<div
class="container">
<h2>Rounded Corners</h2>
<img src="cinqueterre.jpg"
class="rounded" alt="Cinque Terre" width="304"
height="236">
</div>
Bootstrap
4 Jumbotron
<div
class="container">
<div class="jumbotron">
<h1>Bootstrap
Tutorial</h1>
<p>Bootstrap is the most popular
HTML, CSS, and JS framework for developing responsive, mobile-first projects on
the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Bootstrap
4 Alerts
<div
class="alert alert-warning">
<strong>Warning!</strong> This
alert box could indicate a warning that might need attention.
</div>
<div class="alert
alert-danger">
<strong>Danger!</strong> This
alert box could indicate a dangerous or potentially negative action.
</div>
<div class="alert
alert-primary">
<strong>Primary!</strong>
Indicates an important action.
</div>
Closing
Alerts
To close
the alert message, add a .alert-dismissible class to the alert
container.
Then
add class="close" and
data-dismiss="alert" to
a link or a button element (when you click on this the alert box will
disappear).
Example
div class="alert alert-success
alert-dismissible">
<button
type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> This alert box could indicate a
successful or positive action.
</div>
<div
class="alert alert-info alert-dismissible">
<button
type="button" class="close"
data-dismiss="alert">×</button>
Animated
Alerts
The .fade and
.show classes
adds a fading
effect
when closing the alert message:
Example
<div
class="alert alert-success alert-dismissible fade show">
<button type="button"
class="close"
data-dismiss="alert">×</button>
<strong>Success!</strong> This
alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info
alert-dismissible fade show">
<button type="button"
class="close"
data-dismiss="alert">×</button>
Bootstrap
4 Buttons
•
btn-primary.
•
btn-secondary.
•
btn-success.
•
btn-danger.
•
btn-warning.
•
btn-info.
•
btn-light.
•
btn-dark
<button type="button"
class="btn">Basic</button>
<button type="button" class="btn
btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn
btn-success">Success</button>
<button type="button" class="btn
btn-info">Info</button>
<button type="button" class="btn
btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn
btn-dark">Dark</button>
<button type="button" class="btn
btn-light">Light</button>
<button type="button" class="btn
btn-link">Link</button>
Button
Outline
<button
type="button" class="btn btn-outline-primary">Primary</button>
<button type="button"
class="btn btn-outline-secondary">Secondary</button>
<button
type="button" class="btn
btn-outline-success">Success</button>
<button type="button"
class="btn btn-outline-info">Info</button>
<button type="button"
class="btn btn-outline-warning">Warning</button>
<button type="button"
class="btn btn-outline-danger">Danger</button>
<button type="button"
class="btn btn-outline-dark">Dark</button>
<button type="button"
class="btn btn-outline-light text-dark">Light</button>
Button
Sizes
<div
class="container">
<h2>Button Sizes</h2>
<button type="button"
class="btn btn-primary btn-lg">Large</button>
<button type="button"
class="btn btn-primary btn-md">Default</button>
<button type="button" class="btn
btn-primary btn-sm">Small</button>
</div>
Block
Level Buttons
<h2>Large
Block Level Buttons</h2>
<button type="button"
class="btn btn-primary btn-lg btn-block">Button 1</button>
<h2>Small Block Level Buttons</h2>
<button type="button" class="btn
btn-primary btn-sm btn-block">Button 1</button>
<h2>Block
Level Buttons</h2>
<button type="button"
class="btn btn-primary btn-block">Button 1</button>
Active/Disabled Buttons
<div
class="container">
<h2>Button States</h2>
<button type="button"
class="btn btn-primary">Primary Button</button>
<button type="button"
class="btn btn-primary active">Active Primary</button>
<button type="button"
class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn
btn-primary disabled">Disabled Link</a>
</div>
Spinner Buttons
<button
class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary"
disabled>
<span class="spinner-grow
spinner-grow-sm"></span>
Loading..
</button>
Button Groups
<div class="container">
<h2>Button
Group</h2>
<p>The
.btn-group class creates a button group:</p>
<div
class="btn-group">
<button
type="button" class="btn
btn-primary">Apple</button>
<button
type="button" class="btn
btn-primary">Samsung</button>
<button
type="button" class="btn
btn-primary">Sony</button>
</div>
</div>
Bootstrap 4 Badges
<div
class="container">
<h2>Badges</h2>
<h1>Example heading <span
class="badge badge-secondary">New</span></h1>
<h2>Example heading <span
class="badge badge-secondary">New</span></h2>
<h3>Example heading <span
class="badge badge-secondary">New</span></h3>
<h4>Example heading <span
class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge
badge-secondary">New</span></h5>
<h6>Example heading <span
class="badge badge-secondary">New</span></h6>
</div>
Contextual Badges
<span class="badge
badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
Pill Badges
<span class="badge
badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>
Badge inside an Element
<button
type="button" class="btn btn-primary">
Messages <span class="badge
badge-light">4</span>
</button>
<button type="button"
class="btn btn-danger">
Notifications <span class="badge
badge-light">7</span>
</button>
Bootstrap
4 Spinners
<div
class="spinner-border"></div>
<div class="spinner-border
text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
Growing
Spinners
<div class="spinner-grow
text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
Spinner
Buttons
<button class="btn
btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
Bootstrap
4 Pagination
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><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>
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><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>
Active
State
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><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>
Bootstrap
4 List Groups
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Active
State
<ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
List
Group With Linked Items
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">First item</a>
<a href="#" class="list-group-item list-group-item-action">First item</a>
<a href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
Disabled
Item
<div class="list-group">
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Bootstrap
4 Cards
<div
class="container">
<h2>Card Header and Footer</h2>
<div class="card">
<div
class="card-header">Header</div>
<div
class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
</div>
Contextual
Cards
<div
class="card">
<div class="card-body">Basic
card</div>
</div>
<br>
<div class="card bg-primary
text-white">
<div
class="card-body">Primary card</div>
</div>
<br>
Card
titles, text, and links
<div
class="card">
<div class="card-body">
<h4
class="card-title">Card title</h4>
<p class="card-text">Some
example text. Some example text.</p>
<a href="#"
class="card-link">Card link</a>
<a href="#"
class="card-link">Another link</a>
</div>
</div>
Card
Images
<div
class="card" style="width:400px">
<img class="card-img-top"
src="img_avatar1.png" alt="Card image"
style="width:100%">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p class="card-text">Some
example text some example text. John Doe is an architect and engineer</p>
<a href="#" class="btn
btn-primary">See Profile</a>
</div>
</div>
<p>Image at the bottom
(card-img-bottom):</p>
<div
class="card" style="width:400px">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Some example text some example
text. Jane Doe is an architect and engineer</p>
<a href="#" class="btn btn-primary">See
Profile</a>
</div>
<img class="card-img-bottom"
src="img_avatar6.png" alt="Card image"
style="width:100%">
Bootstrap
4 Dropdowns
<div
class="dropdown">
<button type="button"
class="btn btn-primary dropdown-toggle"
data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item"
href="#">Link 1</a>
<a class="dropdown-item"
href="#">Link 2</a>
<a class="dropdown-item"
href="#">Link 3</a>
</div>
</div>
Dropdown
Position
<div
class="dropdown dropright">
<button type="button"
class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropright button
</button>
<div class="dropdown-menu">
<a class="dropdown-item"
href="#">Link 1</a>
<a class="dropdown-item"
href="#">Link 2</a>
<a class="dropdown-item"
href="#">Link 3</a>
</div>
</div>
Dropdown
Menu Right
<div
class="dropdown">
<button type="button"
class="btn btn-primary dropdown-toggle"
data-toggle="dropdown">
Wide dropdown button to demonstrate this
example
</button>
<div class="dropdown-menu
dropdown-menu-right">
<a class="dropdown-item"
href="#">Link 1</a>
<a class="dropdown-item"
href="#">Link 2</a>
<a class="dropdown-item"
href="#">Link 3</a>
</div>
</div>
Dropup
<div
class="dropup">
<button type="button"
class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropup button
</button>
<div class="dropdown-menu">
<a class="dropdown-item"
href="#">Link 1</a>
<a class="dropdown-item"
href="#">Link 2</a>
</div>
</div>
Bootstrap
4 Collapse
The .collapse class
indicates a collapsible element
(a <div> in our example); this is the
content that will be
shown or
hidden with a click of a button.
To
control (show/hide) the collapsible content,
add
the data-toggle="collapse"attribute to an
<a>
or a <button> element. Then add the
data-target="#id" attribute
to connect the button
with the collapsible content (<div
id="demo">).
Note: For <a> elements, you can use the
href attribute
instead of the data-targetattribute:
Simple
Collapsible
<div
class="container">
<h2>Simple Collapsible</h2>
<a href="#demo" class="btn
btn-primary" data-toggle="collapse">Simple
collapsible</a>
<div id="demo"
class="collapse">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
</div>
Accordion
<div
class="container">
<h2>Accordion Example</h2>
<p><strong>Note:</strong>
The <strong>data-parent</strong> attribute makes sure that all
collapsible elements under the specified parent will be closed when one of the
collapsible item is shown.</p>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link"
data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne"
class="collapse show" data-parent="#accordion">
href attribute
instead of the data-targetattribute:
<div
class="card-body">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed
card-link" data-toggle="collapse"
href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo"
class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div
class="card">
<div class="card-header">
<a class="collapsed
card-link" data-toggle="collapse"
href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree"
class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</div>
Bootstrap
4 Navs
<div
class="container">
<h2>Nav</h2>
<p>Basic horizontal menu:</p>
<ul class="nav">
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled"
href="#">Disabled</a>
</li>
</ul>
</div>
Bootstrap
4 Navigation Bar
<nav
class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<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>
</ul>
</nav>
Brand /
Logo
<nav
class="navbar navbar-expand-sm bg-dark navbar-dark">
<a
class="navbar-brand" href="#">
<img src="bird.jpg"
alt="logo" style="width:40px;"> </a>
<ul
class="navbar-nav">
<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>
</ul>
</nav>
Collapsing
The Navigation Bar
o create a
collapsible navigation bar, use a button with
class="navbar-toggler",
data-toggle="collapse"
and data-target="#thetarget".
Then wrap the navbar content (links, etc)
inside a div
element
with class="collapse navbar-collapse",
followed by an id that matches the
data-target of
the button: "thetarget".
<nav class="navbar
navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse"data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse"data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse
navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
Navbar
With Dropdown
<nav class="navbar
navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<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>
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<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
dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
Navbar
With Dropdown
<nav class="navbar navbar-expand-sm bg-dark
navbar-dark sticky-top">
<a
class="navbar-brand" href="#">Logo</a>
<ul
class="navbar-nav">
<li
class="nav-item">
<a
class="nav-link" href="#">Link</a>
</li>
<li
class="nav-item">
<a
class="nav-link" href="#">Link</a>
</li>
</ul>
</nav>
Post a Comment
Post a Comment