Tutorialspoint examples

Learn java tutorial with examples for beginners online

Bootstrap 4 Grid System


Grid refers to an array of squares or rectangles.

According to Wikipedia:
“In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. It is widely used to design layout and content structure in print design. In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS.”

Bootstrap 4 Grid System:

Bootstrap Grid System provides the facility to create advanced layouts using rows and columns. It allows up to 12 columns across the page i.e. number of columns can be up to 12 or fewer. We can use all 12 columns individually or can groups the columns together to create wider columns. Bootstrap Grid System is responsive and the columns will re-arrange automatically depending on the size of screen.

Bootstrap 4 Grid Classes:

Bootstrap 4 Grid System have following five classes which can be combined to create more dynamic and flexible layouts.
• .col- (for extra small devices): screen width less than 576px.
• .col-sm- (for small devices): screen width equal to or greater than 576px.
• .col-md- (for medium devices): screen width equal to or greater than 768px.
• .col-lg- (for large devices): screen width equal to or greater than 992px
• .col-xl- (for xlarge devices): screen width equal to or greater than 1200px.

Note: Bootstrap 4 uses a 5 tier grid system while Bootstrap 3 uses a 4 tier grid system.

Basic Structure of a Bootstrap 4 Grid:

<!-- Control the column width manually and how they should appear on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>

Steps to create Bootstrap grid:

1. Create a row.

<div class="row">

2. Add the required number of columns (tags with appropriate .col-*-* classes).

Note: In .col-*-* , the first star (*) represents the responsiveness: sm, md, lg or xl while the second star represents a number (number of columns) which should not be greater than 12 for each row. Grids should be placed within a container either .container or the .container-fluid class.
In second example Bootstrap automatically handle the layout and will create equal width columns.

Bootstrap 4 grid examples:

Bootstrap 4 grid equal columns example.
Bootstrap 4 grid responsive equal columns example.
Bootstrap 4 grid responsive unequal columns example.

Bootstrap 4 Tutorial

Bootstrap 4 Overview.
Bootstrap 4 package tutorial.
Bootstrap 4 CDN link tutorial.
Create First Web Page With Bootstrap 4.
Bootstrap 4 Grid System.
Bootstrap 4 grid equal columns example.
Bootstrap 4 grid responsive equal columns.
Bootstrap 4 grid responsive unequal columns.
Bootstrap 4 Jumbotron tutorial.
Bootstrap 4 Full Width Tutorial.
Bootstrap 4 Page Header Tutorial.
Bootstrap 4 Well tutorial.
Bootstrap 4 Alert Tutorial.
Bootstrap 4 Alert Link Tutorial.
Bootstrap 4 Closing Alerts tutorial.
Bootstrap 4 Animated Alerts.
Bootstrap 4 Buttons Style.
Bootstrap 4 Buttons Outline Tutorial.
Bootstrap 4 Buttons Size Tutorial.
Bootstrap 4 Block Level Buttons tutorial.
Bootstrap 4 Buttons States Tutorial.
Bootstrap 4 Button Groups Tutorial.
Bootstrap 4 Vertical Button Groups.
Bootstrap 4 Justified Button Groups.
Bootstrap 4 Nesting Button Groups.
Bootstrap 4 Split Button Dropdowns.
Bootstrap 4 Badges Tutorial.
Bootstrap 4 Basic Progress Bar.
Bootstrap 4 Progress Bar Height.
Bootstrap 4 Progress Bar With Label.
Bootstrap 4 Colored Progress Bars.
Bootstrap 4 Striped Progress Bars.
Bootstrap 4 Animated Progress Bars.
Bootstrap 4 Stacked Progress Bars.
Bootstrap 4 Pagination Tutorial.
Bootstrap 4 Pagination – Active State.
Bootstrap 4 Pagination – Disabled State.
Bootstrap 4 Pagination – Sizing.
Bootstrap 4 Pagination Breadcrumbs.
Bootstrap 4 List Groups Tutorial.
Bootstrap 4 List Group With Linked Items.
Bootstrap 4 Active Item in a List Group.
Bootstrap 4 Disabled Item in a List Group.
Bootstrap 4 Group Contextual Classes.
Bootstrap 4 Basic Panel Tutorial.
Bootstrap 4 Panel Heading Tutorial.
Bootstrap 4 Panel Footer Tutorial.
Bootstrap 4 Cards Tutorial.
Bootstrap 4 Contextual Cards.
Bootstrap 4 Card Titles, Text and Links.
Bootstrap Card Image Tutorial.
Bootstrap Card Image Overlay.
Bootstrap 4 Dropdowns Tutorial.
Bootstrap 4 Dropdowns Divider tutorial.
Bootstrap 4 Dropdowns Header Tutorial.
Bootstrap 4 Dropdowns Active Items.
Bootstrap 4 Dropdowns Disabled Items.
Bootstrap 4 Dropdowns Position Tutorial.
Bootstrap 4 Dropup Tutorial.
Bootstrap 4 Simple Collapsible.
Bootstrap 4 Collapsible Panel Tutorial.
Bootstrap Collapsible List Tutorial.
Bootstrap 4 Stacked Form Tutorial.
Bootstrap 4 Inline Form Tutorial.
Download tutorialspointexamples Android App
Copyright © 2018 Tutorialspoint examples DMCA.com Protection Status