A Warm Welcome!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ipsam, eligendi, in quo sunt possimus non incidunt odit vero aliquid similique quaerat nam nobis illo aspernatur vitae fugiat numquam repellat.

Call to action!

A Warm Welcome!

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magni sapiente, tempore debitis beatae culpa natus architecto.




Page Heading Secondary Text

Project One

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!

Project Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Three

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!

Project Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Five

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Six

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.




Page Heading Secondary Text

Project One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Two

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aliquam aperiam nulla perferendis dolor nobis numquam, rem expedita, aliquid optio, alias illum eaque. Non magni, voluptates quae, necessitatibus unde temporibus.

Project Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Four

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aliquam aperiam nulla perferendis dolor nobis numquam, rem expedita, aliquid optio, alias illum eaque. Non magni, voluptates quae, necessitatibus unde temporibus.

Project Five

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

Project Six

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit aliquam aperiam nulla perferendis dolor nobis numquam, rem expedita, aliquid optio, alias illum eaque. Non magni, voluptates quae, necessitatibus unde temporibus.




Section Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.




Section Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.




Button Group

The .btn-group class creates a button group:




Button Groups Sizes

Add class .btn-group-* to size all buttons in a button group.

Large Buttons:

Default Buttons:

Small Buttons:




Vertical Buttons:




Nesting Button Groups

Nest button groups to create dropdown menus:




Split Buttons




Vertical Button Group with Dropdown




Button Group

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




Button Styles




Button Elements

Link Button



Button Outline




Button Sizes




Block Level Buttons


Large Block Level Buttons


Small Block Level Buttons




Button States

Disabled Link



Alerts

Alerts are created with the .alert class, followed by a contextual color classes:

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
  Primary! Indicates an important action.
  Secondary! Indicates a slightly less important action.
  Dark! Dark grey alert.
  Light! Light grey alert.



Alert Links

Add the alert-link class to any links inside the alert box to create "matching colored links".

Success! You should read this message.
Info! You should read this message.
Warning! You should read this message.
Danger! You should read this message.
Primary! You should read this message.
Secondary! You should read this message.
Dark! You should read this message.
Light! You should read this message.



Alerts

The button with class="close" and data-dismiss="alert" is used to close the alert box.

The alert-dismissible class adds some extra padding to the close button.

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Primary! Indicates an important action.
Secondary! Indicates a slightly less important action.
Dark! Dark grey alert.
Light! Light grey alert.



Animated Alerts

The .fade and .show classes adds a fading effect when closing the alert message.

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Primary! Indicates an important action.
Secondary! Indicates a slightly less important action.
Dark! Dark grey alert.
Light! Light grey alert.



Close Alerts Via JavaScript

Success! This alert box could indicate a successful or positive action.



Striped Rows

The .table-striped class adds zebra-stripes to a table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com



Hover Rows

The .table-hover class enables a hover state (grey background on mouse over) on table rows:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com



Black/Dark Table

The .table-dark class adds a black background to the table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com



Dark Striped Table

Combine .table-dark and .table-striped to create a dark, striped table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com



Hoverable Dark Table

The .table-hover class adds a hover effect (grey background color) on table rows:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com



Borderless Table

The .table-borderless class removes borders from the table:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com



Contextual Classes

Contextual classes can be used to color the table, table rows or table cells. The classes that can be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:

Firstname Lastname Email
Default Defaultson def@somemail.com
Primary Joe joe@example.com
Success Doe john@example.com
Danger Moe mary@example.com
Info Dooley july@example.com
Warning Refs bo@example.com
Active Activeson act@example.com
Secondary Secondson sec@example.com
Light Angie angie@example.com
Dark Bo bo@example.com



Table Head Colors

The .thead-dark class adds a black background to table headers, and the .thead-light class adds a grey background to table headers:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com
Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com



Small Table

The .table-sm class makes the table smaller by cutting cell padding in half:

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com



Responsive Table

The .table-responsive class creates a responsive table which will scroll horizontally on screens that are less than 992px wide (if needed). When viewing on anything larger than 992px, there is no difference:

# Firstname Lastname Age City Country Sex Example Example Example Example
1 Anna Pitt 35 New York USA Female Yes Yes Yes Yes



Responsive Table

The .table-responsive-sm class creates a responsive table which will scroll horizontally on screens that are less than 576px wide.

Resize the browser window to see the effect.

# Firstname Lastname Age City Country Sex Example Example Example Example
1 Anna Pitt 35 New York USA Female Yes Yes Yes Yes



Contextual Colors

Use the contextual classes to provide "meaning through colors":

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

This text is dark grey.

Default body color (often black).

This text is light grey (on white background).

This text is white (on white background).




Contextual Link Colors

