Bootstrap
Bootstrap
1. Precompiled Bootstrap download: compiled and minified JS, CSS and Fonts (no
source files are present)
2. Source code download: source LESS (upon compilation, CSS files are generated),
JS and Fonts. Once the compiled version Bootstrap is downloaded, extract the ZIP
file, and you will see the following file/directory structure −
3.
Include CDN:
Why Bootstrap
Enhance styling for various elements ranging from typography, buttons, tables,
forms, and images etc
Grid Classes
To target multiple sized devices list all the definition for class attribute
<div class="col-sm-2 col-md-4">…</div>
<div class="col-sm-7 col-md-4">…</div>
<div class="col-sm-3 col-md-4">…</div>
Example to demonstrate the grid classes
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></
script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></
script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min
.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Basic Grid Structure</h1>
<p>change the browser size to observe the changes.</p>
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different
devices -->
<div class="row">
<div class="col-sm-6" style="background-color:aquamarine;">50%</div>
<div class="col-sm-6" style="background-color:rgb(216, 209,
238);">50%</div>
</div>
<br>
<div class="row">
<div class="col-sm-2" style="background-color:rgb(182, 182,
141);">20%</div>
<div class="col-sm-7" style="background-color:rgb(198, 233,
211);">20%</div>
<div class="col-sm-3" style="background-color:rgb(233, 181,
211);">20%</div>
</div>
<br>
<div class="row">
<div class="col" style="background-color:rgb(197, 235, 238);">20%</div>
<div class="col" style="background-color:rgb(162, 238, 209);">20%</div>
<div class="col" style="background-color:rgb(226, 182, 228);">20%</div>
<div class="col" style="background-color:rgb(233, 21, 127);">20%</div>
<div class="col" style="background-color:rgb(245, 245, 147);">20%</div>
</div>
</div>
</div>
</body>
</html>