Cover image
Web Front-end
11 minute read

What Is Bootstrap? Effortless Responsive Sites With Bootstrap Web Development

You’ve heard of Bootstrap, but what is Bootstrap, exactly? A powerful collection of HTML, CSS, and JavaScript tools, it makes responsive web development easy. Get started with the basics of Bootstrap.

Editor’s note: This article was updated on 10/10/22 by our editorial team. It has been modified to include recent sources and to align with our current editorial standards.

If you’re doing anything web related, chances are you’ve heard about Bootstrap. But many developers are still left wondering: “What is Bootstrap used for, specifically?” Here, we’ll examine the basics of Bootstrap and its ideal use cases, including setup, the grid system, and typical component examples.

Bootstrap web development allows programmers to concentrate on development without worrying about design, and get a good looking website up and running quickly. Conversely, it gives web designers a solid foundation for creating interesting Bootstrap themes.

So, What Is Bootstrap?

Bootstrap is a powerful toolkit—a collection of HTML, CSS, and JavaScript tools for creating and building web pages and web applications. It is a free and open source project, hosted on GitHub, and originally created by (and for) Twitter.

After its open-source release in 2011, Bootstrap became popular very quickly—and with good reason. Web designers and web developers like Bootstrap because it is flexible and easy to work with. Its main advantages are that it is responsive by design, it maintains broad browser compatibility, it offers consistent design by using reusable components, and it is very quick to learn. It offers rich extensibility using JavaScript, and comes with built-in support for jQuery plugins and a programmatic JavaScript API. Bootstrap can be used with any IDE or editor and any server side technology and language, from ASP.NET to PHP to Ruby on Rails.

Getting Started With the Basics of Bootstrap

Bootstrap is available in two forms: a precompiled version and a source code version. The source code version uses the Less CSS preprocessor, but if you are more into Sass, there is also an official Sass port of Bootstrap. To make it easier to make use of CSS vendor prefixes, Bootstrap uses Autoprefixer.

The source code version comes with styles source code written in Less (or Sass), JavaScript files, and accompanying documentation. This allows more ambitious designers and developers to change and customize all the provided styles as they prefer, and build their own versions of Bootstrap. If you are not familiar with Less (or Sass), or you are not interested in changing the source code, you can use the precompiled vanilla CSS. All the styles can be overridden later by using custom styles.

File Structure

We’ll focus on the precompiled version, which can be downloaded here. The basic file structure contains two main subfolders, css and js:

Folder Contents
js Contains bootstrapJavaScript files in various formats.
css Contains bootstrap, bootstrap-utilities, bootstrap-reboot, and bootstrap-grid CSS files in various formats.

The Bootstrap structure is simple and self-explanatory. It includes precompiled files that enable quick use in any web project. Besides compiled and minified CSS and JS files, older versions of Bootstrap also include fonts from Glyphicons and the optional starting Bootstrap theme.

This structure can be easily incorporated in your own project’s file structure by including the Bootstrap files exactly as they come out of the zip archive or, if it suits your project better, you can rearrange these files and place them anywhere you like. Just be sure that the Glyphicons fonts folder is on the same level as the CSS folder.

Basic Bootstrap HTML Template

A basic Bootstrap HTML template should look something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

It is important to start any HTML with an HTML 5 Doctype declaration so that browsers know what kind of a document toexpect. The head contains three important <meta> tags that must be declared first, and any additional head tags must be added after these.

JavaScript files are added to the end of the body to allow the web page to load visibly before any JavaScript is executed. jQuery is needed for Bootstrap plugins and needs to load before bootstrap.js. If you aren’t using any of Bootstrap’s interactive features, you can omit these files from the source.

