0% found this document useful (0 votes)

3 views

Bootstrap

Uploaded by

Imperatore

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

3 views

Bootstrap

Uploaded by

Imperatore

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 32

https://shorturl.

at/3ICHe 6 Jun 2024

Colors
Lists
Modal
Tables
Inputgroups
Dropdown
Forms
Gridsystem
Badge
Breadcrumb
Spinners
Buttons
Cards
Progressbars
Alerts
Navs
Carousel
Navbar
Positional Attributes

Bootstrap
- Bootstrap is open source framework of CSS.
- It helps in designing responsive and device
friendly web pages.(RWD - responsive web design)
- Bootstrap includes CSS and optional scripting
(javascript) templates.
- This framework helps in faster web development.

History
- Bootstrap was developed by Mark otto and
Jacob Thoranton at Twitter in Aug 2011.
- Bootstrap 2.x was released on 31st Jan 2012,
with builtin support for Glyficons.
- V2.x onwards support for RWD.
- Bootstrap 3 was released on 19th Aug 2013.
- it focused on the mobile first approach.
- Bootstrap 4 was announced on 29th october 2014,
and stable release was on 18th Jan 2018.
- Stable version of 4 was 4.6
- Bootstrap -> 5 5th May 2021
-> 5.3.3 20th Feb 2024
- Official Website:- https://getbootstrap.com/

CDN:- Content delivery network.

Colors:-
- Bootstrap supports following colors
- primary
- secondary
- success
- danger
- warning
- info
- light
- dark
- white

- black
- white-50
- black-50

<body>
<h1>Welcome to Colours in Bootstrap</h1>
<h1 class="text-primary bg-warning">This is primary color</h1>
<h1 class="text-secondary bg-danger">This is secondary color</h1>
<h1 class="text-success bg-info">This is success color</h1>
<h1 class="text-warning bg-dark">This is warning color</h1>
<h1 class="text-danger bg-light">This is danger color</h1>
<h1 class="text-info bg-white">This is info color</h1>
<h1 class="text-dark bg-black">This is dark color</h1>
<h1 class="text-light bg-white-50">This is light color</h1>
<h1 class="text-white bg-black-50">This is white color</h1>

<h1 class="text-black bg-primary">This is black color</h1>

<h1 class="text-white-50 bg-secondary">This is 50% white color</h1>
<h1 class="text-black-50 bg-success">This is 50% black color</h1>

<p class="lead">I am important text</p>

<p class="text-muted">I am unimportant text</p>
</body>
Lists
list-group
list-group-item
list-group-item-action -> clickable
list-group-item-*...* -> colors
list-group-horizontal

active

<h1>Welcome to Lists</h1>
<ul class="list-group w-25 mx-auto">
<li class="list-group-item">Monitor</li>
<li class="list-group-item">Keyboard</li>
<li class="list-group-item">Mouse</li>
<li class="list-group-item">Speakers</li>
<li class="list-group-item">Mic</li>
<li class="list-group-item">CPU</li>
</ul>
<hr>
<div class="w-25 mx-auto">
<div class="list-group">
<div class="list-group-item">Monitor</div>
<div class="list-group-item">Keyboard</div>
<div class="list-group-item">Mouse</div>
<div class="list-group-item">Speaker</div>
<div class="list-group-item">Mic</div>
<div class="list-group-item">CPU</div>
</div>
</div>

<hr>
<div class="w-25 mx-auto">
<div class="list-group">
<div class="list-group-item">
<a href="#" class="list-group-item-action active"> Monitor</a>
</div>
<div class="list-group-item">
<a href="#" class="list-group-item-action">Keyboard</a>
</div>

<div class="list-group-item">
<a href="#" class="list-group-item-action">Mouse</a>
</div>

<div class="list-group-item">
<a href="#" class="list-group-item-action">Speaker</a>
</div>

<hr>
<div class="list-group list-group-horizontal w-50 mx-auto">
<div class="list-group-item active">
<a href="#" class="list-group-item-action">Monitor</a>
</div>

<div class="list-group-item list-group-item-primary ">

<a href="#" class="list-group-item-action">Keyboard</a>
</div>

<div class="list-group-item list-group-item-secondary">

<a href="#" class="list-group-item-action">Mouse</a>
</div>

<div class="list-group-item list-group-item-success">

<a href="#" class="list-group-item-action">Speaker</a>
</div>

<div class="list-group-item list-group-item-warning">

<div class="list-group-item list-group-item-info">

<a href="#" class="list-group-item-action">CPU</a>
</div>
</div>
<hr>
<div class="list-group w-50 mx-auto">
<a href="#" class="list-group-item
list-group-item-action
list-group-item-primary">
<p class="h4">Node.JS <small>21st March 2022</small></p>

<p>Rebum ea duo dolore amet invidunt accusam voluptua diam sanctus, et

sit et kasd ut ut gubergren invidunt
elitr, ipsum invidunt dolores invidunt magna magna est elitr ipsum
dolor, gubergren at justo ipsum diam,
eirmod sanctus eirmod ut diam sadipscing dolore stet rebum. No
gubergren justo magna eirmod labore. Clita.
</p>
</a>
<a href="#" class="list-group-item
list-group-item-action
list-group-item-warning">
<p class="h4">Javascript <small>7th March 2022</small> </p>
<p>Rebum ea duo dolore amet invidunt accusam voluptua diam sanctus, et
sit et kasd ut ut gubergren invidunt
elitr,
ipsum invidunt dolores invidunt magna magna est elitr ipsum dolor,
gubergren at justo ipsum diam, eirmod
sanctus
eirmod ut diam sadipscing dolore stet rebum. No gubergren justo
magna eirmod labore. Clita.</p>
</a>

