Scribd
Upload
1 views

Bootstrap - Intro

Bootstrap is a free front-end framework that simplifies web development with HTML and CSS templates, responsive design capabilities, and optional JavaScript plugins. The latest version, Bootstrap 5, replaces jQuery with vanilla JavaScript and is compatible with modern browsers. It offers various utilities for styling, including buttons, containers, spacing, and text customization.

Uploaded by

gokulprakash87
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
1 views

Bootstrap - Intro

Bootstrap is a free front-end framework that simplifies web development with HTML and CSS templates, responsive design capabilities, and optional JavaScript plugins. The latest version, Bootstrap 5, replaces jQuery with vanilla JavaScript and is compatible with modern browsers. It offers various utilities for styling, including buttons, containers, spacing, and text customization.

Uploaded by

gokulprakash87
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 27

Bootstrap

DAY 12
Bootstrap

 Bootstrap is a free front-end framework for faster and easier web development
 It 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
 It also gives you the ability to easily create responsive designs
Versions

 Bootstrap 5 (released 2021) is the newest version of Bootstrap (released 2013.

 The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that Bootstrap 5 has
switched to vanilla JavaScript instead of jQuery.
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
 Mobile-first approach: In Bootstrap, mobile-first styles are part of the core framework
 Browser compatibility: Bootstrap 5 is compatible with all modern browsers (Chrome,
Firefox, Edge, Safari, and Opera). Note that if you need support for IE11 and down, you
must use either BS4 or BS3.
Where to Get Bootstrap 5?

 There are two ways to start using Bootstrap 5 on your own web site.

* Include Bootstrap 5 from a CDN (Content Delivery Network).

* Download Bootstrap 5 from getbootstrap.com


Using Bootstrap CDN

 When you only need to include Bootstrap’s compiled CSS or JS, you can use jsDelivr.

 CSS - Copy-paste the stylesheet <link> into your <head> before all other stylesheets to
load our CSS.

<!-- CSS only -->

<linkhref="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"integrity="sha384gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6
csBvApHHNl/vI1Bx" crossorigin="anonymous">
Using Bootstrap CDN

 JS
 Many of our components require the use of JavaScript to function. Specifically, they
require our own JavaScript plugins and Popper. Place one of the following <script>s near
the end of your pages, right before the closing </body> tag, to enable them.
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/
tWtIaxVXM" crossorigin="anonymous"></script>
Color

 Bootstrap is supported by an
extensive color system that
themes our styles and
components. This enables
more comprehensive
customization and extension
for any project.
Text Color

 To use contextual classes for the font color, you should include the text class prefix in the
beginning:
 <p class="text-success">Success.</p>
Background Color

 color the background instead of the characters themselves, you should use the bg class
prefix:
 <p class="bg-success">Success.</p>
Buttons

 Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for
multiple sizes, states, and more.
<button type="button" class="btn btn-primary">Primary</button>

 Outline buttons

<button type="button" class="btn btn-outline-primary">Primary</button>

 Sizes - btn-lg | btn-sm |

<button type="button" class="btn btn-primary btn-lg">Large button</button>


Buttons

 Activate/Disable Buttons
 <button class="btn disabled" type="button">Disabled</button>
<button class="btn active" type="button">Active</button>
<a href="#" class="btn disabled">Disabled</a>
Containers

 Containers are a fundamental building block of Bootstrap that contain, pad, and align
your content within a given device or viewport.
 Containers are the most basic layout element in Bootstrap and are required when using
our default grid system.
Containers

 Bootstrap comes with three different containers:

1. .container, which sets a max-width at each responsive breakpoint

2. .container-fluid, which is width: 100% at all breakpoints

3. .container-{breakpoint}, which is width: 100% until the specified breakpoint


Default container

 default .container class is a responsive, fixed-width container, meaning its max-width


changes at each breakpoint.

<div class="container">

<!-- Content here -->

</div>
Responsive containers

 Responsive containers allow you to specify a class that is 100% wide until the specified
breakpoint is reached, after which we apply max-widths for each of the higher
breakpoints.

 For example, .container-sm is 100% wide to start until the sm breakpoint is reached,
where it will scale up with md, lg, xl, and xxl.

Eg:

<div class="container-sm">100% wide until small breakpoint</div>


Fluid containers

 Use .container-fluid for a full width container, spanning the entire width of the viewport.

<div class="container-fluid">

...

</div>
Spacing

 Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility
classes to modify an element’s appearance.

 m - for classes that set margin mt- mb- ms me

 p - for classes that set padding


Where sides is one of:

 t - for classes that set margin-top or padding-top

 b - for classes that set margin-bottom or padding-bottom

 s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-
right in RTL

 e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-
left in RTL

 x - for classes that set both *-left and *-right

 y - for classes that set both *-top and *-bottom

 blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:

 0 - for classes that eliminate the margin or padding by setting it to 0

 1 - (by default) for classes that set the margin or padding to $spacer * .25

 2 - (by default) for classes that set the margin or padding to $spacer * .5

 3 - (by default) for classes that set the margin or padding to $spacer

 4 - (by default) for classes that set the margin or padding to $spacer * 1.5

 5 - (by default) for classes that set the margin or padding to $spacer * 3

 auto - for classes that set the margin to auto


Borders

 Use border utilities to quickly style the border and border-radius of an element. Great for
images, buttons, or any other element.

 <div class=" border"></div>

 Border color

 <div class="container border border-primary"></div>

 Border-width (1 to 5)

 <div class="container border border-primary border-4"></div>


TEXT

 Text - color

<p class="text-primary">

 Text alignment

 Start align - class="text-start"

<p class="text-start">Start aligned text on all viewport sizes.</p>

 Center align - class="text-center"

 End Align - class="text-end"


Font size

 As the number increases, their size decreases.

 <p class="fs-1">text</p>

 <p class="fs-2">text</p>

 <p class="fs-3">text</p>

 <p class="fs-4"> text</p>

 <p class="fs-5">text</p>

 <p class="fs-6">text</p>
background color

 <p class="bg-primary">
Background gradient

 By adding a .bg-gradient class, a linear


gradient is added as background image
to the backgrounds. This gradient starts
with a semi-transparent white which
fades out to the bottom.
TASK

You might also like