This is the bare minimum needed to get a basic Bootstrap layout up and running. Developers may want to look at more advanced examples on Bootstrap’s examples page. If you’re looking for design inspiration, Bootstrap Expo showcases sites that are built using Bootstrap. As we note later, every part of Bootstrap can be easily customized in CSS. But if that’s not your thing, and you are looking for a slightly different look and feel from the prepackaged Bootstrap themes, there are many free, open source, and premium themes available from Bootswatch and WrapBootstrap.

Bootstrap Grid System

Before our Bootstrap tutorial dives into components and design templates, it is important to mention one of the major features that Bootstrap introduced in version 3: a mobile-first design philosophy, which yielded a Bootstrap that is responsive by design. This version of Bootstrap easily and efficiently scales with a single code base, from phones and tablets to desktops.

This responsiveness stems from a fluid Bootstrap grid system that can be applied to appropriately scale up to 12 columns, according to the size of the device or viewport. Grids provide structure to layouts, defining the horizontal and vertical guidelines for arranging content and enforcing margins. Grids also offer an intuitive structure for viewers because it’s easy to follow a left-to-right or right-to-left flow of content moving down a page. Before grids—and before CSS was so powerful—grid-based layouts were achieved by using tables, where the content would be arranged inside table cells. As CSS became more mature, a number of CSS frameworks for grid-based layouts started to appear. These include YUI grids, 960 GS and blueprint.

To use the Bootstrap grid system, you must follow certain rules. Grid column elements are placed inside row elements, which create horizontal groups of columns. You can have unlimited rows on the page, but columns must be immediate children of rows. In a full row, the column widths will be any combination that adds up to 12, but it is not mandatory to use all 12 available columns.

Rows need to be placed either in a fixed-width layout wrapper, which has a .container class and a width of 1170px, or in full-width layout wrapper, which has a .container-fluid class and which enables the responsive behavior in that row.

The Bootstrap grid system has four tiers of classes: xs for phones (<768px), sm for tablets (≥768px), md for desktops (≥992px), and lg for larger desktops (≥1200px). These define the sizes at which the columns will collapse or spread horizontally. The class tiers can be used in any combination to get dynamic and flexible layouts.

For example, if we want to get two rows, one with two columns and one with four, we could write:

<div class="row">
  <div class="col-md-6">First column</div>
  <div class="col-md-6">Second column</div>
</div>
<div class="row">
  <div class="col-md-3">First column</div>
  <div class="col-md-3">Second column</div>
  <div class="col-md-3">Third column</div>
  <div class="col-md-3">Fourth column</div>
</div>

We can use mixed column widths too:

<div class="row">
  <div class="col-md-9">Wider column</div>
  <div class="col-md-3">Smaller column</div>
</div>

We can even shift columns by using offset: for example, to create more narrow and centered content:

<div class="row">
  <div class="col-md-6 col-md-offset-3">Centered column</div>
</div>

Columns can be nested. There can be fewer than 12 columns, and as mentioned, we can choose fixed-width or full-width columns by using .container or .container-fluid wrappers, respectively.

<div class="container">
  <div class="row">
    <div class="col-md-8">
      Parent fixed-width column
      <div class="row">
        <div class="col-md-6">Nested column</div>
        <div class="col-md-6">Nested column</div>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">Fluid ..</div>
    <div class="col-md-4">.. and full-width ..</div>
    <div class="col-md-4">.. example</div>
  </div>
</div>

If we combine different class tiers, we will get different looks on mobile and desktop views. In the example below, on the desktop there will be four columns in a line; on mobile, they will have full width and stack on each other.

<div class="row">
  <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
  <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
  <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
  <div class="col-xs-12 col-md-3">.col-xs-12 .col-md-3</div>
</div>

Bootstrap Navigation on Desktop and Mobile

It is possible to disable page responsiveness completely on older Bootstrap versions. This will disable the “mobile site” aspects of Bootstrap. Keep in mind that if you disable responsiveness, any fixed-width component, such as a fixed navbar, will not be visible when the viewport becomes narrower than the page content. For a container that is not responsive, that means a width of 970px. Also, in this case, navbars won’t collapse in mobile views, as we’ll describe later.