<a href="#" class="list-group-item

list-group-item-action
list-group-item-success">
<p class="h4">Bootstrap <small>1 day ago</small> </p>
<p>Rebum ea duo dolore amet invidunt accusam voluptua diam sanctus, et
sit et kasd ut ut gubergren invidunt
elitr,
ipsum invidunt dolores invidunt magna magna est elitr ipsum dolor,
gubergren at justo ipsum diam, eirmod
sanctus
eirmod ut diam sadipscing dolore stet rebum. No gubergren justo
magna eirmod labore. Clita.</p>
</a>
</div>
<br><br><br>

Assignment
Create a small educational website, which will have
index.html with list of clickable topics,
on clicking that particular topic user should
navigate to corresponding page / section

Modal
Learning points
Sizes sm md lg
buttons btn class
fontawesome lib

Operations
- show modal data-toggle = 'modal'
- set target data-target = "#my_division"
- disable 'Esc' data-keyboard = 'false'
- disable mouse click data-backdrop = 'static'
- enable tabs tabindex = '-1'
- close modal data-dismiss = 'modal'
<body class="container mt-5">
<button class="btn btn-success float-right" data-toggle="modal"
data-target="#my_division">Add <span
class="fa fa-plus"></span></button>
<div id="my_division" class="modal fade"
data-keyboard = 'false'
data-backdrop = 'static'>
<div class="modal-dialog modal-sm modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Products </h5>
<button class="close"
data-dismiss='modal'>×</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>P_id</label>
<input type="number" class="form-control">
</div>

<div class="form-group">
<label>P_cost</label>
<input type="number" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success">Save</button>
<button class="btn btn-danger"
data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</body>

Tables:-
Learning points
margins ml mr mt mb
mx my
m
padding pl pr pt pb
px py
p

Here for both min value 0

max value 5

classes
table
table-bordered
table-borderless
table-sm md lg
table-hover
table-*...*

<body class="container mt-5">

<table class="table
table-bordered
table-dark
table-striped
table-hover
w-50 mx-auto">
<thead>
<th>Sr no</th>
<th>P_id</th>
<th>P_name</th>
<th>P_cost</th>
<th>Edit</th>
<th>Delete</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>111</td>
<td>P_one</td>
<td>100000</td>
<td > <span class="fa fa-edit text-warning"></span></td>
<td > <span class="fa fa-trash text-danger"></span></td>
</tr>
<tr>
<td>2</td>
<td>222</td>
<td>P_two</td>
<td>200000</td>
<td > <span class="fa fa-edit text-warning"></span></td>
<td > <span class="fa fa-trash text-danger"></span></td>
</tr>
<tr>
<td>3</td>
<td>333</td>
<td>P_three</td>
<td>300000</td>
<td > <span class="fa fa-edit text-warning"></span></td>
<td > <span class="fa fa-trash text-danger"></span></td>
</tr>
<tr>
<td>4</td>
<td>444</td>
<td>P_four</td>
<td>400000</td>
<td > <span class="fa fa-edit text-warning"></span></td>
<td > <span class="fa fa-trash text-danger"></span></td>
</tr>
<tr>
<td>5</td>
<td>555</td>
<td>P_five</td>
<td>500000</td>
<td > <span class="fa fa-edit text-warning"></span></td>
<td > <span class="fa fa-trash text-danger"></span></td>
</tr>
</tbody>
</table>
</body>

Input groups:-
classes
input-group
input-group-sm md lg
input-group-prepend
input-group-append
input-group-text

<body>
<div class="container mt-5">
<div class="input-group input-group-sm m-3">
<div class="input-group-prepend">
<div class="input-group-text">₹</div>
</div>
<input class="form-control">
</div>
<div class="input-group m-3">
<input class="form-control">
<div class="input-group-append">
<div class="input-group-text">@smrap.com</div>
</div>
</div>
<div class="input-group m-3">
<div class="input-group-prepend">
<div class="input-group-text">₹</div>
</div>
<input class="form-control">
<div class="input-group-append">
<div class="input-group-text bg-danger text-white">.00</div>
</div>
</div>
<div class="input-group m-3">
<div class="input-group-prepend">
<div class="input-group-text">
<input type="checkbox">
</div>
</div>
<input class="form-control">
</div>
<div class="input-group m-3">
<div class="input-group-prepend">
<div class="input-group-text">
Address
</div>
</div>
<textarea class="form-control"></textarea>
</div>
<div class="input-group m-3">
<div class="input-group-prepend">
<div class="input-group-text">₹</div>
</div>
<input class="form-control">
<input class="form-control">
<div class="input-group-append">
<div class="input-group-text bg-danger text-white">.00</div>
</div>
</div>
</div>
</body>

What is for prepend we will use append class and vice versa ?

dropdown
dropdown-toggle
dropdown-menu
dropdown-item
dropdown-toggle-split
dropdown-divider

data-toggle = "dropdown"

<body>
<div class="container mt-5">
<div class="input-group mb-5">
<div class="input-group-prepend">
<button class="btn btn-secondary btn-sm">Initials</button>
<button class="btn btn-secondary btn-sm dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown"></button>
<div class="dropdown-menu">
<div class="dropdown-item">Master</div>
<div class="dropdown-item">Miss</div>
<div class="dropdown-item">Mr</div>
<div class="dropdown-item">Mrs</div>
<div class="dropdown-divider"></div>
<div class="dropdown-item">Dr</div>
</div>
</div>
<input class="form-control">
</div>
</div>
</body>

