Bootstrap Colors

Colors help you present the context based on their distinctiveness.

There might be a red colored warning, a light brown <div> with some side note etc.

In this post we will study how Bootstrap controls the colors and used them to convey meaning better.

Bootstrap Utility Classes

Bootstrap has a list of utility classes for different color templates for text content in the websites.

This also includes the support for styling your link elements for hover and other states. Let’s take a look:

  • .text-primary
  • .text-secondary
  • .text-success
  • .text-danger
  • .text-warning
  • .text-info
  • .text-light
  • .text-dark
  • .text-muted
  • .text-white

The code below gives a simple illustration of using these classes with the text content.

Run

You can use the same contextual text classes to work on anchors. You can style these anchors for hover and focus states.

Please note, that the .text-white and .text-muted classes are not used for this purpose. See the code below for more:

Run

Just like the text content, we have contextual classes for controlling the background colors too. Here too, the anchor elements will get darker on hover. In some cases you might want to use the .text-* classes as well for proper display. Check out the code to know more:

Bootstrap Background color

.bg-primary

Run

Bootstrap Background gradient

Background gradient can be controlled by its own set of utility classes. For this, the $enable-gradients should be set to true.

Once that’s done, you can use the .bg-gradient- utility classes. However, by default, $enable-gradients is set to false.

The code we are using in the example below is broken. We have intentionally done this for easier customization.

You can learn more about the Sass operation and enable these classes.

Bootstrap Dealing with specificity

There might come instances where contextual classes may not be applied because of the specificity of another selector.

In such cases wrapping your element’s content in a <div> with the class proves to be a helpful workaround.

Conveying meaning to assistive technologies

To convey the meaning of the content to the assistive technologies mere colors might not be that effective.

You need to ensure that whatever information the colors are denoting is either obvious from your content itself or there are alternative means to include it.

Bootstrap Affix

The Affix Plugin

The Affix plugin is used when you want some element to stay fixed or stuck on some area of the page.

This is usually done with the social icon buttons of your website so that they are locked as you scroll up or down on the page.

You can also make your navbar fixed on the page so that its position is locked while you scroll through the page.

Creating an Bootstrap Affixed Navibar

You need to use the data-spy= “affix” attribute for this. Check the code below for example

Same can be done with a vertical affixed navigation menu. See the code below for example:

Let us now try to understand the working of the affix elements.

There are three major classes you need to know to undersand affix:

  • .affix
  • .affix-top
  • .affix-bottom

All these classes represent a particular state each. See the description below for better understanding:

The .affix-top or .affix-bottom class indicates that the element is at the top-most or bottom-most position.

So, for now CSS positioning is not required.

Once you scroll past the affixed element the actual affixing is triggered. Now the .affix-top or .affix-bottom class is replaced with the .affix class.

This is also the point where you need to add the CSS top or bottom property.

If you have defined a bottom offset, the .affix class will be replaced by .affix-bottom once you scroll past it.

The CSS property, position: absolute will help you with this.

You can also use the Affix and Scrollspy plugins together:

Bootstrap Horizontal Menu (Navbar)

The code below illustrates the horizontal navbar to be affixed to the page.

This is done when you need the navbar to be accessible throughout the page

Bootstrap Vertical Menu (Sidenav)

The code below illustrates the Vertical menu affixed to the page.

This is done usually when the a part or whole of the menu needs to be accessible throughout the page.

Bootstrap Via data-* Attributes

For the affix plugin, there are three data* attributes used that are

  • data-spy: To set element as affix
  • data-offset-top: To set the top position of the affixed element
  • data-offset-bottom: To set the bottom position of the affixed element

Bootstrap Affix Events

Here’s a list of all the affix events that you need to know:

  • bs.affix: Even just before the element position is going to be affixed. The .affix-top class is now about to be replace with .affix
  • bs.affix: Event of the fixed positioning of the affixed element. So, the .affix class has now replaced the .affix-top
  • affixed-top.bs.affix: Event of the top element returning to its original postion. The .affix is again replaced with the affix-top class.
  • affixed-bottom.bs.affix: Event before and after the bottom element has returned to its original position. The .affix class is replaced with the .affix-bottom class.

Bootstrap Tabs and Pills

Bootstrap Menus

Menus have become a usual part of any website now. A simple HTML menu is the one made with an unordered list <ul>.

