Scribd
Upload
3 views

Bootstrap

The document provides an overview of Bootstrap, a framework for creating responsive web pages, detailing its components such as files and CDN, typography, containers, grids, navbars, carousels, images, buttons, and Font Awesome icons. It includes syntax examples for implementing various Bootstrap features, emphasizing the use of classes for styling and layout. Additionally, it explains how to use Bootstrap files either by downloading them or through a CDN for easier integration into web projects.

Uploaded by

yashkumarswatantra
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Bootstrap

The document provides an overview of Bootstrap, a framework for creating responsive web pages, detailing its components such as files and CDN, typography, containers, grids, navbars, carousels, images, buttons, and Font Awesome icons. It includes syntax examples for implementing various Bootstrap features, emphasizing the use of classes for styling and layout. Additionally, it explains how to use Bootstrap files either by downloading them or through a CDN for easier integration into web projects.

Uploaded by

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

Bootstrap

1. Bootstrap Files and CDN


2. Bootstrap Typography
3. Bootstrap Container and Grid
4. Bootstrap Navbar
5. Bootstrap Carousel
6. Bootstrap Images
7. Bootstrap Buttons
8. Font Awesome
1. Bootstrap Files and CDN:
Bootstrap is a technology to make the web-pages responsive. Responsive
means to the ability of web-pages, to follow the width of the browser, thereby
adjusting the contents in the best possible way.
Technically Bootstrap is nothing but a library of predefined classes, IDs and
functions of CSS, JavaScript and JQuery.
Following is a list of files that are needed to be linked in the .html file in order
to access Bootstrap library.

 Bootstrap.min.css
 Bootstrap.min.js
 Popper.min.js
 Jquery.min.js

We can find these files in two of the following ways:

Downloaded Bootstrap from https://getbootstrap.com: Download the files,


store in a folder (here bootstrap) and use in the <head> . . . </head> part as
given below.

Using Bootstrap CDN (Content Delivery Network): CDN is a network of Bootstrap


providers on internet. It is best to use if we don’t want to host Bootstrap with our
site. We just use the following code in the <head> . . . </head> part as given
below.
2. Bootstrap Typography
Except of all the text formatting tags/styles in html/CSS, bootstrap offers the
following extra styles as well.

Classes for heading:

 .display-1
 .display-2
 .display-3
 .display-4

<small> : Creates a lighter, secondary text for headings.

<mark> : Creates yellow background colour with some padding.

<code> : Creates Code like text with pink colour.

<kbd>: Creates white text on black background.


3. Bootstrap Container and Grid
Container:

Bootstrap container is a way to design sites that possess side-blanks. Entire site
can be designed in a container.

Syntax:

<div class="container">
Since class container provides side-blanks, class
...
container-fluid can be used to avoid side-blanks.
</div>

CONTAINER CONTAINER-FLUID

Jumbotron:
Jumbotron is a highlighted container with a default gray background.

Syntax:

<div class="jmbotron">
A jumbotron can be nested inside of a class
...
container-fluid to avoid side-blanks.
</div>
Bootstrap Grid
Bootstrap Grid is a cross of rows and columns. Every row may contain 12 Columns
at most. Different classes are used as to represent rows and columns.

Syntax:
Here Red part is for different devices or display
<div class="row"> sizes.
<div class="col-*-*"></div> 1. sm – Small devices like phones
2. md – Medium devices like tabs
<div class="col-*-*"></div>
3. lg – Large devices like monitors
</div> 4. xl – Extra large devices like projectors
and other big screens

[ OR ] And the Blue part is the width of every column.


Note that the sum of all column-widths in a row
must not exceed 12.

Ex.
<div class="row">
<div class="col-*-*"></div> <div class="row">
<div class="col-lg-3"></div>
<div class="col-*-*"></div>
<div class="col-lg-9"></div>
<div class="col-*-*"></div> </div>
</div>
4. Bootstrap Navbar
Simple navbar:

A Navbar is simply a navigation bar designed in bootstrap. Ahead of the


core CSS specifications, a bootstrap navbar is even more fascinating.

Syntax: Here Red part is a group of classes for Navbar


design.
<nav class="navbar navbar-expand-lg bg-light"> 1. navbar – Basic class
2. navbar-expand-lg – to expand on screen
<ul class="navbar-nav"> 3. bg-dark – dark background

<li class="nav-item"> The Blue part is the class of <UL>.


The Green part is the class of <LI>.
<a class="nav-link" href="#">Link 1</a> The pink part is the class of <A>.

</li> Color specification in Bootstrap:

<li class="nav-item"> 1. Primary:

<a class="nav-link" href="#">Link 2</a> 2. Success:

</li>
3. Info:
<li class="nav-item">
4. Warning:
<a class="nav-link" href="#">Link 3</a>
5. Danger:
</li>
6. Secondary:
</ul>

</nav> 7. Dark:

Further in navbar 8. Light:

Class Used for Action


.active <li> For active link
.justify-content-center <nav> For centred navbar
.fixed-top <nav> For a fixed navbar
.sticky-top <nav> For a scroll and stick navbar
Navbar with drop-downs:

Add this <LI> to the <UL> for getting a dropdown list.

Syntax:

<li class="nav-item dropdown">

<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-


toggle="dropdown"> Dropdown link </a>

<div class="dropdown-menu">

<a class="dropdown-item" href="#">Link 1</a>

<a class="dropdown-item" href="#">Link 2</a>

<a class="dropdown-item" href="#">Link 3</a>

</div>

</li>
5. Bootstrap Carousel
Carousel is a simple image slider that works great with bootstrap.

Syntax:

<div id=”control” class="carousel slide" data-ride="carousel">

<div class="carousel-inner">

<div class="carousel-item active">

<img src="#" alt="#" width="#" height="#">

</div>

<div class="carousel-item">

<img src="#" alt="#" width="#" height="#">

</div>

<div class="carousel-item">

<img src="#" alt="#" width="#" height="#">

</div>

</div>

<a class="carousel-control-prev" href="#control" data-slide="prev">


<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#control" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>

</div>
Note: Add the following CSS to make the carousel responsive.

Img

{
width: 100%;
height: 100%;
}

6. Bootstrap Images
Images are dramatically stylized with bootstrap while keeping up their responsive
nature.

Class Description
rounded Gives rounded corners to the image.
rounded-circle Gives oval or circular shape to the image.
img-thumbnail Gives a thumbnail like shape to the image.
float-left / float-right Aligns left or right.
mx-auto d-block Aligns centrally.
img-fluid Makes the image responsive.
7. Bootstrap Buttons
Bootstrap stylizes buttons in many ways. A simple hyperlink can be stylized with a
.btn class to look like a button.

Class Description
btn Master class to develop a button
btn-[color] Use colors like primary, success etc. to design it.
btn-outline-[color] For outlined buttons.
btn-lg / btn-sm For large or small buttons.
btn-block For block size buttons.
disabled For a dummy or disabled button.
8. Font Awesome
Font awesome is a huge library of symbols that are used frequently in
communicating ideas, views and perceptions. Font Awesome is used in an <i> </i>
tag.

Downloaded Font Awesome from https://fontawesome.com: Download the


files (especially all.css), store in a folder (here fontawesome) and use in the
<head> . . . </head> part as given below.

Syntax:

<i class=”fa fa-facebook”></i>

Following is a list of the most popular icons in Font Awesome Library.

You might also like