Grid system
- Bootstrap divides the screen into 12 equal columns.

Screen Sizes(width in px)

es sm md lg xl xxl (B5.0 onw)
<576 >=576 >=768 >=992 >=1200 >=1400

<div class="row my-2">

<div class="row my-2">

<div class="row my-2">

<div class="row row-cols-4 my-3">

</div>
</body>

Forms:-
form-group
form-control
form-text
form-check
form-check-inline
form-check-label

<body>
<div class="container mt-5">
<h1 class="text-info my-4">Login Form</h1>
<form class="row">

<div>
<label class="col-2">Username:- </label>
</div>
<div class="col-3">
<input type="text" class="form-control">
</div>

<div>
<label class="col-2">Password:- </label>
</div>
<div class="col-3">
<input type="password" class="form-control">
</div>

<div class="col">
<input type="submit" value="Login" class="btn btn-success">
</div>
</form>

<h1 class="text-info my-4">Registration Form</h1>

<form>

<div class="form-group row">
<div class="col-2">
<label>First Name:- </label>
</div>
<div class="col-3">
<input type="text" class="form-control">
<small class="form-text text-danger">Enter First
name</small>
</div>
</div>

<div class="form-group row">
<div class="col-2">
<label>Last Name:- </label>
</div>
<div class="col-3">
<input type="text" class="form-control">
<small class="form-text text-danger">Enter Last
name</small>
</div>
</div>

<div class="form-group row">
<div class="col-2">
<label>Email:- </label>
</div>
<div class="col-3">
<div class="input-group">
<input type="email" class="form-control">
<div class="input-group-append">
<span class="input-group-text">
@tcs.com
</span>
</div>
</div>
<small class="form-text text-danger">Enter email</small>
</div>
</div>

<div class="form-group row">
<div class="col-2">
<label>Languages:- </label>
</div>
<div class="col-3">
<div class="form-check-inline">
<input type="checkbox" class="form-check-input mx-2">
<label class="form-check-label">Marathi</label>
<input type="checkbox" class="form-check-input mx-2">
<label class="form-check-label">Telugu</label>
<input type="checkbox" class="form-check-input mx-2">
<label class="form-check-label">English</label>
</div>
</div>
</div>

<div class="form-group row">
<div class="col-2">
<label>Gender:- </label>
</div>
<div class="col-3">
<div class="form-check-inline">
<input type="radio" class="form-check-input mx-2" name
= 'gender'>
<label class="form-check-label">Male</label>
<input type="radio" class="form-check-input mx-2"
name="gender">
<label class="form-check-label">Female</label>
</div>
</div>
</div>

<div class="form-group row">
<div class="col-2">
<label>Address:- </label>
</div>
<div class="col-3">
<textarea class="form-control"></textarea>
</div>
</div>

<div class="form-group row">
<input type="submit" class="btn btn-success col-5">

</div>
</form>
</div>
</body>

Badge
- badge
- badge-pill
- badge-*...*

breadcrumb "/" character or separator

breadcrumb
breadcrumb-item

active

.breadcrumb-item+.breadcrumb-item::before {
float: left;
padding-right: 0.5rem;
color: #FF0000;
content: "-";
}
</style>
</head>

<body>
<div class="container mt-5">
<nav>
<ul class="breadcrumb">
<li class="breadcrumb-item active">Home</li>
<li class="breadcrumb-item">About</li>
<li class="breadcrumb-item">Portfolio</li>
<li class="breadcrumb-item">Contact</li>
<li class="breadcrumb-item">Logout</li>
</ul>
</nav>
</div>
</body>

spinners:-
- spinner-border
- spinner-grow
- spinner-border-sm
- spinner-grow-sm

Buttons:-
btn
btn-*...*
btn-outline
btn-outline-*...*
btn-block
btn-link
btn-group
btn-sm md lg

button as link
link as button

<div class="container mt-5">

<button class="btn btn-primary">Click Me</button>
<button class="btn btn-secondary"> Click Me</button>
<button class="btn btn-success"> Click Me</button>
<button class="btn btn-warning"> Click Me</button>
<button class="btn btn-danger"> Click Me</button>
<button class="btn btn-info"> Click Me</button>
<button class="btn btn-light"> Click Me</button>
<button class="btn btn-dark"> Click Me</button>

<button class="btn btn-white"> Click Me</button>
<button class="btn btn-black"> Click Me</button>
<br><br>
<button class="btn btn-outline-primary">Click Me</button>
<button class="btn btn-outline-secondary">Click Me</button>
<button class="btn btn-outline-success">Click Me</button>
<button class="btn btn-outline-warning">Click Me</button>
<button class="btn btn-outline-danger">Click Me</button>
<button class="btn btn-outline-info">Click Me</button>
<button class="btn btn-outline-light">Click Me</button>
<button class="btn btn-outline-dark">Click Me</button>