These are simple examples to demonstrate the basics of Bootstrap. To see the full potential of the grids, check out Bootstrap’s Grids documentation.

Bootstrap Web Development: Templates and UI Components

We have now answered the question “What is Bootstrap?” Let’s add detailed component examples to our Bootstrap tutorial to see Bootstrap’s improved development experience in action.

Bootstrap comes bundled with basic HTML and CSS design templates that include many common UI components. These include Typography, Tables, Forms, Buttons, Glyphicons, Dropdowns, Buttons and Input Groups, Navigation, Pagination, Labels and Badges, Alerts, Progress Bars, Modals, Tabs, Accordions, Carousels, and many others.

Many of these use JavaScript extensions and jQuery plugins.

These Bootstrap templates are available as well-factored CSS classes that you can apply to HTML to achieve different effects. This makes using Bootstrap convenient. By using semantic class names like .success, .warning and .info, these components are easily reusable and extensible. But while Bootstrap uses descriptive class names that have meaning, it isn’t specific about implementation details. All classes can be overridden with custom CSS style and color, but the meaning of the class will stay the same.

Bootstrap Typography

Beginning developers often assume their pure and unstyled HTML will look the same across all browsers. Unfortunately, every browser has its own default “user agent” style sheet applied to the HTML, and no two browsers have the same defaults. For example, heading font sizes are not consistent across browsers, some unordered and ordered lists have left margins and others have left padding, browsers apply custom borders and padding to the HTML body, and buttons render differently across browsers. To address all these inconsistencies, different CSS “reset” rules define consistent style defaults.

Bootstrap brings more goodies to table besides pure CSS reset. It comes with normalize.css, an HTML5-ready alternative to CSS resets, and it also has some well-designed defaults of its own. For example, Bootstrap sets the global default font-size to 14px, with a line-height of 1.428. The default font is changed to Helvetica/Arial, with sans serif fallback. These styles are applied to the <body> and all paragraphs, with the addition that <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

Besides these defaults, customizable styles for standard HTML tags bring more consistency to the text, such as highlighted text (<mark>), deleted text (<del> and <s>), underlined text (<u>), small text (<small>), and bold text (<strong>). Alignment classes help to arrange content on the page more easily by using .text-left, .text-center, .text-right, .text-justify and .text-nowrap classes. There are also predefined styles for block quotes, and unordered and ordered lists, with inline options, to name a few. For a full list, head to the Bootstrap Typography page.

Bootstrap also makes it possible to use, for example, heading styles by using either the <h1> tag, or the .h1 class. The latter will match the styling of the <h1> heading but will allow the text to be displayed inline.

Bootstrap Styling

Forms

Forms have come a long way over the years. Today, using a web form is one of the most common activities performed while browsing. While HTML5 introduced a number of new form attributes, input types, and other helper elements, browsers haven’t done much to visually improve forms. This is one area where Bootstrap really shines because aligning and styling labels and inputs, validating forms, and showing error messages can be tricky without some help.

First, Bootstrap sets all textual input elements, like <input>, <textarea>, and <select>, to 100% width of the parent form element. It also gives you the ability to choose between inline forms, which will render multiple labels and input fields in the same line, by using the .form-inline class, or horizontal forms, which use grids to align each input in its own row, by using the .form-horizontal class. If you need to place plain text next to a form label instead of the input field, you can use the .form-control-static class to make it match the visual look of the form.

Maybe the greatest feature that Bootstrap brings to forms is validation styles for error, warning, and success states. These can be applied using the .has-warning, .has-error, and .has-success classes, respectively. Combining this with icons that can be placed inside the input forms, we can get quick and effective form validation effects, without using any error text message.

The following code snippet will generate an input field with an @ sign, to indicate that we are looking for an email, and with a warning icon and a yellow outline that indicates that there is something wrong in the input field:

<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning">Email address input field with warning</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputWarning" aria-describedby="inputGroupWarningStatus">
  </div>
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupWarningStatus" class="sr-only">(warning)</span>
</div>

Bootstrap Input Field

Again, we have only scratched the surface here. For more examples, see Bootstrap’s Forms documentation.

Images and Icons

Images in Bootstrap can be made responsive using the .img-responsive class. This will apply max-width:100%; height:auto; and display:block; to the image in question, so it scales to the parent element.

Besides making images responsive, we can also add different effects. For example, we can apply rounded corners with the .img-rounded class, and we can shape the image into a circle with .img-circle or into a thumbnail with .img-thumbnail.

Older versions of Bootstrap come bundled with over 260 glyphs in font format, from the Glyphicons Halflings set. Jan Kovařík, author and designer of Glyphicons, has made them available for free under the same license as Bootstrap. Font icons have many advantages over plain raster images, particularly that they are scalable. They can also be easily customized using CSS, so manipulating size or color, or adding a drop shadow is a breeze.

Current versions of Bootstrap offer the Bootstrap Icons library, as well as suggested alternative libraries. Visit the Bootstrap Icons page for more information.

Buttons, Button Groups, and Button Drop-downs

Buttons are one of the things every browser renders differently. This is a problem if you want to have consistent design across all browsers. Luckily, Bootstrap has an elegant solution for buttons. Besides making them consistent, Bootstrap provides a lot of variations to play with. You can apply the .btn class to <a> and <input> elements. You can group a series of buttons into a single line using the .btn-group class on the parent <div>. With a little help from JavaScript, you can create radio- and checkbox-style behaviors on buttons. Or you can turn buttons into drop-down menus by placing them within a .btn-group and providing the proper menu markup of an unordered list of items.

The navigational bar, or navbar, is a Bootstrap component designed specifically to build the primary navigation menu of a website. On big screens, it is displayed horizontally; on small and mobile screens (those below 768px), it transformed into a “hamburger” menu.

Under the hood, navbar is an unordered inline list of menu items, with additional HTML elements that are added as desired. Among the possible additions are branding (either text or logo), form items such as a search bar, and menu drop-downs. Two styles are available to choose from out of the box: light and dark, inverted. Items in the navbar can be aligned left or right by applying .navbar-left or .navbar-right classes, respectively.

Navbars can have four position behaviors. The default float position uses buffer space; the full-width static navbar scrolls away when the user scrolls down the page, and the fixed navbar, which can be either on the top or the bottom of the window, is always visible on the page, no matter where the user scrolls.

Delivering Improved User and Developer Experiences With Bootstrap

This Bootstrap tutorial covers only a few of the great components that put Bootstrap ahead of similar frameworks, libraries, and toolkits. With Bootstrap, a few simple CSS classes are all it takes to build a fully responsive and beautiful front end quickly and easily. It’s a great starting point for your next big project or startup.


Further Reading on the Toptal Engineering Blog:

Understanding the basics

Bootstrap is a potent front-end framework used to create modern websites and web apps. It’s open-source and free to use, yet features numerous HTML and CSS templates for UI interface elements such as buttons and forms. Bootstrap also supports JavaScript extensions.

Software engineers use Bootstrap for a number of different reasons. It is easy to set up and master, it has a lot of components, a good grid system, styling for many HTML elements ranging from typography to buttons, as well as support of JavaScript plugins, making it even more flexible.

Bootstrap is great for creating layouts, as its responsive CSS is designed to conform to different devices. It can be employed to ensure consistency, eliminate cross-browser issues, and so on.

A Bootstrap theme is a package containing CSS, HTML, and JavaScript code used for styling. Bootstrap themes also feature various UI components and page layouts that can be employed to create websites. You can think of them as website templates created with Bootstrap in mind.

Comments

comments powered by Disqus