Bootstrap online editor

Write, Run & Share Bootstrap code online using OneCompiler's Bootstrap online editor for free. It's one of the robust, feature-rich online editors for Bootstrap. Getting started with the OneCompiler's Bootstrap online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Bootstrap' and start writing code to learn and test online without worrying about tedious process of installation.

About Bootstrap

Bootstrap is the world's most popular CSS framework for building responsive, mobile-first websites. Originally developed by Twitter, Bootstrap provides pre-designed components, a powerful grid system, and extensive utility classes. It includes CSS and JavaScript-based design templates for typography, forms, buttons, navigation, modals, and other interface components, helping developers build professional websites quickly.

Syntax help

Grid System

Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive. The grid is divided into 12 columns.

<!-- Basic grid -->
<div class="container">
  <div class="row">
    <div class="col-4">Column 1</div>
    <div class="col-4">Column 2</div>
    <div class="col-4">Column 3</div>
  </div>
</div>

<!-- Responsive grid -->
<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">Responsive column</div>
    <div class="col-12 col-md-6 col-lg-4">Responsive column</div>
    <div class="col-12 col-md-12 col-lg-4">Responsive column</div>
  </div>
</div>

<!-- Auto-width columns -->
<div class="row">
  <div class="col">Equal width</div>
  <div class="col">Equal width</div>
  <div class="col">Equal width</div>
</div>

Breakpoints

Class	Screen Width	Description
.col-	<576px	Extra small devices
.col-sm-	>=576px	Small devices
.col-md-	>=768px	Medium devices
.col-lg-	>=992px	Large devices
.col-xl-	>=1200px	Extra large devices
.col-xxl-	>=1400px	Extra extra large devices

Containers

Containers are the most basic layout element in Bootstrap. Choose from a responsive fixed-width container or fluid full-width container.

<!-- Fixed-width container -->
<div class="container">Fixed width content</div>

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

<!-- Responsive containers -->
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>

Typography

Bootstrap sets basic global typography styles for headings, body text, lists, and more.

<!-- Headings -->
<h1>h1 heading</h1>
<h2>h2 heading</h2>
<p class="h1">Paragraph styled as h1</p>

<!-- Display headings -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>

<!-- Lead paragraph -->
<p class="lead">This is a lead paragraph that stands out.</p>

<!-- Text utilities -->
<p class="text-start">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-end">Right aligned text</p>
<p class="fw-bold">Bold text</p>
<p class="fw-light">Light weight text</p>
<p class="fst-italic">Italic text</p>
<p class="text-decoration-underline">Underlined text</p>
<p class="text-lowercase">LOWERCASED TEXT</p>
<p class="text-uppercase">uppercased text</p>
<p class="text-capitalize">capitalized text</p>

Colors

Bootstrap includes an extensive color system for text, backgrounds, and borders.

<!-- Text colors -->
<p class="text-primary">Primary text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="text-warning">Warning text</p>
<p class="text-info">Info text</p>
<p class="text-light bg-dark">Light text</p>
<p class="text-dark">Dark text</p>
<p class="text-muted">Muted text</p>

<!-- Background colors -->
<div class="bg-primary text-white">Primary background</div>
<div class="bg-secondary text-white">Secondary background</div>
<div class="bg-success text-white">Success background</div>
<div class="bg-danger text-white">Danger background</div>
<div class="bg-warning">Warning background</div>
<div class="bg-info">Info background</div>
<div class="bg-light">Light background</div>
<div class="bg-dark text-white">Dark background</div>

Buttons

Bootstrap includes several predefined button styles with support for sizes, states, and more.

<!-- Button variants -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>

<!-- Outline buttons -->
<button class="btn btn-outline-primary">Primary Outline</button>
<button class="btn btn-outline-secondary">Secondary Outline</button>
<button class="btn btn-outline-success">Success Outline</button>