<button class="btn btn-outline-black">Click Me</button>
<button class="btn btn-outline-white">Click Me</button>
<br><br>
<a href="#" class="btn btn-success">Learn More</a>
<button class="btn btn-link">Learn More</button>
<br><br>
<button class="btn btn-outline-info btn-sm">click me</button>
<button class="btn btn-outline-info btn-md">click me</button>
<button class="btn btn-outline-info btn-lg">click me</button>
<br><br>
<button class="btn btn-outline-success btn-sm btn-block">Block
Button</button>
<button class="btn btn-outline-success btn-md btn-block">Block
Button</button>
<button class="btn btn-outline-success btn-lg btn-block">Block
Button</button>
<br><br>
<div class="btn btn-group">
<button class="btn btn-outline-warning">
<< </button>
<button class="btn btn-outline-danger">></button>
<button class="btn btn-outline-warning">>></button>
</div>
<div class="btn btn-group">
<button class="btn btn-outline-warning fa
fa-angle-double-left"></button>
<button class="btn btn-outline-danger fa fa-play"></button>
<button class="btn btn-outline-warning fa
fa-angle-double-right"></button>
</div>
</div>

Try for Blinking buttons

Cards
card
card-header
card-body
card-footer
card-img-top
card-img-bottom
card-title
card-text
card-link
card-border
card-group
card-deck

bg-*...*
text-*...*

<body>
<div class="container mt-5">
<div class="card w-25 my-3">
<div class="card-header">Header</div>
<div class="card-body">Body</div>
<div class="card-footer">Footer</div>
</div>
<div class="card w-25 my-3">
<div class="card-header">Header</div>
<div class="card-body">
<h2 class="card-title">Title</h2>
<p class="card-text">Clita at amet at ipsum accusam voluptua
sed et dolore, et elitr no justo et eos
voluptua accusam dolore. Invidunt.</p>
</div>
<div class="card-footer">Footer</div>
</div>
<div class="card border-primary w-25 my-3">
<div class="card-header">Header</div>
<div class="card-body">
<h2 class="card-title">Title</h2>
<p class="card-text">Clita at amet at ipsum accusam voluptua
sed et dolore, et elitr no justo et eos
voluptua accusam dolore. Invidunt.</p>
</div>
<div class="card-footer">Footer</div>
</div>
<hr>
<div class="card-group">
<div class="card w-25 my-3 border-dark">
<img src="img/Headphone1.jpg" class="card-img-top">

<div class="card-body">
<div class="card-title h2">Studio</div>
<div class="card-subtitle text-muted h4">A2DP</div>
<div class="card-text">Stet accusam aliquyam dolores erat
tempor. Sit duo aliquyam eirmod accusam
eirmod
ut. Amet ea.</div>
</div>
<div class="card-footer">
<a href="#" class="btn btn-outline-info btn-block
btn-sm">Learn More</a>
<a href="#" class="btn btn-outline-success btn-block
btn-sm">Add to Cart</a>
<a href="#" class="btn btn-outline-success btn-block
btn-sm">Buy Now</a>
</div>
</div>
<div class="card w-25 my-3 border-dark">
<img src="img/Headphone2.jpg" class="card-img-top">

<div class="card-body">
<div class="card-title h2">Studio</div>
<div class="card-subtitle text-muted h4">A2DP</div>
<div class="card-text">Stet accusam aliquyam dolores erat
tempor. Sit duo aliquyam eirmod accusam
eirmod
ut. Amet ea.</div>
</div>
<div class="card-footer">
<a href="#" class="btn btn-outline-info btn-block
btn-sm">Learn More</a>
<a href="#" class="btn btn-outline-success btn-block
btn-sm">Add to Cart</a>
<a href="#" class="btn btn-outline-success btn-block
btn-sm">Buy Now</a>
</div>
</div>
</div>
<div class="card-deck">
<div class="card w-25 my-3 border-dark">
<img src="img/Headphone1.jpg" class="card-img-top">

Progressbars:-
progress ->outer
progress-bar ->inner
progress-bar-striped
progress-bar-animated

Alerts
alert
alert-*...*
alert-link
alert-heading

data-dismiss = "alert"

<div class="container mt-5">

<div class="alert alert-primary">This is primary alert</div>
<div class="alert alert-secondary">Secondary Alert</div>
<div class="alert alert-success">Success Alert</div>
<div class="alert alert-warning">Warning Alert</div>
<div class="alert alert-danger">Danger Alert</div>
<div class="alert alert-info">Info Alert</div>
<div class="alert alert-light">Light Alert</div>
<div class="alert alert-dark">Dark Alert</div>
<br>
<div class="alert alert-dark">
<a href="#">Click Me</a>
</div>
<div class="alert alert-info alert-dismissible fade show">
<p class="h4 alert-heading">Dismissible alert</p>
<button data-dismiss = 'alert' class="close">×</button>
</div>
<div class="alert alert-success fade show">
<p class="h4 alert-heading">Heading
<button data-dismiss = 'alert' class="close">×</button></p>
<p class="text-justify"> Takimata invidunt sed amet aliquyam
sanctus justo sed sed et sed, erat dolor duo voluptua elitr rebum, ea at et
dolor dolor elitr ea aliquyam tempor, sed erat consetetur sadipscing sed et.
Takimata tempor amet invidunt sit tempor labore, justo nonumy lorem justo
dolor duo clita consetetur et, sea tempor dolor diam ut eos. Erat sed justo
diam sea stet dolor sadipscing dolor. Et labore voluptua labore rebum, lorem
dolor dolores vero et aliquyam, accusam ipsum takimata vero ut vero. Takimata
erat justo eirmod stet ut aliquyam ea eos. Dolor lorem justo takimata magna
vero erat takimata voluptua, dolor lorem ipsum sit eirmod consetetur ipsum,
invidunt dolores kasd justo stet justo, ea dolores et erat amet amet sit, diam
elitr ipsum amet kasd consetetur. Voluptua voluptua accusam sed est dolore
kasd sadipscing, accusam diam erat kasd rebum eirmod nonumy takimata ipsum
ipsum, dolore rebum elitr dolor est dolor dolor. Diam stet invidunt accusam
sea dolore gubergren consetetur dolores kasd. Nonumy et tempor eirmod et dolor
clita elitr ipsum, labore dolores labore rebum rebum dolores stet kasd
voluptua eos, accusam rebum voluptua ut accusam sadipscing justo aliquyam et,
eirmod elitr sed tempor dolor et et. Eos justo consetetur vero ipsum at dolor
labore, sit et duo et elitr. Labore eirmod clita dolore et gubergren. Diam
voluptua justo clita dolores ut, rebum clita ipsum sea erat clita est, clita
labore kasd eos sea elitr et kasd, et sadipscing kasd et dolor sanctus.
Gubergren erat ipsum invidunt vero sit at magna gubergren, justo. </p>
<hr>
<a href="#" class="alert-link">Learn More</a>
<a href="#" class="alert-link float-right">Submit</a>
</div>
</div>

