Fading Coder

One Final Commit for the Last Sprint

Home > Tech > Content

Integrating and Styling with Bootstrap 3

Tech 1

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.

<!DOCTYPE html>
<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">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Menu <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#action">Action</a></li>
                <li><a href="#another">Another action</a></li>
                <li><a href="#else">Something else</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Section</li>
                <li><a href="#link1">Link one</a></li>
                <li><a href="#link2">Link two</a></li>
              </ul>
            </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 seucrity policies.

<!DOCTYPE html>
<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">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Menu <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#action">Action</a></li>
                <li><a href="#another">Another action</a></li>
                <li><a href="#else">Something else</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Section</li>
                <li><a href="#link1">Link one</a></li>
                <li><a href="#link2">Link two</a></li>
              </ul>
            </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 in side .row containers, which must reside within .container or .container-fluid.

<!DOCTYPE html>
<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 elemnets with consistent styling and utility classes.

<!DOCTYPE html>
<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 -->
    <blockquote>
      <p>A meaningful quote goes here.</p>
      <footer>— Author Name, <cite>Source Title</cite></footer>
    </blockquote>

    <!-- List variants -->
    <ul class="list-unstyled">
      <li>Unstyled item</li>
      <li>Unstyled item</li>
      <li>Unstyled item</li>
    </ul>

    <ul class="list-inline">
      <li>Inline item</li>
      <li>Inline item</li>
      <li>Inline item</li>
    </ul>

    <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 <code>&lt;p&gt;</code> defines a paragraph.</p>
  <pre><code>&lt;div class="alert alert-info" role="alert"&gt;
  This is an informational alert.
&lt;/div&gt;</code></pre>
</div>

Tables

Apply contextual classes and responsiveness to <table> elements.

<div class="container">
  <div class="table-responsive">
    <table class="table table-striped table-bordered table-hover">
      <caption>Employee Compensation Summary</caption>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alice</td>
          <td>28</td>
          <td>$4,200</td>
        </tr>
        <tr class="danger">
          <td>Bob</td>
          <td>36</td>
          <td>$5,800</td>
        </tr>
        <tr class="success">
          <td>Carol</td>
          <td>31</td>
          <td>$7,100</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Forms

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

Standard Vertical Form

<form role="form">
  <div class="form-group">
    <label for="usr">Username</label>
    <input type="text" class="form-control" id="usr" placeholder="Enter username">
  </div>
  <div class="form-group">
    <label for="pwd">Password</label>
    <input type="password" class="form-control" id="pwd" placeholder="Enter password">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Horizontal Form

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="usr" class="col-sm-2 control-label">Username</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="usr" placeholder="Username">
    </div>
  </div>
  <div class="form-group">
    <label for="pwd" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Login</button>
    </div>
  </div>
</form>

Validation States & Sizing

<div class="container">
  <form class="form-horizontal" role="form">
    <div class="form-group has-success">
      <label class="col-sm-2 control-label">Valid input</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" placeholder="Valid entry">
      </div>
    </div>
    <div class="form-group has-warning">
      <label class="col-sm-2 control-label">Warning state</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" placeholder="Review required">
      </div>
    </div>
    <div class="form-group has-error">
      <label class="col-sm-2 control-label">Error state</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" placeholder="Fix this field">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">Large input</label>
      <div class="col-sm-10">
        <input type="text" class="form-control input-lg" placeholder="Large size">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">Small input</label>
      <div class="col-sm-10">
        <input type="text" class="form-control input-sm" placeholder="Small size">
      </div>
    </div>
  </form>
</div>

Buttons

Style interactive elements using predefined button classes and modifiers.

<div class="container">
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-link">Link-style</button>

  <hr>

  <button type="button" class="btn btn-primary btn-lg">Large primary</button>
  <button type="button" class="btn btn-default btn-sm">Small default</button>

  <hr>

  <p>
    <button type="button" class="btn btn-default btn-lg">Inactive</button>
    <button type="button" class="btn btn-default btn-lg active">Active</button>
  </p>

  <p>
    <button type="button" class="btn btn-primary btn-lg">Enabled</button>
    <button type="button" class="btn btn-primary btn-lg" disabled>Disabled</button>
  </p>
</div>

Images

Apply visual enhancements and responsive behavior to <img> elements.

<div class="container">
  <img src="photo.jpg" class="img-rounded" alt="Rounded corners">
  <img src="photo.jpg" class="img-circle" alt="Circular crop">
  <img src="photo.jpg" class="img-thumbnail" alt="Thumbnail frame">
  <img src="photo.jpg" class="img-responsive" alt="Fluid width">
</div>
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