Fading Coder

One Final Commit for the Last Sprint

Home > Tech > Content

Integrating and Styling with Bootstrap 3

Tech May 5 13

Bootstrap is a widely adopted front-end framework for building responsive, mobile-first web applications using HTML, CSS, and JavaScript.

Integration Methods

CDN-Based Setup

Leverage a public CDN for fast, reliable, and bandwidth-unlimited delivery of Bootstrap assets. This approach avoids local dependency management and ensures optimal performance.


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Starter</title>
  <!-- Core Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
  <!-- Optional theme (rarely used) -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap-theme.min.css">
  <!-- jQuery (required before Bootstrap JS) -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- Bootstrap JavaScript bundle -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">App Name</a>
        </div>
        <div id="main-nav" class="navbar-collapse collapse">
          - [Home](#home)
- [About](#about)
- [Contact](#contact)
- [Menu <span class="caret"></span>](#)
    - [Action](#action)
    - [Another action](#another)
    - [Something else](#else)
    - 
    - Section
    - [Link one](#link1)
    - [Link two](#link2)
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</body>
</html>

Local File Inclusion

Download and host Bootstrap assets locally for full control, offline development, or strict content security policies.


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local Bootstrap</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">App Name</a>
        </div>
        <div id="main-nav" class="navbar-collapse collapse">
          - [Home](#home)
- [About](#about)
- [Contact](#contact)
- [Menu <span class="caret"></span>](#)
    - [Action](#action)
    - [Another action](#another)
    - [Something else](#else)
    - 
    - Section
    - [Link one](#link1)
    - [Link two](#link2)
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</body>
</html>

Layout System

Grid Implementation

Bootstrap’s grid system uses a 12-column layout with responsive breakpoints (xs, sm, md, lg). Columns are nested inside .row containers, which must reside within .container or .container-fluid.


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Grid Demo</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <style>
    .row [class*="col-"] {
      padding: 15px 0;
      background-color: #6a5acd;
      border: 2px solid #32cd32;
      color: white;
      text-align: center;
    }
    @media (max-width: 767px) {
      .responsive-note { color: #e74c3c; }
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- Basic row -->
    <div class="row">
      <div class="col-md-2">md-2</div>
      <div class="col-md-4">md-4</div>
      <div class="col-md-6">md-6</div>
    </div>

    <!-- Mixed breakpoints -->
    <div class="row">
      <div class="col-sm-4 col-md-6">sm-4 / md-6</div>
      <div class="col-sm-8 col-md-6">sm-8 / md-6</div>
    </div>

    <div class="responsive-note">Responsive behavior active below 768px</div>

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

    <!-- Nested grid -->
    <div class="row">
      <div class="col-md-9">
        <div class="row">
          <div class="col-md-8">inner-8</div>
          <div class="col-md-4">inner-4</div>
        </div>
      </div>
      <div class="col-md-3">outer-3</div>
    </div>

    <!-- Column reordering -->
    <div class="row">
      <div class="col-md-9 col-md-push-3">pushed</div>
      <div class="col-md-3 col-md-pull-9">pulled</div>
    </div>

    <!-- Clearfix for small screens -->
    <div class="row">
      <div class="col-md-6 col-sm-1">left</div>
      <div class="clearfix visible-sm-block"></div>
      <div class="col-md-6 col-sm-1">right</div>
    </div>
  </div>
</body>
</html>

Typography & Content Formatting

Bootstrap enhances standard HTML elements with consistent styling and utility classes.


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Typography</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <!-- Headings with subtext -->
    <h1>Primary heading <small>Secondary text</small></h1>
    <h2>Secondary heading <small>Subtle note</small></h2>

    <!-- Lead paragraph -->
    <p class="lead">A prominent paragraph emphasizing key content.</p>

    <!-- Emphasis and alignment -->
    <p><small>This is fine print.</small></p>
    <p><strong>Bold emphasis</strong></p>
    <p><em>Italicized phrase</em></p>
    <p class="text-left">Left-aligned text</p>
    <p class="text-center">Center-aligned text</p>
    <p class="text-right">Right-aligned text</p>

    <!-- Semantic text colors -->
    <p class="text-primary">Primary informational text</p>
    <p class="text-success">Success confirmation</p>
    <p class="text-info">Informational message</p>
    <p class="text-warning">Warning notice</p>
    <p class="text-danger">Error alert</p>

    <!-- Abbreviations -->
    <p><abbr title="Hypertext Transfer Protocol">HTTP</abbr></p>
    <p><abbr title="Domain Name System" class="initialism">DNS</abbr></p>

    <!-- Address block -->
    <address>
      <strong>Organization Name</strong><br>
      123 Street<br>
      City, State ZIP<br>
      <abbr title="Phone">P:</abbr> (555) 123-4567
    </address>

    <!-- Blockquote with attribution -->
    > A meaningful quote goes here.
> 
>  <footer>— Author Name, <cite>Source Title</cite></footer>

    <!-- List variants -->
    - Unstyled item
- Unstyled item
- Unstyled item

    - Inline item
- Inline item
- Inline item

    <dl class="dl-horizontal">
      <dt>Term One</dt>
      <dd>Definition one</dd>
      <dt>Term Two</dt>
      <dd>Definition two</dd>
    </dl>
  </div>
</body>
</html>

Code Display

Use semantic markup to distinguish between inline code snippets and multi-line blocks.

<div class="container">
<p>The element `<p>` defines a paragraph.</p>

This is an informational alert.

</div>

Tables

Apply contextual classes and responsiveness to ` Employee Compensation Summary

Name Age Salary
Alice 28 $4,200
Bob 36 $5,800
Carol 31 $7,100 

## Forms

Bootstrap supports vertical, inline, and horizontal form layouts with built-in validation states and sizing options.

### Standard Vertical Form

```html


Username



Password



Remember me

Submit

Horizontal Form



Username





Password







Remembre me





Login

Validation States & Sizing




Valid input





Warning state





Error state





Large input





Small input

Buttons

Style interactive elements using predefined button classes and modifiers.


Default
Primary
Success
Info
Warning
Danger
Link-style



Large primary
Small default




Inactive
Active



Enabled
Disabled

Images

Apply visual enhancements and responsive behavior to ![]() elements.


![Rounded corners](photo.jpg)
![Circular crop](photo.jpg)
![Thumbnail frame](photo.jpg)
![Fluid width](photo.jpg)
Tags: bootstrapcss-frameworkresponsive-designfrontend-development
Back to List

Prev: Creating a WPF with MudBlazor Project Template and Multi-Project Template Packaging

Next: Efficient Approaches for XOR Array Computation and Unique File Naming

Related Articles

Understanding Strong and Weak References in Java

Strong References Strong reference are the most prevalent type of object referencing in Java. When an object has a strong reference pointing to it, the garbage collector will not reclaim its memory. F...

Comprehensive Guide to SSTI Explained with Payload Bypass Techniques

Introduction Server-Side Template Injection (SSTI) is a vulnerability in web applications where user input is improper handled within the template engine and executed on the server. This exploit can r...

Implement Image Upload Functionality for Django Integrated TinyMCE Editor

Django’s Admin panel is highly user-friendly, and pairing it with TinyMCE, an effective rich text editor, simplifies content management significantly. Combining the two is particular useful for bloggi...

Leave a Comment

Anonymous

◎Feel free to join the discussion and share your thoughts.

Copyright © fadingcoder.top