Navs
nav
nav-item
nav-link
nav-tabs
nav-pills
nav-fill
nav-justified

active

<nav class="nav">
<a href="#" class="nav-link active">Home</a>
<a href="#" class="nav-link">About</a>
<a href="#" class="nav-link">Portfolio</a>
<a href="#" class="nav-link">Contact</a>
<a href="#" class="nav-link disabled">Disabled</a>
</nav>
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Portfolio</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">Disabled</a>
</li>
</ul>

<ul class="nav justify-content-center">

<ul class="nav nav-tabs">

<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle =
"dropdown">Subjects</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">DS</a>
<a href="#" class="dropdown-item">OOPS</a>
<a href="#" class="dropdown-item">AI</a>
<a href="#" class="dropdown-item">ML</a>
<a href="#" class="dropdown-item">DAA</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Bootstrap</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Portfolio</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled" >Disabled</a>
</li>
</ul>

<br><br>
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle =
"dropdown">Subjects</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">DS</a>
<a href="#" class="dropdown-item">OOPS</a>
<a href="#" class="dropdown-item">AI</a>
<a href="#" class="dropdown-item">ML</a>
<a href="#" class="dropdown-item">DAA</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Bootstrap</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Portfolio</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled" >Disabled</a>
</li>
</ul>
<hr>
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#home" class="nav-link active"
data-toggle="tab">Home</a>
</li>
<li class="nav-item ">
<a href="#about" class="nav-link" data-toggle="tab">About</a>
</li>
<li class="nav-item">
<a href="#portfolio" class="nav-link "
data-toggle="tab">Portfolio</a>
</li>
<li class="nav-item ">
<a href="#contact" class="nav-link"
data-toggle="tab">Contact</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled " >Disabled</a>
</li>
</ul>
<hr>
<div class="row">
<ul class="nav nav-pills flex-column col-2">
<li class="nav-item">
<a href="#home" class="nav-link active"
data-toggle="pill">Home</a>
</li>
<li class="nav-item ">
<a href="#about" class="nav-link"
data-toggle="pill">About</a>
</li>
<li class="nav-item">
<a href="#portfolio" class="nav-link "
data-toggle="pill">Portfolio</a>
</li>
<li class="nav-item ">
<a href="#contact" class="nav-link"
data-toggle="pill">Contact</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled " >Disabled</a>
</li>
</ul>
<div class="tab-content col">
<div class="tab-pane fade show active" id = "home">Home
contents <br> Eirmod sit amet no ipsum justo, et et magna accusam sadipscing
dolor consetetur dolor, invidunt amet amet gubergren stet ipsum elitr amet
erat, labore et invidunt rebum sit, erat gubergren consetetur eos lorem clita
eirmod magna. Amet justo eirmod duo amet gubergren ipsum, ipsum consetetur
invidunt dolores consetetur invidunt aliquyam.</div>
<div class="tab-pane fade show" id = "about">About contents
<br>Eirmod sit amet no ipsum justo, et et magna accusam sadipscing dolor
consetetur dolor, invidunt amet amet gubergren stet ipsum elitr amet erat,
labore et invidunt rebum sit, erat gubergren consetetur eos lorem clita eirmod
magna. Amet justo eirmod duo amet gubergren ipsum, ipsum consetetur invidunt
dolores consetetur invidunt aliquyam. </div>
<div class="tab-pane fade show" id = "portfolio">Portfolio
contents <br>Eirmod sit amet no ipsum justo, et et magna accusam sadipscing
dolor consetetur dolor, invidunt amet amet gubergren stet ipsum elitr amet
erat, labore et invidunt rebum sit, erat gubergren consetetur eos lorem clita
eirmod magna. Amet justo eirmod duo amet gubergren ipsum, ipsum consetetur
invidunt dolores consetetur invidunt aliquyam. </div>
<div class="tab-pane fade show" id = "contact">Contact
contents <br>Eirmod sit amet no ipsum justo, et et magna accusam sadipscing
dolor consetetur dolor, invidunt amet amet gubergren stet ipsum elitr amet
erat, labore et invidunt rebum sit, erat gubergren consetetur eos lorem clita
eirmod magna. Amet justo eirmod duo amet gubergren ipsum, ipsum consetetur
invidunt dolores consetetur invidunt aliquyam. </div>
</div>
</div>
</div>