<!-- Button sizes -->
<button class="btn btn-primary btn-lg">Large button</button>
<button class="btn btn-primary">Default button</button>
<button class="btn btn-primary btn-sm">Small button</button>

<!-- Block button -->
<button class="btn btn-primary d-block w-100">Block button</button>

<!-- Disabled state -->
<button class="btn btn-primary" disabled>Disabled</button>

<!-- Button group -->
<div class="btn-group">
  <button class="btn btn-primary">Left</button>
  <button class="btn btn-primary">Middle</button>
  <button class="btn btn-primary">Right</button>
</div>

Cards

Cards are flexible content containers with multiple variants and options.

<!-- Basic card -->
<div class="card" style="width: 18rem;">
  <img src="image.jpg" class="card-img-top" alt="..." />
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Card with header and footer -->
<div class="card">
  <div class="card-header">Featured</div>
  <div class="card-body">
    <h5 class="card-title">Special title</h5>
    <p class="card-text">With supporting text below.</p>
  </div>
  <div class="card-footer text-muted">2 days ago</div>
</div>

<!-- Card with list group -->
<div class="card">
  <div class="card-header">Features</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Item 1</li>
    <li class="list-group-item">Item 2</li>
    <li class="list-group-item">Item 3</li>
  </ul>
</div>

Alerts

Alerts provide contextual feedback messages for typical user actions.

<div class="alert alert-primary" role="alert">Primary alert</div>
<div class="alert alert-secondary" role="alert">Secondary alert</div>
<div class="alert alert-success" role="alert">Success alert</div>
<div class="alert alert-danger" role="alert">Danger alert</div>
<div class="alert alert-warning" role="alert">Warning alert</div>
<div class="alert alert-info" role="alert">Info alert</div>

<!-- Alert with link -->
<div class="alert alert-primary" role="alert">
  A simple alert with <a href="#" class="alert-link">an example link</a>.
</div>

<!-- Dismissible alert -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Warning!</strong> This alert can be dismissed.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Forms

Bootstrap provides form controls with custom styles for consistent rendering across browsers.

<!-- Basic form -->
<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input
      type="email"
      class="form-control"
      id="email"
      placeholder="[email protected]"
    />
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input type="password" class="form-control" id="password" />
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="remember" />
    <label class="form-check-label" for="remember">Remember me</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<!-- Form controls -->
<input
  class="form-control form-control-lg"
  type="text"
  placeholder="Large input"
/>
<input class="form-control" type="text" placeholder="Default input" />
<input
  class="form-control form-control-sm"
  type="text"
  placeholder="Small input"
/>

<!-- Select -->
<select class="form-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

<!-- Textarea -->
<textarea class="form-control" rows="3"></textarea>

<!-- Input group -->
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username" />
</div>

<!-- Floating labels -->
<div class="form-floating mb-3">
  <input
    type="email"
    class="form-control"
    id="floatingInput"
    placeholder="[email protected]"
  />
  <label for="floatingInput">Email address</label>
</div>

Navigation

Bootstrap provides several navigation components including navs, tabs, and navbars.

<!-- Basic nav -->
<ul class="nav">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
</ul>

<!-- Tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>

<!-- Pills -->
<ul class="nav nav-pills">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarNav"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
      </ul>
    </div>
  </div>
</nav>

Modals

Modals are streamlined, flexible dialog prompts powered by JavaScript.

<!-- Button trigger -->
<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="modal"
  data-bs-target="#exampleModal"
>
  Launch modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
        ></button>
      </div>
      <div class="modal-body">Modal body text goes here.</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Tables

Bootstrap provides classes for styling tables with various options.

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First</th>
      <th>Last</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

<!-- Table variants -->
<table class="table table-striped">
  ...
</table>
<table class="table table-bordered">
  ...
</table>
<table class="table table-hover">
  ...
</table>
<table class="table table-dark">
  ...
</table>
<table class="table table-sm">
  ...
</table>

<!-- Responsive table -->
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Utilities

Bootstrap includes many utility classes for spacing, display, flexbox, and more.

