Bootstrap Get Started

Bootstrap 3 Tutorial

Here’s a clear, step-by-step Bootstrap “Get Started” guide to help you quickly set up and start using Bootstrap for web development. I’ll cover both the CDN method and local setup, plus basic usage.

1. What is Bootstrap?

Bootstrap is a popular HTML, CSS, and JS framework for building responsive and mobile-first websites quickly. It provides:

  • Pre-designed UI components (buttons, forms, navbars, etc.)

  • Responsive grid system

  • JavaScript plugins (modals, carousels, dropdowns)

  • Utility classes (spacing, typography, colors)

Current stable version: Bootstrap 5

2. Starting with Bootstrap

Option 1: Using Bootstrap CDN (Quick Setup)

  1. Create an HTML file, e.g., index.html.

  2. Add the following code inside the <head> and before </body>:


 

✅ Open the file in a browser. You should see a styled button and heading.

Option 2: Download Bootstrap Locally

  1. Go to https://getbootstrap.com/

  2. Click Download → choose Compiled CSS and JS.

  3. Extract the ZIP and place css/ and js/ folders in your project directory.

  4. Link them in your HTML:

3. Basic Bootstrap Structure

Bootstrap uses a container → row → column structure for responsive layouts.

  • col-md-6 → 50% width on medium screens and above

  • col-sm-12 → 100% width on small screens

4. Common Bootstrap Components

Buttons

Navbar

Cards

5. Responsive Utilities

Bootstrap provides classes for spacing, text, visibility, etc.

  • Margin: mt-3, mb-5 (margin-top, margin-bottom)

  • Padding: p-2, px-4 (padding all sides, padding left/right)

  • Text color: text-primary, text-success

  • Display: d-none, d-block, d-md-flex

6. Next Steps

  • Explore Bootstrap Components

  • Learn Grid System for layouts

  • Experiment with Forms, Modals, Carousel, and Utilities

  • Consider customizing Bootstrap using Sass if you want your own theme

You may also like...