Carousel
carousel slide
carousel-inner
carousel-item
carousel-control-prev-icon
carousel-control-next-icon
carousel-control-prev
carousel-control-next
carousel-indicators
carousel-caption
carousel-fade

data-ride = "carousel"
data-touch = "false" -> disable touch screen
data-interval

<body>
<div class="carousel slide carousel-fade" id="mycarousel"
data-ride="carousel" data-touch="false">
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="0"></li>
<li data-target="#mycarousel" data-slide-to="1"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
<li data-target="#mycarousel" data-slide-to="4"></li>
<li data-target="#mycarousel" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" data-interval="100">
<div class="carousel-item active">
<img src="./img/Landscape01.jpg" class="w-100">
<div class="carousel-caption">
<h5>Mountains</h5>
<p>Sit eirmod sanctus dolor ea no. Et est justo accusam
duo ipsum voluptua, dolore ipsum magna kasd
kasd clita, kasd.</p>
</div>
</div>
<div class="carousel-item" data-interval="100">
<img src="./img/Landscape02.jpg" class="w-100">
<div class="carousel-caption">
<h5>Himalays</h5>
<p>Et erat lorem dolor amet lorem et amet amet, ut at
sadipscing sadipscing lorem vero elitr amet.
Elitr dolor ipsum stet eos eirmod elitr dolor.</p>
</div>
</div>
<div class="carousel-item" data-interval="200">
<img src="./img/Landscape03.jpg" class="w-100">
<div class="carousel-caption">
<h5>Lake view</h5>
<p>Lorem sea eos aliquyam nonumy consetetur et aliquyam.
Sadipscing sit dolores tempor dolor ea
invidunt at lorem dolores, magna voluptua.</p>
</div>
</div>
<div class="carousel-item" data-interval="1000">
<img src="./img/Landscape04.jpg" class="w-100">
<div class="carousel-caption">
<h5>Waterfall</h5>
<p>Ea est sed vero dolore amet dolor duo amet, diam justo
duo lorem dolore, eos consetetur ea sit
duo vero, et sit diam et clita..</p>
</div>
</div>

<div class="carousel-item">
<div class="card w-25 m-auto">
<div class="card-body">
<p class="h2 card-title">Title</p>
<p class="card-text">Aliquyam ut kasd kasd diam rebum
amet. Consetetur et kasd sit takimata ut
takimata. Dolore rebum erat ipsum sit sit sit,
tempor duo gubergren stet tempor nonumy
sanctus rebum accusam, aliquyam dolore lorem
dolore vero dolore voluptua. Nonumy diam
aliquyam ipsum amet diam, nonumy diam voluptua
magna justo amet sed lorem, sed est dolore
dolores no sit sed dolor et lorem, diam sed justo
vero diam et eos et, erat amet lorem at
ipsum eirmod.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-outline-info
btn-block">Learn More</a>
<a href="#" class="btn btn-outline-success
btn-block">add to cart</a>
<a href="#" class="btn btn-outline-secondary
btn-block">Buy Now</a>
</div>
</div>
</div>

<div class="carousel-item">
<div class="card-deck">
<div class="card w-25 ">
<div class="card-body">
<p class="h2 card-title">Title</p>
<p class="card-text">Aliquyam ut kasd kasd diam
rebum amet. Consetetur et kasd sit takimata
ut takimata. Dolore rebum erat ipsum sit sit
sit, tempor duo gubergren stet tempor
nonumy sanctus rebum accusam, aliquyam dolore
lorem dolore vero dolore voluptua. Nonumy
diam aliquyam ipsum amet diam, nonumy diam
voluptua magna justo amet sed lorem, sed est
dolore dolores no sit sed dolor et lorem, diam
sed justo vero diam et eos et, erat amet
lorem at ipsum eirmod.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-outline-info
btn-block">Learn More</a>
<a href="#" class="btn btn-outline-success
btn-block">add to cart</a>
<a href="#" class="btn btn-outline-secondary
btn-block">Buy Now</a>
</div>
</div>

<div class="card w-25 ">

<div class="card-body">
<p class="h2 card-title">Title</p>
<p class="card-text">Aliquyam ut kasd kasd diam
rebum amet. Consetetur et kasd sit takimata
ut takimata. Dolore rebum erat ipsum sit sit
sit, tempor duo gubergren stet tempor
nonumy sanctus rebum accusam, aliquyam dolore
lorem dolore vero dolore voluptua. Nonumy
diam aliquyam ipsum amet diam, nonumy diam
voluptua magna justo amet sed lorem, sed est
dolore dolores no sit sed dolor et lorem, diam
sed justo vero diam et eos et, erat amet
lorem at ipsum eirmod.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-outline-info
btn-block">Learn More</a>
<a href="#" class="btn btn-outline-success
btn-block">add to cart</a>
<a href="#" class="btn btn-outline-secondary
btn-block">Buy Now</a>
</div>
</div>
<div class="card w-25 ">
<div class="card-body">
<p class="h2 card-title">Title</p>
<p class="card-text">Aliquyam ut kasd kasd diam
rebum amet. Consetetur et kasd sit takimata
ut takimata. Dolore rebum erat ipsum sit sit
sit, tempor duo gubergren stet tempor
nonumy sanctus rebum accusam, aliquyam dolore
lorem dolore vero dolore voluptua. Nonumy
diam aliquyam ipsum amet diam, nonumy diam
voluptua magna justo amet sed lorem, sed est
dolore dolores no sit sed dolor et lorem, diam
sed justo vero diam et eos et, erat amet
lorem at ipsum eirmod.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-outline-info
btn-block">Learn More</a>
<a href="#" class="btn btn-outline-success
btn-block">add to cart</a>
<a href="#" class="btn btn-outline-secondary
btn-block">Buy Now</a>
</div>
</div>
</div>
</div>

