Quick Reference Study Notes for Bootstrap 4.x (Advanced)

Bootstrap-4

Bootstrap is one of the popular open source framework for quick designing websites and mobile apps, with prior knowledge of html and basic css saving our time to write our own css and along with that maintains quality standards and consistency of the application across the site. Major benefits that we achieve from bootstrap is support across different browsers and responsive styles across different screen sizes which also includes mobile first styles throughout the entire library instead of being in separate files. Bootstrap comes with a pack of JavaScript components for including the functionality that crafts it in simple way for operating things, such as tooltips, modal windows, alerts, etc. You can even leave out the writing scripts completely.       


Changes in Bootstrap 4.0

New Features in Bootstrap 4

  • Bootstrap 4 comes with some new layout components like cards which comes as a replacement for old panels, wells, and thumbnails.

  • Bootstrap 4 uses flexbox classes to control the layouts in  flexible responsive style using flexbox css, instead of older float or positioning css and  this is supported in greater than IE9 and iOS6. But because of support for both new and older browser and ios versions, bootstrap 3 remains the stable version. Powerful features of flexbox bootstrap css is more flexible alignment and ordering element  capabilities both horizontally and vertically.

  • Bootstrap 4 uses rem unit as a default unit instead of pixel

  • Bootstrap 4 uses SASS styles which has advanced features and capabilities than any other CSS extension language. So you will not found any theme css stylesheets Bootstrap 4 after installation which were available in bootstrap 3. Instead of this, scss variables have been provided, which is used for theme purposes.

  • New responsive utility classes of handling padding and spacing css and new border-outline classes have been introduced to quickly apply styles to elements without using any manual CSS code writing so we  no longer need to re-write and re-design everything from ground zero for the different set of devices.

Bootstrap 4 has mainly dropped support for features like Glyphicons, wells, panels, thumbnails,column offset classes and less style based  theme templates from Bootstrap 3 and has modified styles in default color schemes, modal popups,Scrollspy plugin, progress bars, form and input control styles etc. to come up with more improved design structure.

Below are some important classes and other related attributes along with descriptions for learners to quickly start with Bootstrap 4.

Basics

Grid System                   

  • allows up to 12 columns across the page

.row

A flexible element that adjust its width according to screen sizes and is the container element for columns .

col-

for extra small devices with screen width less than 576px

.col-sm-

for small devices with screen width equal to or greater than 576px

.col-md-

for medium devices with screen width equal to or greater than 768px

.col-lg-

for large devices with screen width equal to or greater than 992px

.col-xl-

for extra large devices with screen width equal to or greater than 1200px

.col-*-*

Indicates the format to create a column with specified space inside the row. For example, col-md-3 indicates the 25% of the available width for medium


Container classes

.container

A fixed container has a fixed width. As the browser is resized, its width remains same until it breakpoint is found

.container-fluid

A fluid container spans to the full width of the available viewport. It expands and contracts fluidly meaning it changes as the browser is resized

.jumbotron

A jumbotron indicates a big grey box for calling extra attention to some special content or information


Element Default Settings

<h1> – <h6>

Bootstrap heading h1,h2,h3,h4,h5,h6 classes use font sizes of 2.5rem(=40px), 2rem(=32px),1.75rem( = 28px),1.5rem(= 24px),1.25rem( = 20px) and 1rem (= 16px) respectively.

<small>

Creates a lighter and secondary text in any heading

<mark>

Gives a yellow background color and some padding to mark element

<abbr>

Adds a border at the bottom in dotted style

<kbd>

Sets black background color with text color white, rounded borders and some padding.

<pre>

Modifies the default margin properties and font-size.

<dl>

Modifies the default font-weight and margin properties.

 

Notes :

(1.) * is used for all, small , medium, large, extra large representations and accordingly we need to specify  sm, md,lg,xl in place of * (if * indicator purpose is not mentioned). For ‘all’ , we need not write anything.

(2.) Bootstrap color scheme mentioned in the class names in the table below  as per special names referring to different scenarios is shown below:

 

Bootstrap Fundamental css styling classes

Font styling classes

.display-{number}

This is the general format for display heading classes where {number} corresponds to 1,2,3 and 4 in four available  .display-1, .display-2,.display-3, .display-4  classes which sets larger font-size and lighter font-weight than normal headings(h1-h6) available.

