UNIT V

BOOTSTRAP
WHAT IS BOOTSTRAP?

• 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
WHAT IS RESPONSIVE WEB DESIGN?

• Responsive web design is about creating web sites which automatically

adjust themselves to look good on all devices, from small phones to
large desktops.
WHY USE 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 3, mobile-first styles are part of
the core framework
• Browser compatibility: Bootstrap is compatible with all modern
browsers (Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera)
WHAT ARE THE ADVANTAGES OF BOOTSTRAP

• The following are some advantages of Bootstrap:

• Bootstrap is simple to use and anyone with a basic understanding of HTML and CSS
can get started.
• Features that adapt to phones, tablets, and desktops: Bootstrap's responsive CSS
adapts to phones, tablets, and desktops.
• A mobile-first strategy: Mobile-first styles are built into the Bootstrap framework.
• Bootstrap 4 is compatible with all modern browsers, including Chrome, Firefox,
Internet Explorer 10+, Edge, Safari, and Opera.
WHAT IS A BOOTSTRAP CONTAINER, AND HOW
DOES IT WORK?
• A bootstrap container is a handy class that generates a central region on the page where
we can put our site content. The bootstrap .container has the advantage of being
responsive and containing all of our other HTML code.
• Containers are used to pad the content within them, and there are two types of
containers:
• The .container class creates a fixed-width container that is responsive.
• The .container-fluid class creates a full-width container that spans the entire viewport
width.
EXAMPLES:
DISCUSS BOOTSTRAP TABLE AND VARIOUS CLASSES
THAT CAN CHANGE THE APPEARANCE OF THE TABLE.

• The .table class gives a table some basic styling.

• The .table-striped class gives zebra stripes to the table.
• The .table-bordered class adds borders to the table and cells on all sides.
• On table rows, the .table-hover class adds a hover effect (grey background color).
EXAMPLE
BOOTSTRAP GRID SYSTEM

• The Bootstrap Grid System is a mobile-first, responsive grid system that scales up to 12
columns as the device or viewport size grows. Predefined classes for quick layout options and
powerful mix-ins for creating successful semantic layouts are included in the system. There are
five classes in the Bootstrap 4 grid system:
• .col-xs for extra small devices, whose screen width is less than 576px.
• .col-sm- small devices, whose screen width is equal to or greater than 576px.
• .col-md- medium devices, whose screen width is equal to or greater than 768px.
• .col-lg- large devices, whose screen width is equal to or greater than 992px.
• .col-xl- extra large devices, whose screen width is equal to or greater than 1200px.
• The classes listed above can be combined to build layouts that are more dynamic and
adaptable.
BUTTON GROUP AND BREADCRUMB IN
BOOTSTRAP
• Button group:
• Multiple buttons can be placed together on a single line using button grou can use this
to group objects together, such as alignment buttons.
• The .btn-group class is used for basic button groups.You can use the class .btn to wrap
a set of buttons in .btn-group
• https://www.w3schools.com/bootstrap/bootstrap_button_groups.asp
BREADCRUMBS:

• Breadcrumbs are a wonderful way to display a Breadcrumbs can show the dates of
publication, categories, and tags in the case of blogs. They show where the current page is
in the navigational hierarchy. In Bootstrap, a breadcrumb is essentially an unordered list
wit adds the separator for you automatically.

• https://www.w3schools.com/howto/howto_css_breadcrumbs.asp
HOW IS TOOLTIP DIFFERENT FROM POPOVER?

• When the user moves the mouse pointer over an element, the Tooltip component
appears as a little pop-up box.
• The Popover component is a pop-up box that emerges when the user clicks on an
element. The popover may hold a lot more information.
• The popover will show on the right side of the element by default whereas the tooltip
will show on the top of the element by default.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs
_tooltip_pos&stacked=h

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs
_popover&stacked=h
WHAT CLASSES CAN HELP YOU CHANGE THE
DEFAULT SETTINGS OF POSITIONING A POPOVER
AND CLOSING A POPOVER?