It is styled further, as per the web-page requirements, and displayed to the user.

Bootstrap would help you create a horizontal menus with the help of the .list-inline class.

You can add this class to your <ul> tag and you are ready for a basic menu for your website.

But this post isn’t about those menus. Here, we will discuss what we call Tabs and Pills.

These are better styled menus that Bootstrap offers us.

Bootstrap Creating a Tab

To create a tab you need to use to use the class= “nav nav-tabs” attribute with your ul element.

Check out the example below:

You can also use the .active class to highlight the active menu.

Bootstrap Tabs With Dropdown Menu

You might have sub-menus for your menus. These can be displayed as dropdowns for each menu.

See the sample code below for illustration:

 Bootstrap Pills

To create pills you need to set your <ul> element as <ul class="nav nav-pills">.

The current page will be active, which can be done by <li class="active">:

Bootstrap Vertical Pills

For vertical alignment of the pills you need to add the .nav-stacked class.

Bootstrap Pills with dropdown menus

You can also make the Pills hold dropdown menus.

Here’s an example for the same:

Bootstrap Centered Tabs and Pills

The .nav-justified class will help making the pills centered or justified

Bootstrap Toggleable / Dynamic Tabs

Adding the data-toggle="tab" attribute will make the tabs toggleable.

You can also use the .tab-pan and .tab-content classes for better content wrapping

Bootstrap Glyphicons

Bootstrap Glyphicons

Glyphicons are basically small icons available to use for pictorial representiation with text content, buttons, toolbars etc.

Bootstrap provides its glyphicons from the Glyphicons Halflings set. There are 260 glyphicons available for use as of now.

These can be used with buttons, toolbars, text, navigation and forms.

Below are some examples of commonly used glyphicons:

  • Print glyphicon:
  • Envelope glyphicon:
  • Search glyphicon:

Bootstrap Glyphicon Syntax

It is quite easy to add to your web page. The basic syntax for inserting any Glyphicon is as following:

Therefore, to insert a required glyphicon, all you need to do set the class attribute as “glyphicon” followed by the glyphicon name.

The sample code below gives an illustration of the different ways the glyphicons can be used in the page.

Here we are using the glyphicons with text, link, anchor and searchbar. Have a look:

Available Glyphicons in Bootstrap

Below is the list of all the glyphicons available in Bootstrap.

You can check the icon images by replacing * in the below code with the respected glyphicon name

