Scribd
Upload
59 views4 pages

Bootstrap

The document discusses including Bootstrap in a project and describes the Bootstrap grid system. It explains how to include the precompiled or source versions of Bootstrap, or leverage a CDN. It then provides an overview of the Bootstrap grid and classes for controlling responsive layouts.

Uploaded by

preethinpatil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
59 views4 pages

Bootstrap

The document discusses including Bootstrap in a project and describes the Bootstrap grid system. It explains how to include the precompiled or source versions of Bootstrap, or leverage a CDN. It then provides an overview of the Bootstrap grid and classes for controlling responsive layouts.

Uploaded by

preethinpatil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Include 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:

 Leverage the benefit of a blazing-fast performance, as the files loaded from


the CDN are loaded in parallel and not queued by the browser
 The CDN provides data centers closer to the users, meaning that, the server
selected is typically based on the user's location and faster routes. Thus, files
are loaded faster
 You must be online if you are using CDN. If you are offline, then you have to
use the Bootstrap CSS and JavaScript files available in the downloaded ZIP file

Why Bootstrap
 Enhance styling for various elements ranging from typography, buttons, tables,
forms, and images etc

 Extensive list of components that consist of Glyphicons, responsive navigation


bars, BreadCrumbs, Alerts, etc

 Official plugins for Modals, Carousels, and PopOvers


Bootstrap 4 Grid System

Grid System Rules

Some Bootstrap 4 grid system rules:

 Rows must be placed within a .container (fixed-width) or .container-fluid (full-


width) for proper alignment and padding
 Use rows to create horizontal groups of columns
 Content should be placed within columns, and only columns may be immediate
children of rows
 Predefined classes like .row and .col-sm-4 are available for quickly making grid
layouts
 Grid columns are created by specifying the number of 12 available columns you
wish to span. For example, three equal columns would use three .col-sm-4
 Column widths are in percentage, so they are always fluid and sized relative to
their parent element

Grid 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)

How to define grid system and classes:

<div class row>


<div col-*-*> …..</div>
<div col-*-*>….</div>
</div>

Where first * indicates the target device (sm/md/lg/xl)


Second * indicates number of columns

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>

<!-- Or let Bootstrap automatically handle the layout -->


<div class="row">
<div class="col-sm" style="background-color:rgb(221, 221,
214);">25%</div>
<div class="col-sm" style="background-color:rgb(175, 174,
170);">25%</div>
<div class="col-sm" style="background-color:rgb(240, 240,
205);">25%</div>
<div class="col-sm" style="background-color:rgb(202, 189,
164);">25%</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>

You might also like