.font-italic           

To apply the italic font to the text.

.font-weight-bold

To create bolder text than the normal text

.font-weight-light

To create the lighter weight text than the normal text

.font-weight-normal

To apply original default weight to text.


Text alignment classes

.text-left

.text-*-left

To apply the left alignment to the text  inside the element and to use the responsive left alignment  for different screens respectively.

.text-center

.text-*-center

To apply the center alignment to the text  inside the element and to use the responsive center alignment  for different screens respectively.

.text-right

.text-*-right

To apply the right alignment to the text  inside the element and to use the responsive right alignment  for different screens respectively.

.text-justify

To justify text inside the element

.text-monospace

To apply monospace style to text inside the element

.text-nowrap

To apply nowrap css to text inside element so that it does not flow outside boundaries of element


Text case classes

.text-lowercase

To set the all the letters of the text in lowercase.

.text-uppercase

To set the all the letters of the text in uppercase.

.text-capitalize

To set the text capitalized i.e to set each start letter of words inside the text in uppercase and rest in lowercase

Contextual color classes

.text-{colorname}

Different meaningful text color classes .text-muted,.text-primary,.text-info,.text-success

.text-warning, .text-danger, .text-secondary, .text-dark, .text-body,..text-light

.text-white for text are available to represent different scenarios as specified in the class names.

.bg-{colorname}

Different meaningful background color classes .bg-primary,

.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light for element are available to represent different scenarios as specified in the class names.

Bootstrap alerts - Creates an alert box on page which appears as a highlighted message on page.

.alert

Parent container element to create the alert box.

.alert-{colorname}

Different color classes .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-light  .alert-dark.alert-secondary are available to set different background colors for the box indicating the intent of message. For further customization to create animated alert, .fade .show can be added on this element.

.alert-link

Added to the link element inside the .alert element.

.alert-dismissible

To create an alert box which can be closed from close button click, add this class to .alert element

.close

It is added to button on which the alert box should be closed.

data-dismiss="alert"

It is added to button to create a connection with target alert box for close action.

Bootstrap 4 Utilities

Border classes

.border

To apply grey shade solid borders on all sides in the element.

.border-0

To remove borders from all sides in the element.

.border-{side}-0

To remove borders from specific sides in the element as specified in their class names.

.border-top-0,.border-right-0,.border-bottom-0,.border-left-0

.border-{colorname}

To apply different meaningful colors to borders of element.

.border-primary,.border-secondary,.border-success,..border-danger.border-warning

.border-info,..border-light,..border-dark,..border-white

Element position and size Manipulation css

.rounded

To make all corners round.

.rounded-{side}

Four rounded classes .rounded-top,.rounded-bottom,.rounded-left and .rounded-right are available to  make the corners of the element area rounded as specified in their names

rounded-0

Removes the rounded css from all element corners

.float-right, .float-left

Float the element to left and right inside the container element as specified in their names.

.clearfix

Float css applied to element can be removed with .clearfix class.

.float-*-left

.float-*-right

To handle the floating of an element responsive to different screen sizes with (sm,md,lg,xl in place of *) respectively.

.float-none

To set the float property none to an element.

.mx-auto

To align the element in the center using auto value for left and right margins.

w-{perwidth}

Specific width classes .w-25, .w-50, .w-75, .w-100 are available to set the width of element as 25%, 50%,75%,100% of their parent element width respectively.

.mw-100

To apply max-width limit property of 100% to element.

h-{perheight}

Specific height classes .h-25, .h-50, .h-75, .h-100 are available to set the height of element as 25%, 50%,75%,100% of their parent element height respectively.

.mh-100

To apply max-height limit property of 100% to element.

Spacing utility classes

Various new padding and margin setting css classes are introduced. Specific class name in two types of formats {property}{sides}-{media}-{propertyvalue} and {property}{sides}-{propertyvalue}  based on responsiveness are designed for space utility classes.

{property}

m - margin and p -  padding

{sides}

t - top,    b - bottom, l - left, r - right ,x - both left and right, y - both top and bottom and

blank - all 4 sides of the element

{propertyvalue}