glyphicon-asterisk 
glyphicon-plus
glyphicon-minus
glyphicon-euro
glyphicon-cloud
glyphicon-envelope
glyphicon-pencil
glyphicon-glass
glyphicon-music
glyphicon-search
glyphicon-heart
glyphicon-star
glyphicon-star-empty
glyphicon-user
glyphicon-film
glyphicon-th-large
glyphicon-th
glyphicon-th-list
glyphicon-ok
glyphicon-remove
glyphicon-zoom-in
glyphicon-zoom-out
glyphicon-off
glyphicon-signal
glyphicon-cog
glyphicon-trash
glyphicon-home
glyphicon-file
glyphicon-time
glyphicon-road
glyphicon-download-alt
glyphicon-download
glyphicon-upload
glyphicon-inbox
glyphicon-play-circle
glyphicon-repeat
glyphicon-refresh
glyphicon-list-alt
glyphicon-lock
glyphicon-flag
glyphicon-headphones
glyphicon-volume-off
glyphicon-volume-down
glyphicon-volume-up
glyphicon-qrcode
glyphicon-barcode
glyphicon-tag
glyphicon-tags
glyphicon-book
glyphicon-bookmark
glyphicon-print
glyphicon-camera
glyphicon-font
glyphicon-bold
glyphicon-italic
glyphicon-text-height
glyphicon-text-width
glyphicon-align-left
glyphicon-align-center
glyphicon-align-right
glyphicon-align-justify
glyphicon-list
glyphicon-indent-left
glyphicon-indent-right
glyphicon-facetime-video
glyphicon-picture
glyphicon-map-marker
glyphicon-adjust
glyphicon-tint
glyphicon-edit
glyphicon-share
glyphicon-check
glyphicon-move
glyphicon-step-backward
glyphicon-fast-backward
glyphicon-backward
glyphicon-play
glyphicon-pause
glyphicon-stop
glyphicon-forward
glyphicon-fast-forward
glyphicon-step-forward
glyphicon-eject
glyphicon-chevron-left
glyphicon-chevron-right
glyphicon-plus-sign
glyphicon-minus-sign
glyphicon-remove-sign
glyphicon-ok-sign
glyphicon-question-sign
glyphicon-info-sign
glyphicon-screenshot
glyphicon-remove-circle
glyphicon-ok-circle
glyphicon-ban-circle
glyphicon-arrow-left
glyphicon-arrow-right
glyphicon-arrow-up
glyphicon-arrow-down
glyphicon-share-alt
glyphicon-resize-full
glyphicon-resize-small
glyphicon-exclamation-sign
glyphicon-gift
glyphicon-leaf
glyphicon-fire
glyphicon-eye-open
glyphicon-eye-close
glyphicon-warning-sign
glyphicon-plane
glyphicon-calendar
glyphicon-random
glyphicon-comment
glyphicon-magnet
glyphicon-chevron-up
glyphicon-chevron-down
glyphicon-retweet
glyphicon-shopping-cart
glyphicon-folder-close
glyphicon-folder-open
glyphicon-resize-vertical
glyphicon-resize-horizontal
glyphicon-hdd
glyphicon-bullhorn
glyphicon-bell
glyphicon-certificate
glyphicon-thumbs-up
glyphicon-thumbs-down
glyphicon-hand-right
glyphicon-hand-left
glyphicon-hand-up
glyphicon-hand-down
glyphicon-circle-arrow-right
glyphicon-circle-arrow-left
glyphicon-circle-arrow-up
glyphicon-circle-arrow-down
glyphicon-globe
glyphicon-wrench
glyphicon-tasks
glyphicon-filter
glyphicon-briefcase
glyphicon-fullscreen
glyphicon-dashboard
glyphicon-paperclip
glyphicon-heart-empty
glyphicon-link
glyphicon-phone
glyphicon-pushpin
glyphicon-usd
glyphicon-gbp
glyphicon-sort
glyphicon-sort-by-alphabet
glyphicon-sort-by-alphabet-alt
glyphicon-sort-by-order
glyphicon-sort-by-order-alt
glyphicon-sort-by-attributes
glyphicon-sort-by-attributes-alt
glyphicon-unchecked
glyphicon-expand
glyphicon-collapse-down
glyphicon-collapse-up
glyphicon-log-in
glyphicon-flash
glyphicon-log-out
glyphicon-new-window
glyphicon-record
glyphicon-save
glyphicon-open
glyphicon-saved
glyphicon-import
glyphicon-export
glyphicon-send
glyphicon-floppy-disk
glyphicon-floppy-saved
glyphicon-floppy-remove
glyphicon-floppy-save
glyphicon-floppy-open
glyphicon-credit-card
glyphicon-transfer
glyphicon-cutlery
glyphicon-header
glyphicon-compressed
glyphicon-earphone
glyphicon-phone-alt
glyphicon-tower
glyphicon-stats
glyphicon-sd-video
glyphicon-hd-video
glyphicon-subtitles
glyphicon-sound-stereo
glyphicon-sound-dolby
glyphicon-sound-5-1
glyphicon-sound-6-1
glyphicon-sound-7-1
glyphicon-copyright-mark
glyphicon-registration-mark
glyphicon-cloud-download
glyphicon-cloud-upload
glyphicon-tree-conifer
glyphicon-tree-deciduous
glyphicon-cd
glyphicon-save-file
glyphicon-open-file
glyphicon-level-up
glyphicon-copy
glyphicon-paste
glyphicon-alert
glyphicon-equalizer
glyphicon-king
glyphicon-queen
glyphicon-pawn
glyphicon-bishop
glyphicon-knight
glyphicon-baby-formula
glyphicon-tent
glyphicon-blackboard
glyphicon-bed
glyphicon-apple
glyphicon-erase
glyphicon-hourglass
glyphicon-lamp
glyphicon-duplicate
glyphicon-piggy-bank
glyphicon-scissors
glyphicon-bitcoin
glyphicon-yen
glyphicon-ruble
glyphicon-scale
glyphicon-ice-lolly
glyphicon-ice-lolly-tasted
glyphicon-education
glyphicon-option-horizontal
glyphicon-option-vertical
glyphicon-menu-hamburger
glyphicon-modal-window
glyphicon-oil
glyphicon-grain
glyphicon-sunglasses
glyphicon-text-size
glyphicon-text-color
glyphicon-text-background
glyphicon-object-align-top
glyphicon-object-align-bottom
glyphicon-object-align-horizontal
glyphicon-object-align-left
glyphicon-object-align-vertical
glyphicon-object-align-right
glyphicon-triangle-right
glyphicon-triangle-left
glyphicon-triangle-bottom
glyphicon-triangle-top
glyphicon-superscript
glyphicon-subscript
glyphicon-menu-left
glyphicon-menu-right
glyphicon-menu-down
glyphicon-menu-up

Bootstrap Flex

The layout for the Bootstrap components can be controlled well by using the flex

Bootstrap Flexbox

One of the considerable improvements that were made in Bootstrap 4 from Bootstrap 3 was the change of layout.

Here the layout was changed from floats to Flexbox. When talking about flexible responsive layout structure, The Flexible Box Layout Module is the best option for saving us from complex positioning and floats.

It is necessary to note at this point that the IE versions IE9 and before, do not support Flexbox and Bootstrap 4.

Here’s the sample code for creating a flex-box using the d-flex class

The .d-inline-flex class can be used to create inline flexbox.

See the code below:

Horizontal Direction

The flex items can be displayed horizontally using .flex-row class. This is the default alignment.

The .flex-row-reverse class will right-align the horizontal direction

There are two classes to vertically align the flex items. These are

  • .flex-column: Displays the flex items vertically
  • .flex-column-reverse: Displays the flex items in a reverse the vertical direction:

Bootstrap Justify Content

The .justify-content-* classes can be used to change the alignment of the flex items.

The * can for with start (default), end, center, between or around:

Bootstrap Fill / Equal Widths

The .flex-fill class forces the flex items into equal widths:

Bootstrap Grow Flex

If you’re unsure about the available space for your for, the .flex-grow-1 allows the flex to take all the remaining space.

In the below example code, We have two flex items taking up their necessary space and the last item taking rest of the available space.

You can also use the .flex-shrink-1 class make the flexbox shrink if necessary.

Bootstrap Flex Order

The .order-* classes helps us change the visual order of some flex.

The * is replaceable with numbers 0 to 12. Here, the lowest number is assigned the highest priority and so on.

Bootstrap Tooltip

The Tooltip Plugin

A Bootstrap tooltip is a useful plugin that is there to give you more information about the different page elements. Basically, it is a small pop-up box which will appear when you move hover your mouse pointer over some element.

Creating a Bootstrap Tooltip

You can create a bootstrap tooltip by adding the data-toggle="tooltip" attribute to any element. The title attribute can be used to specify the tooltip content.

The code below, can be used to enable all tooltips in the document:

Positioning Bootstrap Tooltips

The default position for the tooltip is on top of the target element. This can be changes to a desired position by using the data-placement attribute.

You can use data-placement="left | right | bottom | top"

You can set the position on bottom, left, right or even top. See the code below for examples:

Here’s a useful tip for if you’re not sure about the best position for the tooltip.

You can set the value for the data-placement attribute as “auto”. This will let the browser decide the position of the tooltip.

So for instance, if you put the value as “auto right”, the tooltip will be displayed on the right side whenever possible, otherwise on the left.

Bootstrap tooltip methods

Here’s a list of tooltip methods that can be used to control the different states of the tool tip based on some specified arguments.

  • .tooltip(options): For activating the tooltip based on the option parameter. The list of the options is as following
    • animation: Takes boolean values. Default value true. Controls the fade transition
    • container: Takes a string or the boolean false. Default value false. Appends the tooltip
    • delay: Takes a number or an object. Default value 0. Controls the show and hide delay.
    • html: Takes a boolean value. Default value false. Controls the acceptance for HTML tages.
    • placement: Takes a string value. Default value “top”. Controls the tooltip position.
    • selector: Takes a string or the boolean false. Default value false. Specifies the selector.
    • template: Takes a string value. Basic HTML code for the tooltip
    • title: Takes a string value. Default value “”
    • .trigger: Takes a string value. Default value “hover focus” Specifies the trigger for the tooltip
    • viewport: Takes a string or an object. Default value {selector: “body”, padding: 0}. Controls the view bounds of the tooltip,
  • .tooltip(“show”): For making the tooltip visible
  • .tooltip(“hide”): For making the tooltip hidden
  • .tooltip(“toggle”): For toggling the the tooltip
  • .tooltip(“destroy”): For hiding and destroying the tooltip

