Scribd
Upload
0 views

04_Bootstrap

Bootstrap is a free front-end framework that simplifies web development with design templates and responsive capabilities. It features a grid system with up to 12 columns, various container classes, and components like tables, alerts, and buttons. The framework also supports responsive web design through viewport settings and media queries for font size adjustments.

Uploaded by

Arunava Mukherjee
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0 views

04_Bootstrap

Bootstrap is a free front-end framework that simplifies web development with design templates and responsive capabilities. It features a grid system with up to 12 columns, various container classes, and components like tables, alerts, and buttons. The framework also supports responsive web design through viewport settings and media queries for font size adjustments.

Uploaded by

Arunava Mukherjee
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Bootstrap

INTRODUCTION

• Bootstrap is a free front-end framework for faster and


easier web development
• Bootstrap includes HTML and CSS based design templates
for typography, forms, buttons, tables, navigation, modals,
image carousels and many other, as well as optional
JavaScript plugins
• Bootstrap also gives you the ability to easily create
responsive designs
Responsive Web Design

Responsive web design makes your web page look good on


all devices.
Viewport

Viewport is the user's visible area of a web page.


<meta name="viewport" content="width=device-width,
initial-scale=1.0">
The width=device-width part sets the width of the page to follow the
screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first
loaded by the browser.
BOOTSTRAP 5 CONTAINERS

• The .container class provides a responsive fixed width


container
• The .container-fluid class provides a full width container,
spanning the entire width of the viewport
BOOTSTRAP GRID SYSTEM

Bootstrap's grid system allows up to 12 columns across the


page.

The Bootstrap 5 grid system has six 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)
.col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)
BOOTSTRAP GRID SYSTEM EXAMPLE
TABLE & ALERT
Tables
<div class="table-responsive">
<table class="table">
...
</table>
</div>

Alert
Alerts are created with the .alert class, followed by one of the
contextual classes .alert-success, .alert-info, .alert-warning, .alert-
danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark
<div class="alert alert-success">
Indicates a successful or positive action.
</div>
BUTTON

<button type="button" class="btn">Basic</button>


<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
NAVBAR

<!-- A grey horizontal navbar that becomes vertical on


small screens -->
<nav class="navbar navbar-expand-sm bg-light">
<div class="container-fluid">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</div>
</nav>
Change Font Size With Media Queries

/* If the screen size is 601px or more, set the font-size


of <div> to 80px */
@media only screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}

/* If the screen size is 600px or less, set the font-size


of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Personal Profile
Personal Profile
References

https://getbootstrap.com/docs/5.3/getting-
started/introduction/
https://getbootstrap.com/docs/5.0/examples/cheatsheet
/
https://www.w3schools.com/bootstrap5/

You might also like