{propertyvalue} in the class name syntax has a specific  indicates the value assigned to css property with specific numbers from 0-5 as follows

  • 0 - indicates  0

  • 1 - indicates .25rem

  • 2 - indicates .5rem

  • 3 - indicates 1rem

  • 4 - indicates 1.5rem

  • 5 - indicates 3rem

(if font size for rem being taken as 16px)

  • auto - for applying auto value to margin

{media}

{media} indicates sm, md, lg, and xl verbs for different screen sizes.

For extra small devices xs we use the format space utility class without {media}

Some Examples of Spacing utility classes

m-0

Sets margin value to 0 on all sides of element.

pl-2

Sets the left padding value to .5rem

mx-1

Sets the left and right margin value to .25rem

mt-sm-5

Sets the top margin of element to 3rem for upto small screen devices(width>=576px)

Shadows Add shadow to element

shadow-none

Removes the box-shadow property

shadow

Default shadow applied using box-shadow property

Shadow-sm and shadow-lg

Sets the Smaller shadow and larger shadow than the default shadow size respectively.

Visibility, Position and  Alignment control css

.visible  and .invisible

Sets the visibility property of element to visible and hidden respectively without affecting the css display property

align-*

Alignment classes are available to change the alignment of elements but only works on inline, inline-block, inline-table and table cell elements..align-baseline, .align-top,align-middle , .align-bottom,.align-text-top and .align-text-bottom are used to set the vertical alignment property to baseline, top, middle, bottom text-top and text-bottom respectively.

.fixed-top

Used for fixing the element at the top of the page above all elements.

.fixed-bottom

Used for fixing the element at the bottom of the page below all elements

.sticky-top

Used for fixing the element at the top of the page at the time when the scroll on the scrollable page has crossed the element original start position.

Flex Classes

.d-flex

Added to parent element to create a flexbox container and to transform direct children into flex items. This makes the parent element to expand full width of screen.

.d-inline-flex

Creates an inline flexbox container which expands to the total width the items inside the container occupy.

.flex-row

This class can be used along with .d-flex to display the flex items horizontally. This is the default case and items are left aligned in this case.

.flex-row-reverse

This class can be used along with .d-flex to display the flex items horizontally, but right-alignment of flex items in the horizontal direction.

.flex-column

This class can be used along with .d-flex to display the flex items vertically (on top of each other).

.flex-column-reverse

This class can be used along with .d-flex to display the flex items vertically (on top of each other), but flex elements are aligned in reverse direction.

.justify-content-{position}

This is the general format for five  justify content css classes .justify-content-start, .justify-content-end,.justify-content-center,.justify-content-between and .justify-content-around which change the alignment of flex items with respect to the positions start,end,center, between and around respectively.

.flex-fill

Forces the flex items to fit into equal widths covering the complete .d-flex container.

.flex-grow-1

Can be added to the element inside the .d-flex container, to take over the left width by the other items from the container complete width. This also comes in responsive format.

.flex-grow-0

Forces the flex items to stop grow in the left space. This also comes in responsive format

.flex-shrink-1

Can be added to flex item to make it shrink based on the its internal content if necessary.

.flex-shrink-0

Forces the flex items to stop shrinking based on the its internal text.

.order-{index}

This is the general format of class to change the appearance Order of flex items in .d-flex container. Where range of {index} can be taken from 0-12 Valid classes are from order-0 to order-12, where the lowest order number class has highest priority

.flex-{wrapstyle}.

Flex wrap classes are used to Control how flex items should be wrapped in a flex container .Three flex wrap classes .flex-nowrap(default case for flex container where flex items can overflow the current width ), .flex-wrap(wraps the flex items inside flex container with no overflow ) and .flex-wrap-reverse(wraps the flex items inside flex container with no overflow , but in reverse direction) are available.

.align-content-{position}

This is the general format for .align-content- classes(align-content-start, .align-content-end, .align-content-center, .align-content-between, .align-content-around and .align-content-stretch where align-content-start ) which controls the vertical alignment of gathered flex items in multiple rows and where {position} is the vertical position alignment indicators which are

start - to vertically align all flex items in multiple rows to top    (default case)

end -  to vertically align all flex items  in multiple rows from bottom,

center - to vertically align all flex items  in multiple rows in middle,

around  - flex item rows taking up equal heights and flex items are aligned middle in their row. stretch - vertically forces the flex items to expand to leave no gap between rows.