<a href="#mycarousel" class="carousel-control-prev "

data-slide="prev">
<div class="carousel-control-prev-icon spa"></div>
</a>
<a href="#mycarousel" class="carousel-control-next"
data-slide="next">
<span class="carousel-control-next-icon spa"></span>
</a>
</div>
</div>

</body>

Navbars

<body>
<div class="navbar navbar-light bg-light text-dark navbar-expand-lg">
<a href="#" class="navbar-brand h1 mb-0">
<img height="30"
src="https://lh3.googleusercontent.com/TSsNSUnBVlA42LYJ9cXb4xjSo_acdqUQDwKx0uK
gLw6RdV4wKP39clKk69QGnQZxWqmrtGKr_VomajIjag=w1080-h608-p-no-v0" alt="">
Pranvi Computech
</a>

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

data-target = "#my_options">
<span class="navbar-toggler-icon"></span>
</button>

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

<li class="nav-item">
<a href="#" class="nav-link">Javascript</a>
</li>

<li class="nav-item">
<a href="#" class="nav-link">Python</a>
</li>

<li class="nav-item">
<a href="#" class="nav-link">Frameworks</a>
</li>

<li class="nav-item">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
</div>
</div>
</body>

Positional Attributes
Sticky
sticky-top

Fixed
fixed-top
fixed-center

text-center

Float
float-left
float-right
float-none

Float with breakpoints

Eg float-left
float-md-left
<h6 class="float-right"> FR SRMAP </h6>
<h6 class="float-md-right"> FDR SRMAP </h6>

Jumbotron
<div class="jumbotron">
<h1>SRMAP</h1>
</div>

Images:-
img-fluid
img-thumbnail
rounded
rounded-circle
float-left
float-right
d-block

https://images.8tracks.com/cover/i/001/128/832/87104.original-9080.jpg?r
ect=240,0,800,800&q=98&fm=jpg&fit=max&w=1280&h=1280

https://wallpaperaccess.com/full/1209562.jpg

