Skip to content

What is Bootstrap?

Bootstrap is a free, open-source frontend toolkit that gives you a responsive grid, ready-made components and utility classes to apply in your HTML. Add class="btn btn-primary" to a button and it picks up Bootstrap's button styles. Components like dropdowns, modals and carousels come with the JavaScript that makes them work.

Mark Otto and Jacob Thornton created Bootstrap at Twitter, and it was first released in August 2011. Bootstrap 5 replaced its old jQuery dependency with plain JavaScript. The grid is its best-known feature, with 12 columns per row and six breakpoints. This layout stacks on small screens and sits side by side from the md breakpoint, 768px, upward:

<div class="container">
  <div class="row">
    <div class="col-md-8">Main content</div>
    <div class="col-md-4">Sidebar</div>
  </div>
</div>

Why learn Bootstrap?

With Bootstrap handling the grid and components, you can see how a full page fits together before you can write every piece of CSS yourself. Its docs show the complete HTML each component expects, including ARIA attributes like role="tablist" on tabs, so you pick up accessible markup patterns as you go.

Sites that keep Bootstrap's default theme tend to look alike, and matching a custom design means overriding colors, spacing and fonts with Sass variables or CSS custom properties. Bootstrap has been around since 2011, so you're likely to meet it in existing codebases. For new projects, compare it with Tailwind CSS, which gives you utility classes and leaves the components to you.

Practice Bootstrap on Frontend Mentor

Design challenges on Frontend Mentor come with a design file and a brief, and how you build them is your call. With Bootstrap, most of the practice is bending its defaults to match someone else's design.

Coding bootcamp testimonials slider is a natural fit for the carousel component, which responds to arrow keys by default. The Bookmark landing page needs tabs and an FAQ accordion, both of which you can wire up with data attributes, plus a newsletter form that uses Bootstrap's validation styles. PayAPI multi-page website spreads the work over four pages, where setting your colors and fonts once in Sass saves you overriding the same styles on every page.

Start building free

Take your Bootstrap skills further

Want a more structured approach? This learning path takes you through its challenges in order, from first principles to real-world projects.

intermediate

Advanced CSS techniques

As you start building more complex projects, it helps to use defined strategies to keep your code organized. This path outlines key considerations and provides increasingly more difficult challenges to help you practice.

Challenges to practice Bootstrap with

Every challenge works with any tech stack. These are good ones to build with Bootstrap, from easiest to hardest.

  • Free

    Intro section with dropdown navigation

    • HTML
    • CSS
    • JS
    junior

    This challenge will test your ability to create dropdown navigation menus, a common pattern on larger sites. It will also provide some nice basic layout challenges.

  • Free

    Coding bootcamp testimonials slider

    • HTML
    • CSS
    • JS
    junior

    This challenge will be a nice test if you're new to JavaScript. It's also a great opportunity to play around with content animations and transitions.

  • Free

    Bookmark landing page

    • HTML
    • CSS
    • JS
    intermediate

    This challenge will really test your layout skills. There are also areas that will require some JavaScript, such as the tabbed features section and the FAQ accordion.

  • Free

    E-commerce product page

    • HTML
    • CSS
    • JS
    intermediate

    In this challenge, you'll build a beautiful product page. We'll be putting your JS skills to the test with a lightbox product gallery and cart functionality!

  • Premium

    Dine restaurant website

    • HTML
    • CSS
    • JS
    intermediate

    This two-page website is perfect if you're starting to become more confident in your front-end skills. The challenge includes tricky design details and form validation.

  • Premium

    PayAPI multi-page website

    • HTML
    • CSS
    • JS
    advanced

    This 4-page website will be a great test for your HTML & CSS skills. You'll be building out a marketing site, complete with custom form validation throughout.

View more challenges

Solutions made with Bootstrap

View more solutions

Related technologies

  • What is Tailwind CSS?

    Tailwind CSS is a utility-first CSS framework. You style elements with small classes like px-4 and md:flex, drawn from a theme you can customize in CSS.

Join 1,205,040 people building portfolio-worthy projects

Our highly supportive, positive community is here to help you improve your skills. We all try to help each other out wherever possible. We’d love to welcome you to our community!

Log in