between -flex item rows taking up equal heights and flex items are aligned top in their row.

.align-items-{position}

This is the general format for .align-content- classes (.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, and .align-items-stretch) which control the vertical alignment of single rows of flex items and where {position} is the vertical position alignment indicators which are start ( top vertical alignment), end (bottom vertical alignment) ,center (center vertical alignment), baseline, stretch(stretches the flex items to the height of flex container).

.align-self-{position}

This is the general format for .align-self- classes(.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, and .align-self-stretch (default)) which is added to a specified flex item to control its vertical alignment and it overrides the vertical alignment provided by .align-items-  to the flex items in the row.

Responsive flex classes

All the above flex css classes comes in responsive formats also where screen size verbs sm, md , lg and xl are used in the classes with format * referring to screen size like

.d-*-flex, .d-*-inline-flex,.flex-*-row,.flex-*-row-reverse, .flex-*-column, .flex-*-column-reverse, .justify-content-*-start,.justify-content-*-end,.justify-content-*-center,.justify-content-*-between,.justify-content-*-around,.flex-*-fill,.flex-*-grow-0,

.flex-*-grow-1,.flex-*-shrink-0,.flex-*-shrink-1,.order-*-0-12,.flex-*-nowrap,.flex-*-wrap,.flex-*-wrap-reverse,and similarly format applies to align-content,align-Items,align-self  css classes also.

Styles classes for formatting specific html elements

.pre-scrollable

Makes a <pre> element scrollable.

.blockquote

To add custom styling to <blockquote>,this class can be added.

.blockquote-footer

To add customized footer of reference in <blockquote>, class can be added to reference element.

.initialism

Displays the text inside an <abbr> element in a slightly smaller font size

.list-unstyled

Removes the  default list style properties of left margin and removes some css from immediate children of List(includes both <ul> and <ol> type) like filled bullets representations.To Remove css from further sub-children in nested List, we need to apply this class at the internal parent levels.

.list-inline & .list-inline-item

To display the children of list in a single line with some tab spaces applied, add the class list .list-inline to <ul> element and .list-inline-item to <li> elements inside that <ul>

Table

.table

Adds padding and highlighted horizontal divider between rows

.table-striped

Applies alternative white and light grey colors to table rows to give zebra-stripes appearance.

.table-bordered

Adds border on all sides of tables and cells

.table-hover

On row hover, highlight row with grey background

.table-dark

Sets the background color of table to black

.table-borderless

Removes border from all table

.table-{colorname}

To apply specific background colors on table, table rows or table cells, table color classes available are .table-primary, .table-success, .table-info,.table-warning, .table-danger,

.table-active, .table-secondary, .table-light and .table-dark.

.thead-dark

Adds a black background to the header part of table.

.thead-light

Adds a grey background color to the header part of table.

.table-sm

Creates the smaller table in look using half the padding from the normal table class paddings

.table-responsive

Creates a responsive table by handling the tables for screen widths less than  992px by adding horizontal scrollbar for these screen sizes, otherwise does not create any difference in look.

.table-responsive-*

If scrollbar is not required in table , then these table responsive classes specific to screen widths are available

.table-responsive-sm (< 576px),  .table-responsive-md  (< 768px)

.table-responsive-lg (< 992px), .table-responsive-xl  (< 1200px)

Images

.rounded

Creates rounded corners in image

.rounded-circle

Changes the shape of image in circle form

.img-thumbnail

Creates the appearance of image like a thumbnail using borders.

.img-fluid

To create responsive images which uses css rules taking max-width as 100% and height: auto and that makes the image scale nicely to their parent.

Buttons  - Button formatting classes can be used with button , input and <a>

.btn

Apply new settings for padding, border, background-color  and greater line height than normal button.

.btn-{colorname}

Creates button with different background colors which are specific to the scenarios that are  mentioned in their class names.Available button color classes are .btn-primary, .btn-secondary, .btn-success, .btn-info,.btn-warning, .btn-danger, .btn-dark, .btn-light,.btn-link

btn-outline-{colorname}

Create white background color buttons with border outline colors specific to the class names representing different scenarios.Available button outline classes are .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-info,.btn-outline-warning, .btn-outline-danger, .btn-outline-dark, .btn-outline-light

