CodesJava

Easy learning with example program codes

Bootstrap Grid System


Grid:

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 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 Grid Classes:

Bootstrap Grid System have following four classes which can be combined to create more dynamic and flexible layouts.

  • xs (for phones): screens less than 768px wide.
  • sm (for tablets): screens equal to or greater than 768px wide.
  • md (for small laptops): screens equal to or greater than 992px wide.
  • lg (for larger desktops and laptops): screens equal to or greater than 1200px wide.

Basic Structure of a Bootstrap Grid:

<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>
<div class="row">
 ...
</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: The numbers in .col-*-* should not be greater than 12 for each row. Grids should be placed within a container either .container or the .container-fluid class.

Bootstrap grid examples:

Bootstrap grid equal columns example.
Bootstrap grid unequal columns example.

Bootstrap 3 Tutorial

Bootstrap package tutorial.
Bootstrap CDN link tutorial.
Create First Web Page With Bootstrap.
Bootstrap Grid System tutorial.
Bootstrap grid equal columns example.
Bootstrap grid unequal columns example.
Bootstrap Jumbotron tutorial.
Bootstrap Page Header Tutorial.
Bootstrap Well tutorial.
Bootstrap Alert Tutorial.
Bootstrap Alert Link Tutorial.
Bootstrap Closing Alerts tutorial.
Bootstrap Animated Alerts Tutorial.
Bootstrap Buttons Style Tutorial.
Bootstrap Buttons Size Tutorial.
Bootstrap Block Level Buttons tutorial.
Bootstrap Buttons States Tutorial.
Bootstrap Button Groups Tutorial.
Bootstrap Vertical Button Groups tutorial.
Bootstrap Justified Button Groups Tutorial.
Bootstrap Nesting Button Groups Tutorial.
Bootstrap Split Button Dropdowns tutorial.
Bootstrap Badges Tutorial.
Bootstrap Contextual Badges Tutorial.
Bootstrap Pill Badges tutorial.
Bootstrap Labels Tutorial.
Bootstrap Contextual Labels Tutorial.
Bootstrap Basic Progress Bar tutorial.
Bootstrap Progress Bar With Label Tutorial.
Bootstrap Colored Progress Bars Tutorial.
Bootstrap Striped Progress Bars Tutorial.
Bootstrap Animated Progress Bars tutorial.
Bootstrap Stacked Progress Bars Tutorial.
Bootstrap Pagination Tutorial.
Bootstrap Pagination – Active State.
Bootstrap Pagination – Disabled State.
Bootstrap Pagination – Sizing Tutorial.
Bootstrap Pagination Breadcrumbs Tutorial.
Bootstrap Pager Tutorial.
Bootstrap Align Buttons tutorial.
Bootstrap Basic List Group Tutorial.
Bootstrap List Group With Badges Tutorial.
Bootstrap List Group With Linked Items.
Bootstrap Active Item in a List Group.
Bootstrap Disabled Item in a List Group.
Bootstrap Group Contextual Classes.
Bootstrap Basic Panel Tutorial.
Bootstrap Panel Heading tutorial.
Bootstrap Panel Footer Tutorial.
Bootstrap Panel Group Tutorial.
Bootstrap Panels with Contextual Classes.
Bootstrap Glyphicon Tutorial.
Bootstrap Dropdowns Tutorial.
Bootstrap Dropdowns Divider tutorial.
Bootstrap Dropdowns Header Tutorial.
Bootstrap Dropdowns Active items.
Bootstrap Dropdowns Disable items.
Bootstrap Dropdowns Position Tutorial.
Bootstrap Dropup Tutorial.
Bootstrap Simple Collapsible items.
Bootstrap Collapsible Panel Tutorial.
Bootstrap Collapsible List Group.
Bootstrap Vertical Form items.
Bootstrap Inline Form.
Bootstrap Horizontal Form.
Sign Up/ Sign In
Ask a Question


Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at hr@codesjava.com.

Development

We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on hr@codesjava.com.

Copyright © 2018 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki