Sections

Post Details

Digimatx Logo

bootstrap basics

Share: Facebook Twitter LinkedIn Email
  1. Introduction to Bootstrap

Bootstrap is a free, free front-end framework used to design responsive and mobile-first websites quickly and easily.
Developed by

  • Twitter developers (Mark Otto & Jacob Thornton)

Technologies used

  • HTML
  • CSS
  • JavaScript

Why Bootstrap is used

  • Saves development time
  • Built-in responsive design
  • Consistent layout across browsers
  • Easy to learn and use

Key features

  • Mobile-first approach
  • Responsive grid system
  • Predefined CSS classes
  • JavaScript plugins
  • Cross-browser compatibility

Important Bootstrap Classes (Basics)

These classes are commonly used while creating layouts and designing web pages using Bootstrap.

1. container

  • Used to wrap website content
  • Provides a fixed-width responsive layout
  • Content is aligned in the center
  • Used with <div> tag

Example

<div>
  This is inside a container
</div>

2. container-fluid

  • Used to create a full-width layout
  • Occupies 100% width of the screen
  • Used with <div> tag

Example

<div>
  This is inside container-fluid
</div>

3. row

  • Used to create a horizontal row
  • Must be placed inside a container
  • Used to hold columns

Example

<div>
  Row content
</div>

4. col

  • Used to create columns
  • Must be placed inside a row
  • Automatically divides space equally

Example

<div>
  <div>Column 1</div>
  <div>Column 2</div>
</div>

5. btn

  • Used to create a button style
  • Applied to <button> or <a> tag
  • Needs additional button classes later

Example

<button>Button</button>

6. text-center

  • Used to center align text
  • Applies text-align: center

Example

<p>This text is centered</p>

  • container → Wraps and centers page content
  • container-fluid → Full-width layout
  • row → Creates a horizontal row
  • col → Creates columns inside a row
  • btn → Styles buttons
  • text-center → Centers text

Text color classes available in Bootstrap

👉 Bootstrap provides predefined text utility classes to apply different colors to text.

text-primary

text-primary gives the primary theme color of Bootstrap, which is BLUE by default.

Default Color

  • Color: Blue
  • Used for: Important text, links, headings, emphasis

__________________________________________________________________

text-secondary 

text-secondary is a Bootstrap text utility class used to apply the secondary theme color to text.

  • Color: Gray (by default)

  • Use: Less important or supporting text

  • Gives a muted / lighter emphasis compared to primary text

Example

<p class="text-secondary">This is secondary text</p>

👉 text-secondary displays text in gray color in Bootstrap (default theme).

 

____________________________________

text-success in Bootstrap

text-success is a Bootstrap text utility class used to apply the success theme color to text.

  • Color: Green (by default)

  • Use: Indicates success, positive messages, or confirmation

  • Example

<p class="text-success">Operation completed successfully</p>

👉 text-success displays text in green color in Bootstrap (default theme).

Note

  • Color depends on the Bootstrap theme, but green is default

  • Commonly used for success messages

________________________________________________________

text-danger in Bootstrap

text-danger is a Bootstrap text utility class used to apply the danger theme color to text.

Meaning

  • Color: Red (by default)
  • Use: Errors, warnings, critical messages

Example

<p class="text-danger">Error: Invalid input</p

👉 text-danger displays text in red color in Bootstrap.

text-warning in Bootstrap

text-warning is a Bootstrap text utility class used to apply the warning theme color to text.

Meaning

  • Color: Yellow / Orange (by default)
  • Use: Warning messages, alerts, caution text

Example

<p class="text-warning">Warning: Check your details</p>

👉 text-warning displays text in yellow (orange) color in Bootstrap.

Class Color Use
text-danger Red Error
text-warning Yellow/Orange Warning

 

text-info in Bootstrap

text-info is used to apply the info theme color to text.

Meaning

  • Color: Light blue / cyan (by default)
  • Use: Informational messages, hints, notices

Example

<p class="text-info">This is an informational message</p>

Exam Point

👉 text-info displays text in light blue color in Bootstrap.

text-light in Bootstrap

text-light is used to apply a very light color to text.

Meaning

  • Color: Light gray / near white
  • Use: Text on dark backgrounds

Example

<p class="text-light">This is light colored text</p>

👉 text-light displays text in light color (light gray) in Bootstrap.

text-dark in Bootstrap

text-dark is used to apply a dark color to text.

Meaning

  • Color: Dark gray / black
  • Use: Normal readable text

Example

<p class="text-dark">This is dark colored text</p

👉 text-dark displays text in dark color (black/dark gray) in Bootstrap.

Summary Table