Bootstrap tooltip Events

Listed below, are the different events of the tooltip element. Have a look:

  • bs.tooltip: The event of the tooltip being about to be shown
  • bs.tooltip: The event of the tooltip being fully shown after all the CSS transitions are completed
  • bs.tooltip: The event of the tooltip being about to be hidden
  • bs.tooltip: The event of the tooltip being fully hidden after all the CSS transitions are completed.

Bootstrap Scrollspy

The Scrollspy can be used when you need to navigate to different sections of the same page.

Thus, as you scroll, the links in the navigation bar are automatically updated.

Bootstrap Basics Scrollspy

The following code will help you understand the creation of Scrollspy.

Let’s try to understand the above code:

  • First thing we do to create a scrollspy is adding the data-spy="scroll" attribute to any element. This is generally the <body> element so that all of the page body can be added to the scrollspy
  • Next we add the data-target attribute. The value can be id or the class name of the navigation bar (.navbar). This makes sure that the navbar is connected with the scrollable area.
  • It is important that scrollable elements match the ID of the navbar’s list items (<div id="section1"> matches <a href="#section1">).
  • You can also set a data offset from the top for calculating the scroll position. This can be done using the data-offset attribute. This is essentially useful in cases when there’s inconsistency between the navbar items and the scrollable elements. The default offset is 10 pixels.
  • The data-spy="scroll" element requires relative positioning. This can be achieved using the CSS position property, with value set to “relative”.

Bootstrap Scrollspy Vertical Menu

Vertically aligned Scrollspy elements are quite common in many websites.

The code below illustrates how we can use Bootstrap’s vertical navigation pills for achieving this goal:

Bootstrap Scrollspy Options

To pass options to Scrollspy elements, you can use the data attributes or JavaScript.

By a general rule, all you need to is set the data-* attribute where * is replace by the option. Here are the options that you can use for Scrollspy

  • Offset: Takes a number value. The default value is set as 10. Used to specify the number of pixels that need to offset from top for correct positioning of the scrollable items.

Bootstrap Scrollspy Methods

Bootstrap has provides useful methods for the elements to be used for their better control.

Here’s a list of the methods for the Scrollspy element:

  • .scrollspy(“refresh”): If there are any ongoing changes on the scrollspy element, you need to refresh the page to have those chanes reflected immediately. This can be done using this method. For any addition of removal in the scrollspy element, you can have the document refreshed using this method.

Bootstrap Scrollspy Events

There is just one considerable event for the scrollspy element. Here’s the description:

  • bs.scrollspy: Event of a new item being activated by the scrollspy.

Bootstrap Progress Bars

The progress of any process can be visually represented using the progress bar element.

You can use it to show the progress of any web-page loading or while completing a transaction process.

Here we will discuss more about the progress bar element and how Bootstrap can help us control its different features.

Bootstrap Basic Progress Bar

A default progress bar can be created using following two contextual classes:

  • .progress: Used with the container element like <div>
  • .progress-bar: To be used with the child element of the container element.

The width of the progress bar can be adjusted using the CSS width property. The progress representation will be made accordingly.

Basically, the width is increased as per the process flow, representing the progress to the user.

The below code shows the creation of a basic progress bar:

Bootstrap Progress Bar Height

The default height of the progress bar is 16px.

Just like the width of the progress bar you can also use the CSS height property to change the height to a desired value.

Please note, that the height for the progress container and the progress bar must be set as same.

See the code below for illustration:

Bootstrap Progress Bar Labels

For providing better readability to the user, we can show the progress percentage by adding some text content in the progress bar.

See the code below for example:

Bootstrap Colored Progress Bars

The default color of the progress bar is set to blue (primary).

For setting a desired color, you choose among the various Bootstrap contextual classes fro different background colors.

See the code below for example:

Bootstrap Striped Progress Bars

You can also add stripes to the progress bars. The .progress-bar-striped class can be used for this task.

The following code is an example for same:

Bootstrap Animated Progress Bar

The .progress-bar-animated class can be used to give animation to the progress bar.