.btn-lg and .btn-sm

Creates button with larger and smaller size respectively than the default button size used by the .btn class.

btn-block

To create a full-width button that spans the entire parent element width.

.active and .disabled

.active makes the button appear like a pressed button and .disabled makes the button appear like disabled.

Forms

.form-control

When this class is used  with input>, <textarea>, and <select> elements sets the width 100%

.form-group

This class is useful in designing a full width form to give it appearance like a stack of elements.


 

.form-inline

Creates an inline form with all the form elements being aligned in one line.

Inline form makes the form look very crowded, so to make the appearance of inline form attractive , helper utility classes like .mr-sm-2,.mb-2 etc. can be used to  add margin between controls to make the form elements look separated.

Inputs

.form-control

When we apply this class to input elements gives 100% width to element and apply  attractive padding and border color specific to html 5 input types text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color

.form-check, .form-check-label and .form-check-input

When different checkboxes are added inside the separate div elements having class form-check, label for checkboxes is applied class form-check-label and form-check-input class is used with input type checkbox. It makes the checkboxes appear like a set of options to be chosen by user in stacked format..

When theses classes are used with radiobuttons, it makes one of the radiobuttons selectable in the set of radiobuttons for user.  

If to display checkbox or radiobutton like diapbled then

.disabled class can be used with that element.

.form-check-inline

We can create the inline arrangement of checkboxes and radiobuttons if .form-check-inline is used at place of form-check

form-control-sm or .form-control-lg

To make the element size smaller or bigger than the deafult form control look, these classes can be used.

.form-control-plaintext

To give attractive style to input type text

.form-control-range

To give attractive style input type range control.

.form-control-file

To give attractive style input type "file"

Bootstrap Layout Components

DropDown -a toggleable menu that appears on button click from which you can choose from some fixed set of options given.

.dropdown

.dropdown class element is the start element which is a container for the elements to create dropdown.

.dropdown-toggle,

.dropdown-toggle is applied to button element placed inside the .dropdown element  on click of which dropdown menu should appear.

.dropdown-menu

This creates the menu for dropdown, which is a <div> container for the menu items.

.dropdown-item

Class .dropdown-item is added to the <a> Item elements for the Drop down menu inside the parent element .dropdown-menu.We can also customize the dropdown items by using classes .active and .disabled to make it appear as clicked and display it as disabled respectively

.dropdown-divider

used to separate items inside the dropdown menu with a thin horizontal border

.dropdown-header

class is used to add headers inside the dropdown menu:

.dropright/.dropleft

To create dropdown in the right/left of button, this class can be optionally added along with .dropdown class.This also changes the arrow direction.

.dropdown-menu-right

To right-align the dropdown menu below the dropdown button,this class can be optionally added along with .dropdown class.

.dropup

To expand the drop down menu upwards instead of downwards, use this class instead of .dropdown.

.dropdown-item-text

Can be used on item links for default link styling, otherwise for displaying  item as plain text.

.dropdown-toggle-split

Creates  a dropdown button from two buttons which virtually appears like a single button by removing some horizontal padding on either side of the caret and by removing the margin-left that’s added for regular button dropdowns. This approach is referred as Split button dropdowns.

Button Groups

.btn-group


 

To add the buttons in a single line inside a parent element , add this class to parent element containing the buttons to be arranged in one line.

Button groups are "inline" by default, which makes them appear side by side when you have multiple groups

.btn-group-lg and .btn-group-sm

To apply same same button sizes to all the buttons inside the button group , use this class along with btn-group.

.btn-group-vertical

Used to arrange the group buttons  in vertical line inside a parent group element.

List Groups

.list-group and .list-group-item

To create a basic unordered list group , use an <ul> element with class .list-group, and <li> elements with class .list-group-item.

One can use .active class to highlight the current active item

.list-group-item-action

Same appearance of list group can be created with <div> instead of <ul> and <a> instead of <li> items. And in this case optionally, class .list-group-item-action  can be used if a grey background color is required on hover of item.

.list-group-flush

some borders and rounded corners:

.list-group-item-{colorname}

Classes used for coloring list-items having specific meaning in their names.

.list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark and list-group-item-light

Pagination

.pagination

Class is added to <ul> element to create element as pagination block.

.page-item

