Volume 3
By
Sudha Agarwal
8130434134
INDEX
JUMBOTRON
BADGES
PROGRESS BAR
PAGINATION
CARDS
TOOLTIP
POPOVER
SCROLLSPY
http://www.4kitsolutions.com
BOOTSTRAP4 JUMBOTRON
The Bootstrap jumbotron component
provides an excellent way to showcase the
key content or information on a web page.
Just wrap your featured content like heading,
descriptions etc. in a <div> element and
apply the class .jumbotron on it.
http://www.4kitsolutions.com
BOOTSTRAP4 JUMBOTRON
http://www.4kitsolutions.com
FULL PAGE WIDTH JUMBOTRON
To create a jumbotron without rounded
corners and that covers the full width of the
viewport, place it outside all the containers,
add the .jumbotron-fluid modifier class on
it, and add a .container or .container-
fluid within it
http://www.4kitsolutions.com
BOOTSTRAP4 BADGES
Badges are generally used to indicate some
valuable information on the web pages such as
important heading, warning messages,
notification counter, etc.
http://www.4kitsolutions.com
BOOTSTRAP4 BADGES
http://www.4kitsolutions.com
CONTEXTUAL CLASSES FOR
BADGES
http://www.4kitsolutions.com
SHOWING COUNTER WITH
BADGES
You can also use badges as part of links or buttons to
provide a counter, such as number of received or
unread messages, number of notifications etc. They're
most commonly found in email clients, application
dashboards, social networking websites, etc.
http://www.4kitsolutions.com
BOOTSTRAP 4 PROGRESS BARS
Progress bars can be used for showing the
progress of a task or action to the users.
To create a default progress bar, add
a .progress class to a container element and
add the .progress-bar class to its child element.
Use the CSS width property to set the width of
the progress bar
http://www.4kitsolutions.com
BOOTSTRAP 4 PROGRESS BARS
http://www.4kitsolutions.com
BOOTSTRAP 4 PROGRESS BARS
Pagination is the process of organizing content
by dividing it into separate pages.
Pagination is used in some or other form quite
often in almost every web application, for
instance it is used by search engines for
displaying a limited number of results on search
results pages, or showing a limited number of
posts for every page on a blog or forum.
http://www.4kitsolutions.com
BOOTSTRAP 4 PAGINATION
http://www.4kitsolutions.com
BOOTSTRAP4 CARDS
Bootstrap 4 introduces a
new flexible and
extensible content
container—
the card component—in
place of old panels, wells,
and thumbnail
component.
It includes options for
headers and footers, a
wide variety of content,
contextual background
colors, and powerful
http://www.4kitsolutions.com
display options.
BOOTSTRAP4 TOOLTIP
A tooltip is a small pop up that appears when
user places the mouse pointer over an element
such as link or buttons to provide hint or
information about the element being hovered.
Tooltips can be very helpful for the new visitors
of your website because they enable the user
to know the purpose of icons and links by
placing the mouse pointer over them.
http://www.4kitsolutions.com
STEP 1: ADDING THE TOOLTIP MARKUP
To create a tooltip, you need to add the data-
toggle="tooltip" attribute to an element.
Tolltip text that would display on hover can be
specified using the title attribute.
http://www.4kitsolutions.com
STEP 2: TRIGGERING THE TOOLTIPS
Tooltips can be triggered via JavaScript — just
call the tooltip() Bootstrap method with
the id, class or any CSS selector of the target
element in your JavaScript code.
http://www.4kitsolutions.com
BOOTSTRAP 4 POPOVER
Popover is a small overlay of content that is
used to display secondary information of any
element when it is clicked by a user, like those
on the iPad.
http://www.4kitsolutions.com
STEP 1: ADDING THE POPOVER MARKUP
To create a popover, you need to add the data-
toggle="popover" attribute to an element.
Whereas, popover's title and its content that
would display upon trigger or activation can be
specified using the title and data-
content attribute respectively.
http://www.4kitsolutions.com
STEP 2: TRIGGERING THE POPOVERS
Popovers can be triggered via JavaScript — just
call the popover() Bootstrap method with
the id, class or any CSS selector of the required
element in your JavaScript code.
http://www.4kitsolutions.com
BOOTSTRAP 4 SCROLLSPY
The Bootstrap scrollspy is a navigation
mechanism that automatically highlights the
nav links based on the scroll position to
indicate the visitor where they are currently on
the page.
The scrollspy will make your web page more
elegant and accessible, if you are using the
bookmark links for directing the visitors to the
different sections of a page that has a huge
amount of content.
http://www.4kitsolutions.com
THANK YOU
HAPPY LEARNING!!
[email protected]