User registration form bootstrap (1)
No ratings yet
User registration form bootstrap (1)
11 pages
bootstrap example (1)
No ratings yet
bootstrap example (1)
3 pages
Michaelphilliph 46
No ratings yet
Michaelphilliph 46
4 pages
Web Paper
No ratings yet
Web Paper
22 pages
Contoh Dokumentasi Projek
No ratings yet
Contoh Dokumentasi Projek
16 pages
BootStrap Intro
No ratings yet
BootStrap Intro
7 pages
k224818-WE-LAB-3.
No ratings yet
k224818-WE-LAB-3.
14 pages
header
No ratings yet
header
2 pages
PHP PHP
No ratings yet
PHP PHP
7 pages
Code Belajar Bareng Bootstrap
No ratings yet
Code Belajar Bareng Bootstrap
28 pages
Codigovideo (1 y 2)
No ratings yet
Codigovideo (1 y 2)
10 pages
Source Code
No ratings yet
Source Code
75 pages
mini
No ratings yet
mini
29 pages
Task Management Basic App Only Frontend
No ratings yet
Task Management Basic App Only Frontend
9 pages
Listing Program Capil
No ratings yet
Listing Program Capil
27 pages
Dash
No ratings yet
Dash
5 pages
code igniter
No ratings yet
code igniter
7 pages
Portfolio Code
No ratings yet
Portfolio Code
12 pages
Cart HTML
No ratings yet
Cart HTML
5 pages
Home For Student
No ratings yet
Home For Student
76 pages
function App() {
No ratings yet
function App() {
12 pages
HTML About Info
No ratings yet
HTML About Info
4 pages
Code Belajar Bareng Bootstrap
No ratings yet
Code Belajar Bareng Bootstrap
37 pages
Source Code
No ratings yet
Source Code
15 pages
Listing Program
No ratings yet
Listing Program
25 pages
Materi Workshop Laravel Stmik Widuri by WCC (Front End)
No ratings yet
Materi Workshop Laravel Stmik Widuri by WCC (Front End)
19 pages
Meu Site
No ratings yet
Meu Site
3 pages
Bootstrap 4 Cheat Sheet BC
No ratings yet
Bootstrap 4 Cheat Sheet BC
13 pages
Blababala
No ratings yet
Blababala
3 pages
Testcode
No ratings yet
Testcode
30 pages
Project Code
No ratings yet
Project Code
16 pages
Koding Kasir 2024
No ratings yet
Koding Kasir 2024
2 pages
DOCTYPE ttttttthtml-WPS Office
No ratings yet
DOCTYPE ttttttthtml-WPS Office
6 pages
Custom sidebar + Multi level User
No ratings yet
Custom sidebar + Multi level User
9 pages
Install
No ratings yet
Install
9 pages
TD2 Bootstrap 1
No ratings yet
TD2 Bootstrap 1
18 pages
Bospanel
No ratings yet
Bospanel
8 pages
Rumus Coding
No ratings yet
Rumus Coding
22 pages
Michaelphilliph 46
No ratings yet
Michaelphilliph 46
3 pages
Tanggapan
No ratings yet
Tanggapan
7 pages
222222222
No ratings yet
222222222
16 pages
hml
No ratings yet
hml
9 pages
Document 1
No ratings yet
Document 1
3 pages
Dokumentas Program: Oleh Muhammad Maulani
No ratings yet
Dokumentas Program: Oleh Muhammad Maulani
23 pages
Assignment No 10
No ratings yet
Assignment No 10
10 pages
WT_7
No ratings yet
WT_7
14 pages
E-commerceSourcecode[1]
No ratings yet
E-commerceSourcecode[1]
35 pages
Layout
No ratings yet
Layout
3 pages
gtfdyhgytfyuh
No ratings yet
gtfdyhgytfyuh
4 pages
Michaelphilliph 99
No ratings yet
Michaelphilliph 99
3 pages
Michaelphilliph 46
No ratings yet
Michaelphilliph 46
3 pages
Source Code
No ratings yet
Source Code
8 pages
Alluser
No ratings yet
Alluser
2 pages
Aaa PDF
No ratings yet
Aaa PDF
11 pages
Good
No ratings yet
Good
8 pages
Log
No ratings yet
Log
18 pages
PROJECT KEPEGAWAIAN Rani
No ratings yet
PROJECT KEPEGAWAIAN Rani
13 pages
FreeCodeCampSurveyForm SourceCode
No ratings yet
FreeCodeCampSurveyForm SourceCode
7 pages
One Week to An MBA How to Get an Online Ivy League Education for Little or No Cost
From Everand
One Week to An MBA How to Get an Online Ivy League Education for Little or No Cost
James Abbott
No ratings yet
beyond pretty
From Everand
beyond pretty
B.C. Hatch
No ratings yet
Pratik Kamble Resume
No ratings yet
Pratik Kamble Resume
2 pages
(Ebook) Google Apps Script: Web Application Development Essentials by James Ferreira ISBN 9781491946183, 1491946180 - The ebook with rich content is ready for you to download
100% (1)
(Ebook) Google Apps Script: Web Application Development Essentials by James Ferreira ISBN 9781491946183, 1491946180 - The ebook with rich content is ready for you to download
49 pages
Lesson 4 Q2 ICT PROJECT PUBLICATION AND STATISTICS
No ratings yet
Lesson 4 Q2 ICT PROJECT PUBLICATION AND STATISTICS
29 pages
Search ENgine
No ratings yet
Search ENgine
28 pages
Caltech Coding-12 Bootcamp
No ratings yet
Caltech Coding-12 Bootcamp
19 pages
Chemistry Investigatory Project On Dyeing of Fabrics For Class 12
No ratings yet
Chemistry Investigatory Project On Dyeing of Fabrics For Class 12
51 pages
Data Access Security
No ratings yet
Data Access Security
90 pages
Actix Software Installation Guide
No ratings yet
Actix Software Installation Guide
30 pages
IT Charter
No ratings yet
IT Charter
4 pages
Automate the Boring Stuff with Python Practical Programming for Total Beginners 1st Edition Al Sweigart - Download the ebook now for an unlimited reading experience
100% (1)
Automate the Boring Stuff with Python Practical Programming for Total Beginners 1st Edition Al Sweigart - Download the ebook now for an unlimited reading experience
71 pages
Buffer Seed Round Deck Iotstars
No ratings yet
Buffer Seed Round Deck Iotstars
14 pages
Use of User-Defined Transform in Data Service 14 PDF
No ratings yet
Use of User-Defined Transform in Data Service 14 PDF
7 pages
Cisco Commerce User Guide - CCW
No ratings yet
Cisco Commerce User Guide - CCW
93 pages
Technology In Action Complete 9th Edition Evans Test Bank - All Chapter Instant Download
100% (4)
Technology In Action Complete 9th Edition Evans Test Bank - All Chapter Instant Download
59 pages
Free Iptv Ex - Yu Streams 11.07.14
100% (1)
Free Iptv Ex - Yu Streams 11.07.14
51 pages
Online Recruitment System PROJECT
No ratings yet
Online Recruitment System PROJECT
15 pages
Log
No ratings yet
Log
39 pages
Webyquick 1
No ratings yet
Webyquick 1
6 pages
SAS Graph
No ratings yet
SAS Graph
1,608 pages
Chatbot Paper
No ratings yet
Chatbot Paper
30 pages
Case Study
No ratings yet
Case Study
2 pages
B.tech CSE 2019 Scheme Syllabi v0.9
No ratings yet
B.tech CSE 2019 Scheme Syllabi v0.9
29 pages
Internship Report
No ratings yet
Internship Report
42 pages
Dark Web The Hub of Crime
No ratings yet
Dark Web The Hub of Crime
7 pages
Empowerment Technologies (Applied ICT) in GRADE 11: Midterm Examination
No ratings yet
Empowerment Technologies (Applied ICT) in GRADE 11: Midterm Examination
4 pages
Rhce Exam-Certcollection
No ratings yet
Rhce Exam-Certcollection
14 pages
Top HTML and HTML5 Interview Questions (2021) - InterviewBit
No ratings yet
Top HTML and HTML5 Interview Questions (2021) - InterviewBit
59 pages
9601-0153 TechnicalBulletin SymmetryAPI v9.3.2
No ratings yet
9601-0153 TechnicalBulletin SymmetryAPI v9.3.2
12 pages
Kozjak
No ratings yet
Kozjak
6 pages
Angular Notes
100% (1)
Angular Notes
7 pages