Added to the <li> elements. .active class can be used to  hightlight the current page with this item and .disabled class can be used for links that appear un-clickable.

.page-link

Added to the anchor link element (which contains page numbers) inside each <li> item.

.pagination-lg

.pagination-sm

For  larger pagination blocks or smaller pagination blocks, one of these classes can be used with .pagination class.

Breadcrumbs

.breadcrumb

Class is added to <ul> element to create element as breadcrumb block.

.breadcrumb-item

Added to the <li> elements which act as breadcrumb items. .active class can be used to highlight the current page with this item.


Card   -  A bordered box with some padding around its content and It includes options for headers, footers, content, colors, etc.

.card

Indicates start of card element with basic border and display properties. Available Contextual background color classes like bg-primary, bg-dark etc. can be added to customize the card indicating specific meaning.

.card-body

Content Element inside the card has a .card-body class which provides padding and spacing properties

.card-header

Adds a header part to card with some grey shade background.

.card-footer

Adds a footer part to card with some grey shade background.


Badges  -  used to add additional information to any content

.badge

To create span element as a badge element

.badge-secondary

.badge-secondary used with .badge  to create rectangular badge elements.

.badge-*

.badge-primary, badge-secondary, .badge-success, .badge-danger, .badge-warning, badge-info, .badge-light, .badge-dark, .badge-light are contextual color classes for badges indicating specific meaning in their names.

.badge-pill

To make the corners of badges more rounded than default badge.


Input Groups

.input-group

a container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text".

.input-group-prepend

Added to the element which is a  container for the help text to place it in front of the input control.

.input-group-append

Added to the element which is a  container for the help text to place it behind the input control.

.input-group-text

class is added to style the specified help text element.

.input-group-sm

.input-group-lg

To create smaller input groups or large inputs groups than the default size of input groups.


Custom Forms -  Creates a new customized style of browser defaults elements.

.custom-control

a container element in which elements which are to be customized are placed inside this element.

.custom-checkbox

To customize input type checkbox with new size , background color , border and hover style , add this class along with .custom-control.

.custom-radio

To customize input type radio button with new size , background color , border and hover style , add this class along with .custom-control.

.custom-control-input

Add this class to checkbox/radiobutton placed inside the .custom-control element

.custom-control-label

Add this class to label binded to that checkbox/radiobutton

.custom-control-inline

To arrange custom form controls side by side in inline style, add this class along with .custom-control .

.custom-select

To create a custom select menu, add this class to <select> tag.

.custom-select-sm

.custom-select-lg

to create a smaller or bigger select menu than the default size.

.custom-range

To create a custom appearance of range element add this class to an input with type range.

.custom-file

a container element for input type file to customize its appearance.

.custom-file-input

Add this class to input file control placed inside the .custom-file element for customization.

.custom-file-label

Add this class to label binded to that input file control


Collapse   -   To Hide and show large amount of content on some button click

.collapse

indicates a collapsible element which contains the content that will be shown(expand) or hidden(collapse) on click of a button.

data-toggle="collapse"

This attribute is added to the button which will control the display of  collapsible element

target="#id"

This attribute is added to the button which will tell the button which specific collapsible element is to be controlled.

.show

This class can be used with .collapse if content has to shown by default.

data-parent="#parentid"

When there are multiple collapsible elements inside some parent container element and we want on click of one the collapsible element to be shown(expanded) , then  all other the expanded content elements in that parent container becomes hidden.


Nav Menus  - Used for create a simple horizontal menu

.nav

Add this class to <ul> element which is to be created as a navigation menu.

Classes like .justify-content-center and justify-content-end to set the alignement of whole navigation menu.

.nav-item

Add this class to each <li> element inside the <ul> element.

.nav-link

Add this class to <a> element inside each <li> element

To display the navigation link item as active add the class .active along with this.

.flex-column

This class can be used with class .nav to create a vertical navigation menu.

.nav-tabs

To convert the  navigation menu into the navigation tabs, this class can be added along with .nav class.

.nav-pills

To display the navigation menu items as  pills, this class can be added along with .nav class.


*NOTE : "This study material is collected from multiple sources to make a quick refresh course available to students." 

This website uses cookies to improve user experience. By using our website you consent to all cookies in accordance with our Cookie Policy. More info. I Agree