DEV Community

Parthipan M
Parthipan M

Posted on

Bootstrap

#html #bootstrap #developer #payilagam

Get started with Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

  • To include Bootstrap in an HTML file, you typically use a Content Delivery Network (CDN) link in the <head> for CSS and a <script> tag before the closing </body> for JavaScript.

  • For Bootstrap 5 (the current standard), the framework uses vanilla JavaScript and no longer requires jQuery. Include the following in your index.html:

CDN links

As reference, here are our primary CDN links.

CSS

https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css
Enter fullscreen mode Exit fullscreen mode

JS

https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js
Enter fullscreen mode Exit fullscreen mode

How to use bootstrap grid system ?

The Bootstrap grid system is a mobile-first, flexbox-based layout structure that divides the page width into 12 columns. To use it effectively, you must follow a specific hierarchy: Containers → Rows → Columns.

Example:

<div class="container">
  <div class="row">
    <div class="col-8">Wide Column (8/12)</div>
    <div class="col-4">Narrow Column (4/12)</div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Responsive Breakpoints:

  • Bootstrap uses six responsive breakpoints to adapt layouts to different screen sizes. Column classes follow the format .col-{breakpoint}-{number}. Because Bootstrap is mobile-first, a class like .col-md-6 applies to medium screens and all larger screens (lg, xl, xxl), while the element remains full-width on smaller screens unless specified otherwise.

Key Features:

  • Auto-layout: Using just .col without a number allows columns to automatically divide the available space equally.

  • Gutters: Space between columns is handled by gutters (padding on columns and negative margins on rows). You can customize these using classes like .g-3 (standard gap), .gx-4
    (horizontal only), or .g-0 (no gap).

  • Row Columns: Instead of defining width on every column, you can set the number of columns on the parent row using .row-cols-1, .row-cols-md-3, etc., to automatically force child columns into that layout.

Top comments (0)