Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.

Features

Perfect for beginners and experts alike

  • 24/7 Customer Support New
  • Fully Customizable
  • Award Winning
  • Social & Interactive
  • Time Saving
  • Verified Authors

First Steps

Bootstrap uses NPM scripts for its build system. Our package.json includes convenient methods for working with the framework, including compiling code, running tests, and more.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum illum, accusamus repellat eius, ullam, molestiae fugit numquam voluptas ratione, corporis recusandae obcaecati quibusdam hic reiciendis. Velit ea quaerat illum cumque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate possimus optio assumenda unde quia voluptate minus debitis velit sapiente. Dolorem quaerat reprehenderit similique ipsum libero eius architecto distinctio assumenda blanditiis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laboriosam, dolorem consequatur ducimus culpa, inventore excepturi quis reprehenderit, temporibus error aperiam cumque placeat! Accusantium enim nihil tempora, veniam praesentium facere.

Quick start

Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks at StackPath. Using a package manager or need to download the source files?

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<div class="image image-overlay"></div>

JS

Many of our components require the use of JavaScript to function.

<div class="image image-overlay"></div>

Bootstrap Source

The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source Sass, JavaScript, and documentation. More specifically, it includes the following and more:

  • Guidebook
    • app
      • assets assets referenced in html pages
        • css
        • fonts
        • images
        • js
        • scss
      • documentation
      • html is the source for html pages
        • docs documentation html pages
          • layout-1.html
          • layout-2.html
          • layout-3.html
          • layout-4.html
        • help help center html pages
          • article-1.html
          • article-2.html
          • category-inner.html
          • category.html
          • homepage-1.html
          • homepage-2.html
          • homepage-3.html
          • tutorial.html
        • pages inner html pages
          • 404.html
          • changelog.html
          • contact.html
          • faq.html
          • pricing.html
          • terms.html
      • index.html
    • gulpfile.js
    • package.json

Starter Template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

That’s all you need for overall page requirements. Visit the Layout docs or our official examples to start laying out your site’s content and components.