Siksha Sarovar

Siksha Sarovar (sikshasarovar.com) is a free educational web application that helps students in India learn programming and prepare for academic and competitive exams. The platform offers structured coding courses (C, C++, Python, Java, HTML, CSS, PHP, Power BI, AI, Machine Learning, Data Science), complete university curriculum notes for BCA/MCA students with previous year question papers, Class 10 and Class 12 CBSE/HBSE school notes, and dedicated preparation material for SSC, UPSC, Banking, Railway and other government exams. Browsing the site is completely free and requires no account. Users may optionally sign in with Google solely to save their learning progress, quiz scores and personal preferences across devices.

Privacy Policy | Terms of Service | Contact Siksha Sarovar | About Siksha Sarovar

v4.0.9 · PWA
Siksha Sarovar logo
Siksha Sarovar
Your Learning Universe

Siksha Sarovar is a free e-learning platform for coding courses, BCA university notes and competitive exam preparation. Optional Google sign-in saves your learning progress across devices.

Initializing knowledge base…
Compiling modules 0%

Bootstrap Grid System

Lesson 15 of 34 in the free Web Technologies notes on Siksha Sarovar, written by Rohit Jangra.

Bootstrap Grid System

How the Bootstrap Grid Works

Bootstrap uses a 12-column grid system built on CSS Flexbox. Columns are placed inside rows, and rows inside containers.

<div class="container">
  <div class="row">
    <div class="col-md-8">Main content (8/12)</div>
    <div class="col-md-4">Sidebar (4/12)</div>
  </div>
</div>

Container Types

ClassWidth
.containerResponsive fixed-width
.container-fluidFull width (100%)
.container-{breakpoint}Full until breakpoint

Breakpoints

BreakpointClass PrefixScreen Width
Extra small(none)< 576px
Smallsm≥ 576px
Mediummd≥ 768px
Largelg≥ 992px
Extra largexl≥ 1200px
XXLxxl≥ 1400px

Grid Examples

<!-- Equal columns -->
<div class="row">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
</div>

<!-- Responsive columns: full width on mobile, half on tablet, third on desktop -->
<div class="row">
  <div class="col-12 col-md-6 col-lg-4">Card 1</div>
  <div class="col-12 col-md-6 col-lg-4">Card 2</div>
  <div class="col-12 col-md-6 col-lg-4">Card 3</div>
</div>

<!-- Offset columns -->
<div class="row">
  <div class="col-md-4 offset-md-4">Centered column</div>
</div>

<!-- Nested rows -->
<div class="row">
  <div class="col-8">
    <div class="row">
      <div class="col-6">Nested 1</div>
      <div class="col-6">Nested 2</div>
    </div>
  </div>
  <div class="col-4">Sidebar</div>
</div>

Row Alignment

<!-- Horizontal alignment -->
<div class="row justify-content-center">...</div>
<div class="row justify-content-between">...</div>

<!-- Vertical alignment -->
<div class="row align-items-center" style="height: 200px;">...</div>

<!-- Per-column alignment -->
<div class="row">
  <div class="col align-self-start">Top</div>
  <div class="col align-self-end">Bottom</div>
</div>

Column Auto-sizing

<div class="row">
  <div class="col-auto">Fits content</div>
  <div class="col">Fills remaining space</div>
</div>

Reordering Columns

<div class="row">
  <div class="col order-2">Displayed second</div>
  <div class="col order-1">Displayed first</div>
</div>
Key Takeaway: Bootstrap's 12-column grid with responsive breakpoints (sm, md, lg, xl) allows building layouts that adapt beautifully from mobile to desktop with minimal CSS.