Bootstrap

Bootstrap

- Bootstrap is an open source toolkit for developing Mobile and Web applications with HTML, CSS and JavaScript.

- It provides one of the worlds largest repository [Library] that helps developers to build complex HTML, CSS and JS pages with less logic and mark up.

- It provides pre-defined CSS classes and stylesheets which you can apply for HTML.

- It also provides JS with pre-defined functions to control HTML dynamically.

- It provides a set of templates for different purpose, which developers can implement and customize according to their requirement.

- Prerequisites to learn bootstrap are HTML and CSS.

Setup Environment for Bootstrap

- Download and Install any Package Manager

NPM
Yarn
RubyGems
Nuget

- We will use NPM [Node Package Manager] as Package Manager.

Visit the official website of “Node JS” https://nodejs.org/en/download/
Download Node JS for your OS and
Install [“.msi” for windows]
Verify from command prompt
> node -v [to know Node JS version]
> npm -v [to know package manager version]

- Download and install bootstrap for your project. oOpen your project in “VS Code”

o Open Terminal in VS Code [Terminal Menu -> New Terminal (or) Ctrl + `]

o Type the following command

C:\Shopping>npm install bootstrap @4.6

o This will add a new folder into your project by name “node_modules”

o All libraries that you install with NPM are kept in “node_modules”.

CSS Path:

Node_modules/bootstrap/dist/css/bootstrap.css

JS Path:

Node_modules/bootstrap/dist/js/bootstrap.js

Note: You can use bootstrap CDN. [Content Distribution Network]

Bootstrap CSS:

- To use the bootstrap CSS you can link “bootstrap.css” to your HTML page.

- As a developer you have to know about the various classes provided by “bootstrap.css” file.

- Bootstrap provides pre-defined CSS classes which you can apply to HTML elements to defined effects.

Ex:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Demo</title>

<style>

.container {

border:2px solid darkcyan;

padding:20px;

margin-top: 20px;

}

</style>

</head>

<h2>Welcome to Bootstrap</h2>

<button class="btn btn-primary">Register</button>

</body>

</html>

Bootstrap Containers

- Containers are uses for basic layout design.

- Type are used for grid design.

- Containers are defined with margin and padding.

- Containers are controlled with “@media()” features that makes the page layout responsive.

- Bootstrap provides 3 different containers.

o Container

o Container-fluid

o Container-{breakpoint} based on width. [sm, md, lg, xl]

Class Name Purpose

.container min 540px – max 1200px [width]

.container-sm min 540px – max 1140px[mobile]

.container-md min 100% - max – 140px [tab]

.container-lg Min 100% - max – 1140px [laptop]

.container-xl Min 100% - max – 1140px [desktop]

.container-fluid Min-100% - max 100% [responsive]

Ex:

<!DOCTYPE html>

<html>

<head> <title>Bootstrap Demo</title>

href="../node_modules/bootstrap/dist/css/b

ootstrap.css">

<style>

div {

border:2px solid darkcyan;

margin-top:10px;

}

</style>

</head>

<body>

<div class="container"> Container </div>

<div class="container-sm"> Container-sm </div>

<div class="container-fluid"> Container-fluid </div>

</body>

</html>

Bootstrap Grid Classes

- Grid is designed by using “.row” & “.col” classes from bootstrap.

- They provide as responsive grid design.

Defining a row: You can define a row in grid system by using following classes

Class Name Description

.row Single row

.row-cols-number The number of columns in row.

.row-cols-sm-number For small screen

.row-cols-md-number For medium screen

Row number can be defined only from 1 to 6.

Defining a column: You can define a column in grid system by using following classes

Class Name Description

.col It specifies a column

.col-sm 540px [mobile]

.col-md 720px [tab]

.col-lg 960px [laptop]

.col-xl 1140px [desktop]

-The columns must be defined with size explicitly and maximum number of columns can be 12.

-The column numbers define the size of column.

Syntax:

col-3 30% of browser

col-9 70% of browser

You can use responsive according to device.

col-sm-3

col-lg-3

col-md-3

You can configure vertical alignment for content in a row, this will affect when height is changed.

Row Alignment Purpose

.align-items-start Top

.align-items-center Center

.align-items-end Bottom

Col Alignment Purpose

.align-self-start Left

.align-self-center Center

.align-self-end Right

You can configure the default columns in a row without using “col” class.

It is possible with “row-cols-number” [number from 1 to 6]

Ex:

<!DOCTYPE html>

<html>

<head>

</head>

<div>

<h3>Speaker</h3>

</div>

<div>

<h3>Earpods</h3>

</div>

<div>

<h3>Nike Casuals</h3>

</div>

<div>

<h3>Jeans</h3>

</div>

</body>

</html>

Bootstrap Colors

- Bootstrap provides pre-defines classes for background and foreground.

- The bootstrap contextual colors are:

o Primary

o Secondary

o Dark

o Light

o Success

o Danger

o Info

- To apply contextual colors for text you can use “text-contextualName”

o .text-primary

o .text-secondaryo.text-dark

o .text-light

o .text-success

o .text-warning

o .text-danger

o .text-info etc.

- To apply contextual colors for background you can use “bg-contextualName”

o .bg-primary

o .bg-secondary etc..

Ex:

<!DOCTYPE html>

<html>

<head>

</head>

<h2 class="bg-dark text-light">Bootstrap Colors</h2>

<div class="text-primary">Primary</div>

<div class="text-secondary">Secondary</div>

<div class="text-danger">Error</div>

<div class="text-warning">Warning</div>

</body>

</html>

Bootstrap Images

- Bootstrap provides pre-defined classes for Images.

- These classes will make images more responsive.

- Bootstrap Image classes are:

o. img : Base class for defining image effects.

o .img-fluid : It can change the image size as per device.

o .img-thumbnail : It is used with border and size. To display like

thumbnail.

Bootstrap Tables

- Bootstrap provides pre-defined classes for tables.

- These classes will make tables more interactive and responsive.

.table

.table-contextualColor

- .table-primary

- .table-success

- .table-danger

- .table-dark etc

Ex: <table class=”table table-primary”>

.thead-contextualName

- .thead-light

- .thead-dark

- .thead-primary

Ex: <thead class=”thead-dark”>

.table-stripped

.table-bordered

.table-borderless

.table-hover

.table-sizeOption

- .table-sm

- .table-md

- .table-lg

- .table-xl

.table-responsive

Ex:

Install jQuery for your project with NPM:

- Components are pre-defined templates provided by Bootstrap.

- Every template comprises of

o Presentation with HTML

o Styles with CSS

o Functionality with JavaScript/Jquery

- Every component is defined with presentation and functionality

- You need bootstrap with Jquery library to design bootstrap components.

- jQuery is a library used by bootstrap for creating complex interactions.

- To install jQuery type the following command

> npm install jquery

- jQuery library is added into “node_modules”

The basic files required for bootstrap templates from “bootstrap and jQuery” are

- bootstrap.css

- jquery.js

- bootstrap.bundle.js

Note: Any jQuery file of bootstrap must be defined only after “jquery.js”

- A developer has to know about different types of CSS classes provided by bootstrap.css and different types of attributes provided by bootstrap.bundle.js

Margin and Padding in Bootstrap

- Bootstrap provides the following classes for margin and padding

.m : margin

.p : padding

.t : top

.b : bottom

.l : left

.r : right

.x : left and right

.y : top and bottom

Syntax: ml : margin-left pl : padding-left

Size for Margin and padding can be defined from 0 to 5 points or auto.

Borders in Bootstrap

Border Classes

.border

.border-top

.border-right

.border-left

.border-bottom

.border-primary, other textual

Border Radius

.rounded

.rounded-top, right, bottom, left

.rounded-circle

.rounded-pill

.rounded-sm

.rounded-lg

Ex:

</body>

Bootstrap Close Icon

- Bootstrap provides a generic close icon.

- Use to design close functionality.

- You can define with class “.close”

Ex: <button class="close">x</button>

Bootstrap Colors

- Text : text

- Background: bg

- Border: border

- Contextual colors: Primary, Danger, Success, Info, Warning etc.

- Background Gradients

o bg-gradient-primary

o bg-gradient-success etc..

Bootstrap Display Classes

- To apply display attributes in bootstrap we have to use “d-{value}”

- Value can be

o None

o Inline

o Inline-block

o Block

o Table

o Flex

Ex:

<h2>Display</h2>

<div class="d-none p-2 bg-danger text-white">JavaScript</div>

</body>

Bootstrap Embeds

- These classes are required for handling embedded contents like videos, iframe, embed

o Embed-responsive

o Embed-responsive-item - Embed requires Aspect ratio

o 21:9 “21by9”

o 16:9 “16by9”

Syntax:

Class=”embed-responsive-21by9”

Bootstrap Flex Classes

- The display-flex is used for flex display style

- Bootstrap provides additional class for making responsive flexible design

o d-flex

o d-inline-flex

o d-sm-flex

o d-lg-flex

o d-md-flex

- The flex directions require following classes

o flex-row

o flex-row-reverse

o flex-column

o flex-column-reverse

- You also need Justify content for flex display

o justify-content-start

o justify-content-end

o justify-content-center

o justify-content-between

o justify-content-around

- You can also use alignment in flex display [Vertical]

o align-items-start

o align-items-end

o align-items-centero align-items-baseline

o align-items-stretch

Bootstrap Float

.float-left

.float-right

.float-non

Bootstrap Components

- Bootstrap provides a rich set of components for various interactions.

- Bootstrap components require HTML, CSS and jQuery attributes.

- Bootstrap components require “bootstrap.bundle.js” library.

- Script library is embedded into page by using <script> element.

- Any bootstrap jQuery requires the base “jquery.js” core file.

Bootstrap Alerts

- Alert is used to display a message box dynamically embedded into page.

- You can open and close the alerts dynamically.

- The bootstrap classes to design alerts are

Bootstrap

.alert

.alert-contextual

.alert-primary

.alert-secondary

.alert-success

.alert-danger etc.

.alert-link

.alert-heading

.alert-dismissible

.fade

.show

.close

jQuery Attribute

role

- Alert

- Dialog

- Modal etc.

Data-dismiss

Bootstrap Badge

- A badge is used for displaying notification style.

- It is used for displaying annotations and marked contents in a list or any element.

.badge

.badge-contextual

- .badge-primary

- .badge-secondary

- .badge-success etc..

.badge-pill

Bootstrap Breadcrumb

- It is mostly used for creating side navigation or site maps.

.breadcrumb

.breadcrumb-item

.breadcrumb-active

Bootstrap Buttons

- Bootstrap provides several classes for buttons.

.btn

.btn-contextual

- .btn-primary

- .btn-secondary etc.

.btn-outline-contextual

-.btn-outline-primary

-.btn-outline-danger etc.

.btn-size

-.btn-sm

-.btn-lg

.btn-block

.btn-link

.active

.disabled

.close

Button Toolbar and Button Group

- Bootstrap can create a button tool bar with set of button groups.

.btn-toolbar

.btn-group

Bootstrap Card

- Card is a container.

- It contains flexible content inside.

- It includes header, footer and body content.

Class Description

.card It is a container for defining card contents.

.card-img-top It is used for image to display as card header.

.card-header It is used for header content.

.card-footer It is used for footer content.

.card-body It is used for body content.

.card-title It is used for titles.

.card-subtitle It is used for sub titles.

.card-link It is used for links in a card.

.card-text It is used for normal text in card.

.card-deck It is a collection of cards.

Bootstrap Carousel

- Carousel is used for creating sliding and fading contents.

- It is used to create dynamic slide show with manual and auto navigation

- It uses CSS and jQuery attribute to handle interactions.

Basic Carousel Classes

Class Description

.carousel It is a container for sliding and fading contents.

.carousel-inner All items in carouse must be defined in carousel inner.

.carousel-item It defines an individual carousel item.

.active It is used to start the carouse with specific item.

.slide It gives sliding effect.

.fade It give the fading effect.

Basic jQuery attribute

data-ride It Starts the carousel. You can define carousel a value for data-ride.

Carousel with Control:------------------------------------------------------------------------

- Controls allow to navigate between slides.

- The controls are defined inside the carousel.

- Technically carouse controls are Hyperlinks with button behaviour.

- Click Next for next slide and previous for previous slide.

- Classes required to create carousel controls

Class Description

.carousel-control-prev It adds a previous button.

.carousel-control-prev-icon It is icon used for previous button.

.carousel-control-next It adds a next button.

.carousel-control-next-icon It adds next icon for next button.

- The functionality for navigating previous and next is give by using jQuery Attributes

Attribute Description

data-slide data-slide=”prev” for previous data-slide=”next” for next

role specify the role of elements like dialog, alert, modal, button etc.

Note: Every page can have multiple carousel contents. You need a unique ID for reference. Control usually refer to the ID of carousel.

Carousel Indicators: ----------------------------------------------------------------------------

- Indicators allow to slide to any specific item in carousel.

- Indicators will show how many items are there.

- The classes required for adding indicators

Class Description

.carousel-indicators It is a collection of indicators

- The jQuery attributes used by indicators

Attribute Description

data-target It specifies the ID of carousel. Indicators should refer to ID of carousel.

data-slide-to-number It indicates the index number of items to slide. Index starts with 0.

Carousel Slide Timing : ----------------------------------------------------------------------------

- You can use the attribute “data-interval” to defined timing for every carousel item.

- It uses milliseconds to define the timing [1000ms = 1sec].

Bootstrap Collapse

- It is used to define a container which can expand and collapse dynamically.

- Show or hide contents in a group dynamically.

Class Description

.collapse It is a container that contains the content to collapse.

.collapsing It defines the animation style for collapse.

.collapse.show It is used to show content

- jQuery attributes to control collapse

data-target It specifies the ID reference for collapse container.

data-toggle It is used to toggle the display ON or OFF.

Bootstrap Accordion

- Accordion is a wrapper used to enclose a group of containers, which can toggle the display.

- You have to use combination of “collapse and accordion”.

- You have to use “.accordion” class for defining the main container.

- To refer the accordion, you can use the attribute “data-parent”

Syntax:

</div>

</div>

- You have to use buttons or links to toggle the collapse.

Bootstrap Dropdown

- Bootstrap dropdown is mostly used for navigation and selection.

- They are not suitable for dynamic manipulations like adding items, removing items dynamically.

Class Description

.dropdown It is main container with collection of menu items.

.dropdown-menu It defines a menu with items.

.dropdown-menu-left Menu with left orientation

.dropdown-menu-right Menu with right orientation.

.dropdown-item It specifies item in dropdown menu.

.dropdown-item-text It is to define menu item.

.dropdown-divider It is a separator for menu items.

.dropdown-toggle It will add ON and OFF for dropdown.

.dropright Animation for list items.

.dropleft Left drop animation.

Bootstrap Navigation

- Basic Navigation for page is designed by using “nav” classes.

- The items used for navigation are defined as <ol> or <ul>

- The static navigation options can be defined by using following classes.

Class Description.

.nav It configures a navigation bar

.nav-item It defines style for link in navigation item.

.nav-tabs It defines a tab style for navigation.

.nav-pills It defines a button style for navigation.

.nav-link It is used for links in nav bar.

Bootstrap Tab Content

- Bootstrap provides Tab panels that can allows dynamically changing view.

- Classes required to create panels

Class Description

.tab-content It is a container of tab panels.

.tab-pane It is used to define a panel.

Syntax:

</div>

</div>

Bootstrap List Group

- It is used to display ordered and unordered list.

- The classes are

o .list-group

o .list-group-item (view)

o .list-group-flush

o .list-group-horizontal

o .list-group-horizontal-sm,lg

o .list-unstyled

o .list-group-item-action (onclick)

o .list-group-item-danger, info, warning etc.

Dynamic Nav Bar

- Bootstrap provides “navbar” for designing main navigation for website.

- It is responsive navigation bar, which can change according to the device and screen.

- It uses a combination with “collapse”

Class Description

.navbar It is a container for navigation

.navbarexpand-lg,sm It is used to define responsive navigation bar.

.navbar-toggler It is used to define a toggle button to show or hide the items.

.navbartoggler-icon Icon for toggler button

.navbar.nav To design the navigation items.

.navbar-dark Dark theme

.navbar-light Light theme

.navbar-brand It sets a title for navigation bar.

Bootstrap Modal

- Model is used to display a dialog box.

- You can open and close the dialog dynamically.

Class Description

.modal It is a container for dialog. All dialogs are kept inside modal.

.modal-dialog It configures a dialog box in model.

.modal-content Content comprises of header, body, footer.

.modal-header Header content.

.modal-body Body content.

.modal-footer Footer content.

.modal-title Title text.

.modal-dialog-scrollable It will set overflow to scroll.

.modal-dialog-centered It keeps the dialog center screen.

Bootstrap Forms

- Bootstrap provides a set of classes for presenting forms and controls.

- The classes used for displaying form elements like <input>, <select>, <textarea> etc. are

o .form-control

o .form-control-lg

o .form-control-sm

o .form-control-file [file input]

o .form-control-range [range input]

- The class used to group controls is

o .form-group

- The classes used for radios and checkbox

o .form-check

o .form-check-input

o .form-check-label

o .form-check-inline

Inline Forms

- You can organize and display the form elements inline.

- It configures horizontal orientation for form elements.

- The classes are

o .form-row

o .col [general column classes 1 to 12]

Bootstrap Input Group

- Input group is used to group a set of controls and display as one element.

- Controls can be merged into one component.

Class Description

.input-group It is container with group of controls

.input-group-prepend It is used to define a control hand side.

.input-group-append It is used to define a control right hand side.

.input-group-text It is special appearance for controls defined in prepend and append.

Bootstrap Pagination

- It is predefined style for pagination.

- It defines page navigation items.

- Classes required for navigation design

Class Description

.pagination It is a container for page navigation items.

.pagination-sm, lg It is size for pagination.

.page-item It is an item in page navigation, like previous, next, first, last.

.page-link It defines the link for navigation.

Bootstrap Spinners

- Spinner is used to display status of any task performed in page.

- It shows status like loading, download, processing etc.

- The classes required for spinner

o .spinner-border

o .spinner-border-sm

o .spinner-grow

o .spinner-grow-sm

- You can set colors using “text-contextual”

Bootstrap Position

- The position classes

o .position-static

o .position-relative

o .position-fixed

o .position-sticky

o .position-absolute

o .fixed-top

o .fixed-bottom

o .sticky-top

Bootstrap Size

- Size is defined with height and width

- Width is defined with “w” and height with “h”

- Values for width and height

o w-25

o w-50

o w-75

o w-100

o w-auto

o h25

o h-50

o h-75

o h-auto o mw[max-width]

o mh[max-height]

Bootstrap Text Class

Text Alignment

- .text-left, center, right, justify

Text Wrapping

- .text-wrap

- .text-nowrap

- .text-truncate

Word Break

- .word-wrap

- .break-word

Text Transform

- .text-lowercase

- .text-uppercase

- .text-capitalize

Font Effects

- font-weight-bold

- font-weight-bolder

- font-weight-normal

- font-weight-lighter

- font-italic

- text-monospace

Text Decoration

- text-decoration-none : to remove all effects

Text Color

- text-primary, success, failure

Examples of bootstarp

Recent Posts

Bootstrap

No comments

Personal Finance

Popular Posts

Recent Posts

Comments

Blog Archive

Lables

Contact Form

Total Pageviews

Personal Finance

MISC.

Labels