Hover over the links.

Muted link. Primary link. Success link. Info link. Warning link. Danger link. Secondary link. Dark grey link. Body/black link. Light grey link.



Opacity Text Colors

Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

Black text with 50% opacity on white background

White text with 50% opacity on black background




Contextual Backgrounds

Use the contextual background classes to provide "meaning through colors".

Note that you can also add a .text-* class if you want a different text color:

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.




h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)



Display Headings

Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):

Display 1

Display 2

Display 3

Display 4




Lighter, Secondary Text

The small element is used to create a lighter, secondary text in any heading:

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text



Highlight Text

Use the mark element to highlight text.




Abbreviations

The abbr element is used to mark up an abbreviation or acronym:

The WHO was founded in 1948.




Blockquotes

The blockquote element is used to present content from another source:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.




Description Lists

The dl element indicates a description list:

Coffee
- black hot drink
Milk
- white cold drink



Code Snippets

Inline snippets of code should be embedded in the code element:

The following HTML elements: span, section, and div defines a section in a document.




Keyboard Inputs

To indicate input that is typically entered via the keyboard, use the kbd element:

Use ctrl + p to open the Print dialog box.




Multiple Code Lines

For multiple lines of code, use the pre element:

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.



Font weight and italics

Bold text.

Normal weight text.

Light weight text.

Italic text.




Typography

Left-aligned text.

Right-aligned text.

Center-aligned text.

Justified text. Justified text. Justified text. Justified text. Justified text. Justified text.

No wrap text. No wrap text. No wrap text. No wrap text.

Tip: Try to resize the browser window to see the behaviour of justify and nowrap.




Responsive Centered Aligned Text

Resize the browser window to see the effect.

Center-aligned text on all screen sizes.

Center-aligned text on small or wider screens.

Center-aligned text on medium or wider screens.

Center-aligned text on large or wider screens.

Center-aligned text on xlarge or wider screens.




Typography

The class .list-inline places all list items on a single line, when used together with the .list-inline-item:




Typography

The class .list-unstyled removes the default list-style and left margin on list items (immediate children only):




Typography

Use the .lead class to make a paragraph "stand out":

This paragraph stands out.

This is a regular paragraph.




Hello World!

Three equal width columns! Try to add a new div with class="col" inside the row class - this will create four equal-width columns.

.col
.col
.col



Hello World!

Resize the browser window to see the effect.

The columns will automatically stack on top of each other when the screen is less than 576px wide.

.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3



Hello World!

Resize the browser window to see the effect.

The columns will automatically stack on top of each other when the screen is less than 576px wide.

.col-sm-4
.col-sm-8



Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New



Contextual Badges

Primary Secondary Success Danger Warning Info Light Dark



Pill Badges

Primary Secondary Success Danger Warning Info Light Dark



Badge inside a Button




Progress Bar With Label

70%



Pagination - Active State

Add class .active to let the user know which page he/she is on:




Basic List Group




Active Item in a List Group




List Group With Linked Items

First item Second item Third item



Flush / Remove Borders

Use the .list-group-flush class to remove some borders and rounded corners:




List Group With Contextual Classes




Linked Items With Contextual Classes

Move the mouse over the linked items to see the hover effect:

Action item Success item Secondary item Info item Warning item Danger item Primary item Dark item Light item



List Group With Badges

Combine .badge classes with utility/helper classes to add badges inside the list group:




Basic Card

Basic card



Card Header and Footer

Header
Content



Cards with Contextual Classes

Basic card

Primary card

Success card

Info card

Warning card

Danger card

Secondary card

Dark card

Light card



Dropdowns

The .dropdown class is used to indicate a dropdown menu.

Use the .dropdown-menu class to actually build the dropdown menu.

To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".




Dropdowns

The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal line:




Dropdowns

The .dropdown-header class is used to add headers inside the dropdown menu:




Dropdowns

Add the .dropright class next to the dropdown menu to right-align the dropdown. Note that the caret/arrows is added automatically:




Dropdowns

Add the .dropleft class next to the dropdown menu to left-align the dropdown. Note that the caret/arrow is added automatically. Also note that we float the dropdown to the right:






Dropdowns

Add the .dropdown-menu-right class to .dropdown-menu to right-align the dropdown menu.




Dropdowns

The .dropup class makes the dropdown menu expand upwards instead of downwards:




Dropdowns

The .dropdown-item-text class is used to add plain text to a dropdown, or used on links for default link styling.




Dropdown Split Buttons




Simple Collapsible

Click on the button to toggle between showing and hiding content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



Show Collapsible Content By Default

Add the show class next to the collapse class to show the content by default.

Click on the button to toggle between showing and hiding content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.



Modal Example