• The popover will show on the right side of the element by default.
• When you click on the element again, the popover closes by default.
• To position the popover on the top, bottom, left, or right side of the element, use the
data-placement attribute.
• The data-trigger="focus" attribute can be used to close the popover when the
user clicks outside the element.
• Use the data-trigger attribute with the value "hover" if you want the popover to
appear when you move the mouse cursor over the element.
WRITE A NOTE ON ALERT AND BOOTSTRAP CARD.

• Bootstrap alert:
• Create a wrapper <div> and add a class of .alert and one of the contextual classes to
create a basic alert (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-
primary, .alert-secondary, .alert-light or .alert-dark).
BOOTSTRAP ALERT:

https://www.w3schools.com/bootstrap/bootstrap_alerts.asp
BOOTSTRAP CARD:

• In Bootstrap 4, a card is a bordered box with padding surrounding its content. It has
options for headers, footers, content, and colors, among other things.
 ANOTHER EXAMPLE:

https://www.w3schools.com/bootstrap4/bootstrap_cards.asp
WRITE A NOTE ON BOOTSTRAP WELL AND
PAGINATION.
• The Bootstrap well is simply a container that makes the content appear sunken. It can
also produce an inset effect on the webpage. With the aid of <div> and class, a developer
may create a well and also wrap the content in the well. The content will be displayed
according to your preferences
• https://www.w3schools.com/Bootstrap/bootstrap_wells.asp
• Bootstrap Pagination: If your website has lots of pages, you might require adding some
sort of pagination to each page.
• https://www.w3schools.com/bootstrap/bootstrap_pagination.asp
EXAMPLE
CODE:
PAGINATION IS HOW BOOTSTRAP HANDLES AN
UNORDERED LIST. THE FOLLOWING CLASSES ARE
PROVIDED BY BOOTSTRAP TO MANAGE PAGINATION:

• .pagination: This class is required to enable pagination on your page.

• .disabled, .active: Use .disabled for unclickable links and .active to indicate the current page
when customising links.
• .pagination-Ig and .pagination-sm: use these to get different size items.
• https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pagination_active&stacked=h
• https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pagination_disabled&stacked
=h
• https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pagination_sizing&stacked=h
WHAT ARE BADGES? WHICH CLASS WILL YOU USE
TO MAKE YOUR BADGE LOOK MORE ROUNDED?
• Badges are used to supplement any content with additional information. To make
rectangular badges, use the .badge class with a contextual class (like .badge-secondary)
within <span> elements. It's worth noting that badges scale to fit the parent element's
size (if any).
• To make the badges more rounded, we use the .badge-pill class.
• https://www.w3schools.com/bootstrap/bootstrap_badges_labels.asp
EXAMPLE
WHAT ARE THE TWO CODES FOR DISPLAYING
CODE? WHAT IS A LEAD?
• In Bootstrap, there are two straightforward ways to display code:
• The <code> element is used to showcase a piece of inline code.
• You can use the <pre> tag to display a code that has multiple lines or even a block
element.
• https://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_txt_hn&stacked=h
LEAD :

• Lead adds some emphasis to a paragraph. The .lead class is used to achieve this and it
makes the font larger, taller, and lighter in weight.
WHAT DO YOU UNDERSTAND BY COLUMN
ORDERING IN BOOTSTRAP?
• One of the most intriguing properties of bootstrap is column ordering.
• The columns can be readily written in a specific order by utilizing relevant functions.
• We can alternatively put them in a different column. Use the push and pull column classes
to easily rearrange or rearrange the order of the columns.
• These classes are used in conjunction with the .col-xs-#, .col-sm-#, .col-md-#, and .col-lg-#
Bootstrap grid classes.
• .col-xs-push-# and .col-xs-pull-# are the push and pull classes for the Bootstrap grid.
• This also works well for sm, md, and lg. The pull class moves columns to the left, whereas
the push class moves them to the right.