The code below explains the usage for this class:

Bootstrap Multiple Progress Bars

Multiple progress bars can be stacked to show progress about different phases of the processes.

See the code below for the illustration

Bootstrap Popover

The Popover component is a lot like the tooltips. It appears as a pop-up box when you click a certain component on the page.

However, a popover can contain more content than a usual tooltip element. Here, we will study the creation and controlling of the popover component in Bootstrap.

Bootstrap Toggle popover

For creating a popover, we need to add the data-toggle=”popover” attribute to the desired element.

The header of the popover can be specified using the title attribute. The data-content attribute can be used for the popover body.

jQuery is required to enable the popovers on a page. You can call the popover() method for this. See the code for example:

Bootstrap Positioning Popovers

The popovers are positioned right to the target element, by default.

You can use the data-placement attribute for changing the position to top, bottom, left or the right side of the element.

Check the below code snippets for examples:

Bootstrap Closing Popovers

Closing of popovers can also be controlled.

By default, it gets closed when you click on the target element again.

To close it by clicking anywhere outside the element, you can use the data-trigger=”focus” attribute. See the code below:

Setting data-trigger attribute with a value of “hover” will make the popover appear when you hover over the target element.

Check the following code for the same:

Bootstrap Popover Methods

Here’s a list of all the popover methods you can use to control different aspects of popover component in Bootstrap:

  • .popover(options): Used to activate the popover with some option. The list of options is as following:
    • animation
    • container
    • content
    • delay
    • html
    • placement
    • selector
    • template
    • title
    • trigger
    • viewport
  • .popover(“show”): Makes the popover appear
  • .popover(“hide”): Makes the popover disappear
  • .popover(“toggle”): For toggling the popover
  • .popover(“dispose”): Hides and destroys the popover
  • .popover(“enable”): To enable the popover. By default the popover is enabled and can be made visible by clicking (or hovering over) the target element.
  • .popover(“disable”): To disable the popover. Once disabled, the popover cannot be shown unless re-enabled.
  • .popover(“toggleEnabled”): To toggle the popover’s ability to be shown or hidden
  • .popover(“update”): To update the popover’s position

Bootstrap Popover Events

The different events for the popover component can be described as following:

  • bs.popover: The event of the popover being about to be shown
  • bs.popover: The event of the popover to be fully shown after all the CSS transitions are completed
  • bs.popover: The event of the popover being about to be hidden
  • bs.popover: The event of the popover fully hidden after all the CSS transitions are completed
  • bs.popover: The event of the popover template been added to the DOM after the show.bs.popover

Bootstrap Pagination

Any website with multiple pages can employ the pagination feature to make the navigation easy for the user.

Here, we will learn about the features that Bootstrap has to offer for the pagination elements.

Bootstrap Basic Pagination

As told before, pagination helps the user to navigate through the different pages of the website.

Basically it is a series of links numbered consecutively for each page.

The current page number is highlighted with a different color and the series is preceded and followed by two links for ‘Next’ and ‘Previous’.

A basic bootstrap pagination can be created by adding a .pagination class to the <ul> element.

For each <li> item for this, we add the .page-item class and also a .page-link class class for all the links in the <li>.

The below code illustrates the creation of basic pagination

Active State

The highlighting of the current page, you can use the .active class.

Disabled State

Sometimes some page-link is to be disabled due to some temporary or conditional unavailability.

Bootstrap can make this possible with the help of the utility class .disabled.

See the code below:

Bootstrap Pagination Sizing

The classes used to regularize the sizes of the Pagination blocks are as following:

  • .pagination-lg: For larger pagination block size
  • .pagination-sm: For smaller pagination block size

Bootstrap Pagination Alignment

There are utility classes that will help controlling the alignment of the pagination:

  • pagination justify-content-center: To centre align the pagination blocks
  • pagination justify-content-end: To right align the pagination blocks

Bootstrap Breadcrumbs

Breadcrumbs are a variant of Pagination. Here, instead of page numbers, we have a series of pages that come under a similar category and navigation map.

The breadcrumbs are generally, hierarchical pages that you can directly access using the given links.

Mostly, these links are used to navigate back in backward direction.

The two utility classes for the same are:

  • .breadcrumb: Used with the <ul> element in place of .pagination class
  • .breadcrumb-item: Used with the <li> element in place of .page-item class