go to Modal page with bootstrap 3.



Fading Modal

Add the "fade" class to the modal container if you want the modal to fade in on open and fade out on close.




Small Modal




Large Modal




Centered Modal Example

Center the modal vertically and horizontally within the page, with the .modal-dialog-centered class.




Tooltip Example

Hover over me



Tooltip Example

The data-placement attribute specifies the tooltip position.

Top Bottom Left Right



Popover Example

Toggle popover



Responsive Floats

Float an element to the left or to the right depending on screen width, with the responsive float classes .float-*-left|right (where * is sm, md, lg or xl).

Resize the browser window to see the effect.

Float right on small screens or wider

Float right on medium screens or wider

Float right on large screens or wider

Float right on extra large screens or wider

Float none



Horizontal Centering

Center an element with the .mx-auto class:

Centered



Width Utilities

Set the width of an element with the w-* classes:

Width 25%
Width 50%
Width 75%
Width 100%
Max Width 100%



Height Utilities

Set the height of an element with the w-* classes:

Height 25%
Height 50%
Height 75%
Height 100%
Max Height 100%



NOTES

Spacing

Bootstrap 4 has a wide range of responsive margin and padding utility classes. They work for all breakpoints: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):

The classes are used in the format: {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

Where sides is one of:

Where size is one of:




Spacing Utilities

Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.

I only have a top padding (1.5rem = 24px)
I have a padding on all sides (3rem = 48px)
I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)



Shadows

Use the shadow- classes to to add shadows to an element:

No shadow
Small shadow
Default shadow
Large shadow



Vertical Align

Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):

baseline top middle bottom text-top text-bottom



Responsive Embed

Create a responsive video and scale it nicely to the parent element.

Aspect ratio 1:1


Aspect ratio 4:3


Aspect ratio 16:9


Aspect ratio 21:9




Visibility

Use the .visible or .invisible classes to control the visibility of elements. Note: These classes do not change the CSS display value. They only add visibility:visible or visibility:hidden to an element:

I am visible





Close Icon

Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the times; symbol to create the actual icon (a better looking "x"). Also note that it is right-aligned by default:






Display Headings

Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):

Display 1

Display 2

Display 3

Display 4




Flex

To create a flexbox container and transform direct children into flex items, use the d-flex class:

Flex item 1
Flex item 2
Flex item 3



Inline Flex

To create an inline flexbox container, use the d-inline-flex class:

Flex item 1
Flex item 2
Flex item 3



Horizontal Direction

Use .flex-row to make the flex items appear side by side (default):

Flex item 1
Flex item 2
Flex item 3

Use .flex-row-reverse to right-align the direction:

Flex item 1
Flex item 2
Flex item 3



Vertical Direction

Use .flex-column to display the flex items vertically (on top of each other):

Flex item 1
Flex item 2
Flex item 3

Use .flex-column-reverse to reverse the vertical direction:

Flex item 1
Flex item 2
Flex item 3



Justify content

Use the .justify-content-* classes to change the alignment of flex items. Choose from start (default), end, center, between or around:

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3



Fill / Equal Widths

Use .flex-fill on flex items to force them into equal widths:

Flex item 1
Flex item 2
Flex item 3

Example without .flex-fill:

Flex item 1
Flex item 2
Flex item 3



Grow

Use .flex-grow-1 on a flex item to take up the rest of the space:

Flex item 1
Flex item 2
Flex item 3

Example without .flex-grow-1:

Flex item 1
Flex item 2
Flex item 3



Order

Change the visual order of a specific flex item(s) with the .order classes. Valid classes are from 0 to 12:

Flex item 1
Flex item 2
Flex item 3



Auto Margins

Easily add auto margins to flex items with .mr-auto (push items to the right), or by using .ml-auto (push items to the left):

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3



Wrap

Control how flex items wrap in a flex container with .flex-nowrap (default), .flex-wrap or .flex-wrap-reverse.

.flex-wrap:

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25

.flex-wrap-reverse:

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25

.flex-nowrap:

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
sm media stop
it goes on...




Align Content

Control the vertical alignment of gathered flex items with the .align-content-* classes.

Note: This example does not look good on a small devices. Also note that these classes have no effect on single rows of flex items.

.align-content-start (default):

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25

.align-content-end:

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25

.align-content-center:

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25

.align-content-around:

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25

.align-content-stretch:

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25




Align Items

Control the vertical alignment of single rows of flex items with the .align-content-* classes.

.align-items-start:

Flex item 1
Flex item 2
Flex item 3

.align-items-end:

Flex item 1
Flex item 2
Flex item 3

.align-items-center:

Flex item 1
Flex item 2
Flex item 3

.align-items-baseline:

Flex item 1
Flex item 2
Flex item 3

.align-items-stretch (default):

Flex item 1
Flex item 2
Flex item 3




Align Self

Control the vertical alignment of a specific flex item with the .align-self-* classes.

.align-self-start:

Flex item 1
Flex item 2
Flex item 3

.align-self-end:

Flex item 1
Flex item 2
Flex item 3

.align-self-center:

Flex item 1
Flex item 2
Flex item 3

.align-self-baseline:

Flex item 1
Flex item 2
Flex item 3

.align-self-stretch (default):

Flex item 1
Flex item 2
Flex item 3




Responsive Flex Classes

All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size.

The * symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.

Class Description Example
Flex Container    
.d-*-flex Creates a flexbox container for different screens Try it
.d-*-inline-flex Creates an inline flexbox container for different screens Try it
Direction    
.flex-*-row Display flex items horizontally on different screens Try it
.flex-*-row-reverse Display flex items horizontally, and right-aligned, on different screens Try it
.flex-*-column Display flex items vertically on different screens Try it
.flex-*-column-reverse Display flex items vertically, with reversed order, on different screens screens Try it
Justified Content    
.justify-content-*-start Display flex items from the start (left-aligned) on different screens Try it
.justify-content-*-end Display flex items at the end (right-aligned) on different screens Try it
.justify-content-*-center Display flex items in the center of a flex container on different screens Try it
.justify-content-*-between Display flex items in "between" on different screens Try it
.justify-content-*-around Display flex items "around" on different screens Try it
Fill / Equal Width    
.flex-*-fill Force flex items into equal widths on different screens Try it
Grow    
.flex-*-grow-0 Don't make the items grow on different screens  
.flex-*-grow-1 Make items grow on different screens  
Shrink    
.flex-*-shrink-0 Don't make the items shrink on diferent screens  
.flex-*-shrink-1 Make items shrink on different screens  
Order    
.order-*-0-12 Change the order from 0 to 12 on small screens Try it
Wrap    
.flex-*-nowrap Don't wrap items on different screens Try it
.flex-*-wrap Wrap items on different screens Try it
.flex-*-wrap-reverse Reverse the wrapping of items on different screens Try it
Align Content    
.align-content-*-start Align gathered items from the start on different screens Try it
.align-content-*-end Align gathered items at the end on different screens Try it
.align-content-*-center Align gathered items in the center on different screens Try it
.align-content-*-around Align gathered items "around" on different screens Try it
.align-content-*-stretch Stretch gathered items on different screens Try it
Align Items    
.align-items-*-start Align single rows of items from the start on different screens Try it
.align-items-*-end Align single rows of items at the end on different screens Try it
.align-items-*-center Align single rows of items in the center on different screens Try it
.align-items-*-baseline Align single rows of items on the baseline on different screens Try it
.align-items-*-stretch Stretch single rows of items on different screens Try it
Align Self    
.align-self-*-start Align a flex item from the start on different screens Try it
.align-self-*-end Align a flex item at the end on different screens Try it
.align-self-*-center Align a flex item in the center on different screens Try it
.align-self-*-baseline Align a flex item on the baseline on different screens Try it
.align-self-*-stretch Stretch a flex item on different screens Try it



Media Object

Create a media object with the .media and .media-body classes:

John Doe

John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.




Nested Media Objects

Media objects can also be nested (a media object inside a media object):


John Doe

John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Jane Doe

Jane Doe Posted on February 20 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.




Right-Aligned Media Image

To right-align the media image, add the image after the .media-body container:

John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

John Doe



Media Object

Place the media object to the top, middle or at the bottom with the flex utilities, align-self-* classes:


Jim Doe

Media Top

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.




Jim Doe

Media Middle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.




Jim Doe

Media Bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.




Filterable Table

Type something in the input field to search the table for first names, last names or emails:


Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@mail.com
July Dooley july@greatstuff.com
Anja Ravendale a_r@test.com

Note that we start the search in tbody, to prevent filtering the table headers.




Pictures with a caption or figure.

Puglia's most famous sight is the unique conical houses (Trulli) found in the area around Alberobello, a declared UNESCO World Heritage Site.

Trulli
Fig.1 - Trulli, Puglia, Italy.



Dynamic Tabs



HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Menu 1

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Menu 2

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.




Dynamic Tabs with jQuery

Click on the Tabs to display the active and previous tab.


HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Active Tab:

Previous Tab:




Activate Carousel with JavaScript




Our bootstrap.bundle.js and bootstrap.bundle.min.js include Popper, but not jQuery. For more information about what�s included in Bootstrap, please see our contents section.

Show components requiring JavaScript

more migration specifics-bootstrap 3 to 4
bootstrap links for all versions