BOOTSTRAP5
WHAT IS BOOTSTRAP?
HTML,CSS and JavaScript framework.
The world’s most popuplar frond- end open
source toolkit
Its has responsive grid system ,extensive prebuilt
components
Why ?
100% open source framework.
Very easy to use on website.
Responsive feature for various devices link
phone ,tablets and desktop etc..
It is mainly for mobile first approach.
It is compatibility for all modern browsers
like chrome , firefox etc..
History
Developed by MARK OTTO and JACOB THORNTON
at Twitter,
It is released as an open source product in August
2011 on Github
In June 2014 Bootstrap was the no 1 project on
Github.
Index >html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>my bootsrap</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.m
in.css" rel="stylesheet" integrity="sha384-
9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous">
<script defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bun
dle.min.js" integrity="sha384-
geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
Bootstrap is a free, open source front-end development framework
for the creation of websites and web apps.
Designed to enable responsive development of mobile-first
websites, Bootstrap provides a collection of syntax for template
designs.
As a framework, Bootstrap includes the basics for responsive web
development, so developers only need to insert the code into a
pre-defined grid system. The Bootstrap framework is built on
Hypertext Markup Language (HTML), cascading style sheets (CSS) and
JavaScript. Web developers using Bootstrap can build websites much
faster without spending time worrying about basic commands and
functions.
</div>
</body>
</html>
Css filestyle.css
body {
margin-top: 40px; /* This margin just makes the text easier to
read. You can remove it if you want since it can mess with your other
styles. */
}
body::before {
content: "XS";
color: red;
font-size: 2rem;
font-weight: bold;
position: fixed;
top: 0;
right: 0;
}
/* This box class is purely used for explaining how the bootstrap
grid system works. */
.box {
background-color: lightblue;
border: 1px solid blue;
min-height: 50px;
font-size: 2rem;
}
@media (min-width: 576px) {
body::before {
content: "SM";
}
}
@media (min-width: 768px) {
body::before {
content: "MD";
}
}
@media (min-width: 992px) {
body::before {
content: "LG";
}
}
@media (min-width: 1200px) {
body::before {
content: "XL";
}
}
@media (min-width: 1400px) {
body::before {
content: "XXL";
}
}
Tables
<div class="container ">
<table class="table table-danger">
<thead>
<tr>
<th>first</th>
<th>last</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>nikkal</td>
<td>raj</td>
<td>17</td>
</tr>
<tr>
<td>priya</td>
<td>dharshini</td>
<td>21</td>
</tr>
</tbody>
</table>
first age
nikkal raj 17
priya dharshini 21
This is for an table color change tag
<table class="table table-hover">
we can able to activate an
particular row is activate by this
tab
<tr class=”table table-
active”></tr>
Form
<form>
<label class="form-label">email</label>
<input type="email" id="email" value="email.com" readonly
class="form-control form-control-plaintext">
<button>SUBMIT</button>
</form>
It changes the form
class="container ">
<form>
<label class="form-label">email</l abel>
<input type="range" id="email" value="email.com"
readonly class="form-control form-control-color">
<button>SUBMIT</button>
</form>
</div>
<form novalidate>
<div class="form-floating">
<label class="email ">email</label >
<input type="email" id="email" class="form-control "
placeholder="place email here" required >
</div>
<button>submit</button>
</form>
</div>
<script>
const form=document.querySelector(form)
form.addEventListener('submit',e=>{
if(!form.checkValidity()){
e.preventDefault()
}
form.classList.add('was-validated')
})
</script>
