Bootstrap’s grid system is built with flexbox and allows up to 12 columns across the page.
If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:
The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns).
Grid Classes
The Bootstrap 4 grid system has five classes:
.col- (extra small devices – screen width less than 576px)
.col-sm- (small devices – screen width equal to or greater than 576px)
.col-md- (medium devices – screen width equal to or greater than 768px)
.col-lg- (large devices – screen width equal to or greater than 992px)
.col-xl- (xlarge devices – screen width equal to or greater than 1200px)
The classes above can be combined to create more dynamic and flexible layouts.
Tip: Each class scales up, so if you wish to set the same widths for sm and md, you only need to specify sm.
Basic Structure of a Bootstrap 4 Grid
The following is a basic structure of a Bootstrap 4 grid:
<!– Control the column width, and how they should appear on different devices –> <div class=”row”> <div class=”col-*-*”></div> <div class=”col-*-*”></div> </div> <div class=”row”> <div class=”col-*-*”></div> <div class=”col-*-*”></div> <div class=”col-*-*”></div> </div>
<!– Or let Bootstrap automatically handle the layout –> <div class=”row”> <div class=”col”></div> <div class=”col”></div> <div class=”col”></div> </div>
First example: create a row (<div class="row">). Then, add the desired number of columns (tags with appropriate .col-*-* classes). The first star (*) represents the responsiveness: sm, md, lg or xl, while the second star represents a number, which should add up to 12 for each row.
Second example: instead of adding a number to each col, let bootstrap handle the layout, to create equal width columns: two "col" elements = 50% width to each col. three cols = 33.33% width to each col. four cols = 25% width, etc. You can also use .col-sm|md|lg|xl to make the columns responsive.
Below we have collected some examples of basic Bootstrap 4 grid layouts.
Three Equal Columns
.col
.col
.col
The following example shows how to create three equal-width columns, on all devices and screen widths:
The following example shows how to create four equal-width columns starting at tablets and scaling to extra large desktops. On mobile phones or screens that are less than 576px wide, the columns will automatically stack on top of each other:
Bootstrap 4 uses a default font-size of 16px, and its line-height is 1.5.
The default font-family is “Helvetica Neue”, Helvetica, Arial, sans-serif.
In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by default).
Class
Description
Example
.font-weight-bold
Bold text
.font-weight-bolder
Bolder text
.font-italic
Italic text
.font-weight-light
Light weight text
.font-weight-lighter
Lighter weight text
.font-weight-normal
Normal text
.lead
Makes a paragraph stand out
.small
Indicates smaller text (set to 80% of the size of the parent)
.text-left
Indicates left-aligned text
.text-*-left
Indicates left-aligned text on small, medium, large or xlarge screens
.text-break
Prevents long text from breaking layout
.text-center
Indicates center-aligned text
.text-*-center
Indicates center-aligned text on small, medium, large or xlarge screens
.text-decoration-none
Removes the underline from a link
.text-right
Indicates right-aligned text
.text-*-right
Indicates right-aligned text on small, medium, large or xlarge screens
.text-justify
Indicates justified text
.text-monospace
Monospaced text
.text-nowrap
Indicates no wrap text
.text-lowercase
Indicates lowercased text
.text-reset
Resets the color of a text or a link (inherits the color from its parent)
.text-uppercase
Indicates uppercased text
.text-capitalize
Indicates capitalized text
.initialism
Displays the text inside an <abbr> element in a slightly smaller font size
.list-unstyled
Removes the default list-style and left margin on list items (works on both <ul> and <ol>). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well)
.list-inline
Places all list items on a single line (used together with .list-inline-item on each <li> elements)
.pre-scrollable
Makes a <pre> element scrollable
Bootstrap 4 Colors
Text Colors
Bootstrap 4 has some contextual classes that can be used to provide “meaning through colors”.
The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:
Background Colors
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
Note that background colors do not set the text color, so in some cases you’ll want to use them together with a .text-* class.
Bootstrap 4 Basic Table
A basic Bootstrap 4 table has a light padding and horizontal dividers.
The .table class adds basic styling to a table:
Bordered Table
The .table-bordered class adds borders on all sides of the table and cells
Hover Rows
The .table-hover class adds a hover effect (grey background color) on table rows
Black/Dark Table
The .table-dark class adds a black background to the table
Dark Striped Table
Combine .table-dark and .table-striped to create a dark, striped table
Hoverable Dark Table
The .table-hover class adds a hover effect (grey background color) on table rows
Borderless Table
The .table-borderless class removes borders from the table
The contextual classes that can be used are:
Class
Description
.table-primary
Blue: Indicates an important action
.table-success
Green: Indicates a successful or positive action
.table-danger
Red: Indicates a dangerous or potentially negative action
.table-info
Light blue: Indicates a neutral informative change or action
.table-warning
Orange: Indicates a warning that might need attention
.table-active
Grey: Applies the hover color to the table row or table cell
.table-secondary
Grey: Indicates a slightly less important action
.table-light
Light grey table or table row background
.table-dark
Dark grey table or table row background
Responsive Tables
The .table-responsive class creates a responsive table: an horizontal scrollbar is added to the table on screens that are less than 992px wide (if needed). When viewing on anything larger than 992px wide, there is no difference
You can also decide when the table should get a scrollbar, depending on screen width:
A jumbotron indicates a big grey box for calling extra attention to some special content or information.
Bootstrap 4 Alerts
Alerts are created with the .alert class, followed by one of the contextual classes .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark:
Example
<div class=”alert alert-success”> <strong>Success!</strong> Indicates a successful or positive action. </div>
Alert Links
Add the alert-link class to any links inside the alert box to create “matching colored links”:
<div class=”alert alert-success”> <strong>Success!</strong> You should <a href=”#” class=”alert-link”>read this message</a>. </div>
Closing Alerts
To close the alert message, add a .alert-dismissible class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).
<div class=”alert alert-success alert-dismissible”> <button type=”button” class=”close” data-dismiss=”alert”>×</button> <strong>Success!</strong> Indicates a successful or positive action. </div>
Badges are used to add additional information to any content. Use the .badge class together with a contextual class (like .badge-secondary) within <span> elements to create rectangular badges. Note that badges scale to match the size of the parent element (if any):
A progress bar can be used to show a user how far along he/she is in a process.
To create a default progress bar, add a .progress class to a container element and add the .progress-bar class to its child element. Use the CSS width property to set the width of the progress bar:
If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.
To create a basic pagination, add the .pagination class to an <ul> element. Then add the .page-item to each <li> element and a .page-link class to each link inside <li>:
To add a background color the card, use contextual classes (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
Use .card-title to add card titles to any heading element. The .card-text class is used to remove bottom margins for a <p> element if it is the last child (or the only one) inside .card-body. The .card-link class adds a blue color to any link, and a hover effect.
Example
<div class=”card”> <div class=”card-body”> <h4 class=”card-title”>Card title</h4> <p class=”card-text”>Some example text. Some example text.</p> <a href=”#” class=”card-link”>Card link</a> <a href=”#” class=”card-link”>Another link</a> </div> </div>
Add .card-img-top or .card-img-bottom to an <img> to place the image at the top or at the bottom inside the card. Note that we have added the image outside of the .card-body to span the entire width:
<div id=”demo” class=”collapse”> Lorem ipsum dolor text…. </div>
Example Explained
The .collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button.
To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Then add the data-target="#id" attribute to connect the button with the collapsible content (<div id=”demo”>).
Note: For <a> elements, you can use the href attribute instead of the data-target attribute:
Very often, especially on small screens, you want to hide the navigation links and replace them with a button that should reveal them when clicked on.
To create a collapsible navigation bar, use a button with class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget". Then wrap the navbar content (links, etc) inside a div element with class="collapse navbar-collapse", followed by an id that matches the data-target of the button: “thetarget“.
You can use different validation classes to provide valuable feedback to users. Add either .was-validated or .needs-validation to the <form> element, depending on whether you want to provide validation feedback before or after submitting the form. The input fields will have a green (valid) or red (invalid) border to indicate what’s missing in the form. You can also add a .valid-feedback or .invalid-feedback message to tell the user explicitly what’s missing, or needs to be done before submitting the form.
Example
In this example, we use .was-validated to indicate what’s missing before submitting the form:
<form action=”/action_page.php” class=”was-validated”> <div class=”form-group”> <label for=”uname”>Username:</label> <input type=”text” class=”form-control” id=”uname” placeholder=”Enter username” name=”uname” required> <div class=”valid-feedback”>Valid.</div> <div class=”invalid-feedback”>Please fill out this field.</div> </div> <div class=”form-group”> <label for=”pwd”>Password:</label> <input type=”password” class=”form-control” id=”pwd” placeholder=”Enter password” name=”pswd” required> <div class=”valid-feedback”>Valid.</div> <div class=”invalid-feedback”>Please fill out this field.</div> </div> <div class=”form-group form-check”> <label class=”form-check-label”> <input class=”form-check-input” type=”checkbox” name=”remember” required> I agree on blabla. <div class=”valid-feedback”>Valid.</div> <div class=”invalid-feedback”>Check this checkbox to continue.</div> </label> </div> <button type=”submit” class=”btn btn-primary”>Submit</button> </form>
Bootstrap supports the following form controls:
input
textarea
checkbox
radio
select
Bootstrap 4 Input Groups
The .input-group class is 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”.
Use .input-group-prepend to add the help text in front of the input, and .input-group-append to add it behind the input.
At last, add the .input-group-text class to style the specified help text.
<!– Left and right controls –> <a class=”carousel-control-prev” href=”#demo” data-slide=”prev”> <span class=”carousel-control-prev-icon”></span> </a> <a class=”carousel-control-next” href=”#demo” data-slide=”next”> <span class=”carousel-control-next-icon”></span> </a>
</div>
Example explained
A description of what each class from the example above do:
Class
Description
.carousel
Creates a carousel
.carousel-indicators
Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing)
.carousel-inner
Adds slides to the carousel
.carousel-item
Specifies the content of each slide
.carousel-control-prev
Adds a left (previous) button to the carousel, which allows the user to go back between the slides
.carousel-control-next
Adds a right (next) button to the carousel, which allows the user to go forward between the slides
.carousel-control-prev-icon
Used together with .carousel-control-prev to create a “previous” button
.carousel-control-next-icon
Used together with .carousel-control-next to create a “next” button
.slide
Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect
How To Create a Modal
The following example shows how to create a basic modal:
Example
<!– Button to Open the Modal –> <button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#myModal”> Open modal </button>
To create a popover, add the data-toggle="popover" attribute to an element.
Use the title attribute to specify the header text of the popover, and use the data-content attribute to specify the text that should be displayed inside the popover’s body:
The following example shows how to create a scrollspy:
Example
<!– The scrollable area –> <body data-spy=”scroll” data-target=”.navbar” data-offset=”50″>
<!– The navbar – The <a> elements are used to jump to a section in the scrollable area –> <nav class=”navbar navbar-expand-sm bg-dark navbar-dark fixed-top”> … <ul class=”navbar-nav”> <li><a href=”#section1″>Section 1</a></li> … </nav>
<!– Section 1 –> <div id=”section1″> <h1>Section 1</h1> <p>Try to scroll this page and look at the navigation bar while scrolling!</p> </div> …
</body>
Example Explained
Add data-spy="scroll" to the element that should be used as the scrollable area (often this is the <body> element).
Then add the data-target attribute with a value of the id or the class name of the navigation bar (.navbar). This is to make sure that the navbar is connected with the scrollable area.
Note that scrollable elements must match the ID of the links inside the navbar’s list items (<div id="section1"> matches <a href="#section1">).
The optional data-offset attribute specifies the number of pixels to offset from top when calculating the position of scroll. This is useful when you feel that the links inside the navbar changes the active state too soon or too early when jumping to the scrollable elements. Default is 10 pixels.
Requires relative positioning: The element with data-spy=”scroll” requires the CSS position property, with a value of “relative” to work properly.
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
.d-*-inline-flex
Creates an inline flexbox container for different screens
Direction
.flex-*-row
Display flex items horizontally on different screens
.flex-*-row-reverse
Display flex items horizontally, and right-aligned, on different screens
.flex-*-column
Display flex items vertically on different screens
.flex-*-column-reverse
Display flex items vertically, with reversed order, on different screens screens
Justified Content
.justify-content-*-start
Display flex items from the start (left-aligned) on different screens
.justify-content-*-end
Display flex items at the end (right-aligned) on different screens
.justify-content-*-center
Display flex items in the center of a flex container on different screens
.justify-content-*-between
Display flex items in “between” on different screens
.justify-content-*-around
Display flex items “around” on different screens
Fill / Equal Width
.flex-*-fill
Force flex items into equal widths on different screens
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
Wrap
.flex-*-nowrap
Don’t wrap items on different screens
.flex-*-wrap
Wrap items on different screens
.flex-*-wrap-reverse
Reverse the wrapping of items on different screens
Align Content
.align-content-*-start
Align gathered items from the start on different screens
.align-content-*-end
Align gathered items at the end on different screens
.align-content-*-center
Align gathered items in the center on different screens
.align-content-*-around
Align gathered items “around” on different screens
.align-content-*-stretch
Stretch gathered items on different screens
Align Items
.align-items-*-start
Align single rows of items from the start on different screens
.align-items-*-end
Align single rows of items at the end on different screens
.align-items-*-center
Align single rows of items in the center on different screens
.align-items-*-baseline
Align single rows of items on the baseline on different screens
.align-items-*-stretch
Stretch single rows of items on different screens
Align Self
.align-self-*-start
Align a flex item from the start on different screens
.align-self-*-end
Align a flex item at the end on different screens
.align-self-*-center
Align a flex item in the center on different screens
.align-self-*-baseline
Align a flex item on the baseline on different screens
.align-self-*-stretch
Stretch a flex item on different screens
Filter Tables
Perform a case-insensitive search for items in a table:
jQuery
<script> $(document).ready(function(){ $(“#myInput”).on(“keyup”, function() { var value = $(this).val().toLowerCase(); $(“#myTable tr”).filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script>
Example explained: We use jQuery to loop through each table rows to check if there are any text values that matches the value of the input field. The toggle method hides the row (display:none) that does not match the search. We use the toLowerCase() method to convert the text to lower case, which makes the search case insensitive (allows “john”, “John”, and even “JOHN” on search).
Bootstrap 4 Grid System
Bootstrap’s grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.
Grid Classes
The Bootstrap 4 grid system has five classes:
.col- (extra small devices – screen width less than 576px)
.col-sm- (small devices – screen width equal to or greater than 576px)
.col-md- (medium devices – screen width equal to or greater than 768px)
.col-lg- (large devices – screen width equal to or greater than 992px)
.col-xl- (xlarge devices – screen width equal to or greater than 1200px)
The classes above can be combined to create more dynamic and flexible layouts.
Tip: Each class scales up, so if you wish to set the same widths for sm and md, you only need to specify sm.
Grid System Rules
Some Bootstrap 4 grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
Column widths are in percentage, so they are always fluid and sized relative to their parent element
The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats. One big advantage with flexbox is that grid columns without a specified width will automatically layout as “equal width columns” (and equal height). Example: Three elements with .col-sm will each automatically be 33.33% wide from the small breakpoint and up. Tip: If you want to learn more about Flexbox, you can read our CSS Flexbox Tutorial.
Note that Flexbox is not supported in IE9 and earlier versions.
Basic Structure of a Bootstrap 4 Grid
The following is a basic structure of a Bootstrap 4 grid:
<!– Control the column width, and how they should appear on different devices –> <div class=”row”> <div class=”col-*-*”></div> <div class=”col-*-*”></div> <div class=”col-*-*”></div> </div>
<!– Or let Bootstrap automatically handle the layout –> <div class=”row”> <div class=”col”></div> <div class=”col”></div> <div class=”col”></div> <div class=”col”></div> </div>
First example: create a row (<div class="row">). Then, add the desired number of columns (tags with appropriate .col-*-* classes). The first star (*) represents the responsiveness: sm, md, lg or xl, while the second star represents a number, which should always add up to 12 for each row.
Second example: instead of adding a number to each col, let bootstrap handle the layout, to create equal width columns: two "col" elements = 50% width to each col. three cols = 33.33% width to each col. four cols = 25% width, etc. You can also use .col-sm|md|lg|xl to make the columns responsive.
Grid Options
The following table summarizes how the Bootstrap 4 grid system works across different screen sizes:
Extra small (<576px)
Small (>=576px)
Medium (>=768px)
Large (>=992px)
Extra Large (>=1200px)
Class prefix
.col-
.col-sm-
.col-md-
.col-lg-
.col-xl-
Grid behaviour
Horizontal at all times
Collapsed to start, horizontal above breakpoints
Collapsed to start, horizontal above breakpoints
Collapsed to start, horizontal above breakpoints
Collapsed to start, horizontal above breakpoints
Container width
None (auto)
540px
720px
960px
1140px
Suitable for
Portrait phones
Landscape phones
Tablets
Laptops
Laptops and Desktops
# of columns
12
12
12
12
12
Gutter width
30px (15px on each side of a column)
30px (15px on each side of a column)
30px (15px on each side of a column)
30px (15px on each side of a column)
30px (15px on each side of a column)
Nestable
Yes
Yes
Yes
Yes
Yes
Offsets
Yes
Yes
Yes
Yes
Yes
Column ordering
Yes
Yes
Yes
Yes
Yes
Complete List of All Bootstrap 4 Classes
.active
Adds a white text color to the active link in a navbar.
Adds little dots/indicators at the bottom of each slide (which indicates how many slides there is in the carousel, and which slide the user are currently viewing)
Styles a close icon. This is often used for alerts and modals. Often used together with the × symbol to create the actual icon (a better looking “x”). It floats right by default
Creates a column layout for extra small devices (and up/all devices, if not combined with other column classes). The * can be a number between 1 and 12
Creates a padded grey heading/box with rounded corners that enlarges the font sizes of the text inside it. Used for calling extra attention to some special content or information
Makes a table responsive (adds a horizontal scrollbar when needed). By default, the scrollbar is added to the table on screens that are less than 992px wide (if needed). There’s no difference when viewing anything lager than 992px wide. However, you can use sm|md|lg|xl to decide WHEN the table should get a scrollbar, depending on the screen width
Web...Develeopment...Ideas 