Class Default Color Use
text-info Light Blue Information
text-light Light Gray On dark background
text-dark Black/Dark Gray Normal text

 

text-white in Bootstrap

text-white is used to apply white color to text.

Meaning

  • Color: White
  • Use: Text on dark backgrounds

Example

<p class="text-white">This is white text</p>

⚠️ Note: text-white is visible only when the background is dark.

Summary – Bootstrap Text Color Classes

Class Color (Default)
text-primary Blue
text-secondary Gray
text-success Green
text-danger Red
text-warning Yellow / Orange
text-info Light Blue
text-light Light Gray
text-dark Black / Dark Gray
text-white White

****************************************************************************

 

Bootstrap Button Classes

Bootstrap provides predefined classes to create styled and responsive buttons easily.

1. btn (Base Button Class)

  • btn is the main (mandatory) class
  • Used to apply basic button styling
  • Must be used with other button classes

Example

<button class="btn">Button</button>

2. Button Color Classes

These classes are used along with btn.

btn-primary

  • Color: Blue
  • Use: Main or important actions
<button class="btn btn-primary">Primary</button>

btn-secondary

  • Color: Gray
  • Use: Secondary actions
<button class="btn btn-secondary">Secondary</button>

btn-success

  • Color: Green
  • Use: Success or confirmation
<button class="btn btn-success">Success</button>

btn-danger

  • Color: Red
  • Use: Delete or warning actions
<button class="btn btn-danger">Danger</button>

btn-warning

  • Color: Yellow / Orange
  • Use: Caution actions
<button class="btn btn-warning">Warning</button>

btn-info

  • Color: Light Blue
  • Use: Information actions
<button class="btn btn-info">Info</button>

btn-light

  • Color: Light Gray
  • Use: Light background buttons
<button class="btn btn-light">Light</button>

btn-dark

  • Color: Dark / Black
  • Use: Dark theme buttons
<button class="btn btn-dark">Dark</button>

3. btn-outline-* Classes

Outline style buttons (border only).

<button class="btn btn-outline-primary">Outline</button>
<button class="btn btn-outline-danger">Outline Danger</button>

4. Buttons with <a> and <input>

Bootstrap buttons can be used with:

<a href="#" class="btn btn-primary">Link Button</a>
<input type="button" class="btn btn-success" value="Input Button">

Summary Table

Class Color
btn-primary Blue
btn-secondary Gray
btn-success Green
btn-danger Red
btn-warning Yellow
btn-info Light Blue
btn-light Light Gray
btn-dark Dark

✔ Button classes improve UI
✔ Buttons are responsive

Button Sizes in Bootstrap

Bootstrap provides size classes to change the size of buttons.
These classes are used along with btn and button color classes.

1. btn-lg (Large Button)

  • Creates a large-sized button
  • Used for important actions

Example

<button class="btn btn-primary btn-lg">Large Button</button>

2. btn-sm (Small Button)

  • Creates a small-sized button
  • Used where space is limited

Example

<button class="btn btn-success btn-sm">Small Button</button>

Normal Button (Default Size)

  • If no size class is used, button is medium size by default
<button class="btn btn-danger">Normal Button</button>

Comparison Table (Exam-Friendly)

Class Button Size
btn-lg Large
btn (default) Medium
btn-sm Small

c Disabled Buttons

Meaning

A disabled button is a button that cannot be clicked. It is “inactive” and usually looks faded.

How to make a button disabled

Method 1: Using disabled attribute (for <button> tags)

<button class="btn btn-primary" disabled>Disabled Button</button>
  • The disabled attribute makes it unclickable.
  • You can see it looks faded.

Method 2: Using disabled class (for <a> links)

<a href="#" class="btn btn-danger disabled">Disabled Link Button</a>
  • disabled class works for links (<a>)
  • The link cannot be clicked.

Simple way to remember

  • Disabled button = Cannot click
  • Looks faded

2️⃣ Block Buttons

Meaning

A block button is a button that stretches full width of the container it is in.

How to make a block button in Bootstrap 5

  • Use the class d-grid on a div wrapper, then put the button inside.
<div class="d-grid">
  <button class="btn btn-success">Block Button</button>
</div>

✅ This button now takes the full width of the page or container.

Multiple block buttons example

<div class="d-grid gap-2">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-secondary">Button 2</button>
</div>
  • gap-2 gives space between buttons.
  • Both buttons stretch full width.

Easy way to remember

  • Disabled = Cannot click, faded
  • Block = Full width, stretches across page

Visual Summary 

Button Type Look Clickable?
Normal Button Regular Yes
Disabled Button Faded No
Block Button Full width Yes

 

© 2026 Digimatx | Privacy Policy