<!-- Spacing (margin and padding) -->
<div class="m-3">Margin 3 on all sides</div>
<div class="mt-3">Margin top 3</div>
<div class="mx-auto">Horizontal center</div>
<div class="p-3">Padding 3 on all sides</div>
<div class="py-2">Padding y-axis 2</div>

<!-- Display -->
<div class="d-none">Hidden</div>
<div class="d-block">Block</div>
<div class="d-inline">Inline</div>
<div class="d-flex">Flexbox</div>
<div class="d-none d-md-block">Hidden on small, visible on medium+</div>

<!-- Flexbox -->
<div class="d-flex justify-content-center">Centered</div>
<div class="d-flex justify-content-between">Space between</div>
<div class="d-flex align-items-center">Vertically centered</div>
<div class="d-flex flex-column">Column direction</div>

<!-- Sizing -->
<div class="w-25">Width 25%</div>
<div class="w-50">Width 50%</div>
<div class="w-100">Width 100%</div>
<div class="h-100">Height 100%</div>

<!-- Borders -->
<div class="border">All borders</div>
<div class="border-top">Top border</div>
<div class="border-0">No border</div>
<div class="rounded">Rounded corners</div>
<div class="rounded-circle">Circle</div>
<div class="rounded-pill">Pill shape</div>

<!-- Shadows -->
<div class="shadow-none">No shadow</div>
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Regular shadow</div>
<div class="shadow-lg">Large shadow</div>

<!-- Position -->
<div class="position-relative">Relative</div>
<div class="position-absolute">Absolute</div>
<div class="position-fixed">Fixed</div>
<div class="fixed-top">Fixed to top</div>
<div class="fixed-bottom">Fixed to bottom</div>

Spinners

Bootstrap spinners indicate a loading state.

<!-- Border spinner -->
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Growing spinner -->
<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

<!-- Colored spinners -->
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-danger"></div>

<!-- Sizes -->
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>

Badges

Badges are small count and labeling components.

<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>

<!-- Pill badges -->
<span class="badge rounded-pill bg-primary">Pill badge</span>

<!-- Badge in button -->
<button class="btn btn-primary">
  Notifications <span class="badge bg-secondary">4</span>
</button>

Breadcrumb

Breadcrumbs indicate the current page's location within a navigational hierarchy.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Progress

Progress bars for showing the progress of a task.

<div class="progress">
  <div class="progress-bar" style="width: 25%">25%</div>
</div>

<!-- Colored progress -->
<div class="progress">
  <div class="progress-bar bg-success" style="width: 50%"></div>
</div>

<!-- Striped progress -->
<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width: 75%"></div>
</div>

<!-- Animated striped -->
<div class="progress">
  <div
    class="progress-bar progress-bar-striped progress-bar-animated"
    style="width: 100%"
  ></div>
</div>

Tooltips and Popovers

<!-- Tooltip (requires JavaScript initialization) -->
<button
  type="button"
  class="btn btn-secondary"
  data-bs-toggle="tooltip"
  title="Tooltip text"
>
  Hover me
</button>

<!-- Popover (requires JavaScript initialization) -->
<button
  type="button"
  class="btn btn-secondary"
  data-bs-toggle="popover"
  title="Popover title"
  data-bs-content="Popover content"
>
  Click me
</button>

Accordion

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button
        class="accordion-button"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#collapseOne"
      >
        Accordion Item #1
      </button>
    </h2>
    <div
      id="collapseOne"
      class="accordion-collapse collapse show"
      data-bs-parent="#accordionExample"
    >
      <div class="accordion-body">Content for the first item.</div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button
        class="accordion-button collapsed"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#collapseTwo"
      >
        Accordion Item #2
      </button>
    </h2>
    <div
      id="collapseTwo"
      class="accordion-collapse collapse"
      data-bs-parent="#accordionExample"
    >
      <div class="accordion-body">Content for the second item.</div>
    </div>
  </div>
</div>