Bootstrap
what is bootstrap and why it is used?
Bootstrap is a potent front -end framework used to create modern websites and web apps. Its open source and free to use, yet features numerous HTML and CSS templates for UL interface elements such as button and forms . Bootstrap also supports JavaScript extensions.
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.
Browser compatibility Bootstrap 4 is compatible with all modern bowers (chrome,Firefox,Internet Explorer10+,Edge,Safari and Opera)
E-g:
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.
1.Add the HTML5 doctype:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2.Bootstrap 4 Mobile-first:
Bootstrap 4 is designed to be responsive to mobile devices. Mobile-first styles are part if the core framework.
Add the following<meta>tag inside the <head>element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</html>
3.Container
There are two container classes to
choose from:
The .container class
provides a responsive fixed width container.
The .container-fluid class
provides a full width container spanning the entire width of
the viweport.
container
Use
the .container class to create a responsive fixed-width container.
Note:Max-Width will change on different screen sizes.
Eg:
<!DOCTYPE html>
<html lang="en">
<head>
<title>container</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
container-fluid 
Use
the .container-Fluid class to create a Full width container that
will always span the entire width of the screen (Width is always
100%)
Eg:
<!DOCTYPE html>
<html lang="en">
<head>
<title>container-fluid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html> 
container Padding
<!DOCTYPE html>
<html lang="en">
<head>
<title>container padding</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="containerpt-3">
<h1>My First Bootstrap Page</h1>
<p>This container has a top padding of 16 pixels (.pt-3).</p> <p>Try to remove the .pt-3 class to see the difference.</p>
</div>
</body>
</html> 
container Border color
<!DOCTYPE html>
<html lang="en">
<head>
<title>container border color</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container p-3 my-3 border"> <h1>My First Bootstrap Page</h1>
<p>This container has a border and some extra padding and margins.</p>
</div>
<div class="container
p-3 my-3 bg-dark
text-white"> <h1>My First Bootstrap Page</h1>
<p>This container has a border and some extra padding and margins.</p>
</div>
<div class="container p-3 my-3 bg-primary
text-white"> <h1>My First Bootstrap Page</h1>
<p>This container has a border and some extra padding and margins.</p></div> <div class="container p-3 my-3 bg-success text-white"> <h1>My First Bootstrap Page</h1>
<p>This container has a border and some extra padding and margins.</p></div> <div class="container p-3 my-3 bg-danger
text-white"> <h1>My First Bootstrap Page</h1>
<p>This container has a border and some extra padding and margins.</p></div> </body>
</html>
Responsive
containers
you can use the .container -sm |md |lg |xl classes to crate
responsive containers.
The max-width of the container will change on different screen
sizes/viewports.
Bootstrap
4 Grid System
Bootstrap’s grid system is built with flex box and allows up
to12 columns across the page.
The grid system is responsive and the columns will re-arrange
automatically depending on the screen size.
If you do not want to use all 12 columns individually you can
group the columns together to create wider columns.
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)
Three equal columns
<!DOCTYPE html>
<html lang="en">
<head>
<title>container-fluid coloumns</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<h3>three equal columns</h3>
<div class="row">
<div class="col" style="background-color:blue;">.col</div>
<div class="col"style="background-color:lavender;">.col</div>
<div class="col"style="background-color:orange">.col</div>
</div>
</body>
</html>
Two unequal Responsive columnsThe following
example shows how to get two various-width columns starting at
tablets and scaling to large extra desktops.
<!DOCTYPE html>
<html lang="en">
<head>
<title>container-fluid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid"> <h3>Two unequal columns</h3>
<div class="row">
<div class="col-sm-4"style="background-color:blue;">.col-sm-4</div>
<div class="col-sm-8"style="background-color:orange">.col-sm-8</div>
</div>
</body>
</html>
Comments
Post a Comment