Skip to content

Latest commit

 

History

History
101 lines (68 loc) · 2.27 KB

Bootstrap-part-1.md

File metadata and controls

101 lines (68 loc) · 2.27 KB
Raw

Bootstrap CSS for Beginners - Part 1

Table of Contents

  1. What is Bootstrap?
  2. Getting Started
  3. Containers
  4. Typography
  5. Buttons
  6. Further Reading

What is Bootstrap?

Bootstrap is a free and open-source CSS framework that helps you design websites quickly and easily. It comes with a bunch of pre-made components that you can use right away! 🌟

Getting Started

To start using Bootstrap, you need to include its CSS and JavaScript files in your HTML. You can either download them or link to them directly from a CDN (Content Delivery Network).

Using CDN

Add these lines in the <head> section of your HTML file:

<!-- Bootstrap CSS -->
<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>

Containers

In Bootstrap, a container is used to wrap site contents. There are two types of containers:

  • .container: Fixed-width container
  • .container-fluid: Full-width container
<!-- Fixed-width container -->
<div class="container">
  <!-- Your content here -->
</div>

<!-- Full-width container -->
<div class="container-fluid">
  <!-- Your content here -->
</div>

Typography

Bootstrap provides classes for styling text.

  • .h1 to .h6: Classes for headings
  • .lead: Makes a paragraph stand out
  • .text-muted: Mutes the text color
<h1 class="h1">This is a large heading</h1>
<p class="lead">This paragraph will stand out.</p>
<p class="text-muted">This text is muted.</p>

Buttons

Bootstrap comes with pre-styled button classes.

  • .btn: Basic button class
  • .btn-primary, .btn-secondary: Button themes
<!-- Basic button -->
<button class="btn">Click Me!</button>

<!-- Themed buttons -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>

Further Reading

Ready to learn more? Check out these free resources: