Mark Otto, creator of Bootstrap, explains how to get started with the frontend toolkit, and how to transition from vanilla starter template to distinctive page.
In this tutorial, Bootstrap creator Mark Otto will walk you through the basics of Bootstrap: what’s included, how to use it in any project, and how to best customise a typical Bootstrap template.
"Using Bootstrap doesn’t have to stop with its default components and styles," he says. "With a little HTML and CSS, we can do just about anything. So, let’s dive in!
Getting started
While all CSS in Bootstrap is written in LESS, we will only be using the fully compiled CSS (and a sprinkling of JavaScript). To best showcase how to use Bootstrap we’ll be creating a brand new example template to be included in a future release of the project.
We’ve got everything you’ll need for this project wrapped up in a separate zip, which you can download here. Upon opening, you’ll find Bootstrap’s compiled CSS, compiled JavaScript, and our new template in various stages.
The Bootstrap docs are another example of how to customise on top of the framework to create a more appealing site, and give it your own distinct flavour
We need to put together the most basic version of our page template: HTML scaffolding to render the page and link to the Bootstrap assets.
This is the most basic form of a Bootstrapped web page: simple HTML with just the CSS included. That can work fine in some cases, but what we really want is a page filled with a few Bootstrap components, some custom content and a few design tweaks to top it off.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
It’s time to add some Bootstrap components. We’ll swap our ‘hello world’ message for a nav bar and carousel, and we’ll use the grid system to write a three-column section for our marketing copy.
The default Bootstrap carousel before customisation features a few of the more obvious and contrasting styles for usability and readability
Do note that we’re also simplifying the HTML in this post, but the complete code is in the downloads.
Creating columns in Bootstrap is easy with the built-in 12-column grid system. To use it, create a .row to house the columns. For each column of content, specify how many grid units the column should span.
In this case, we want three columns spanning four grid units, so we have three instances of .span4. The grid system enables you to make any layout to house just about any content – just create the columns and add in your content.
Below the columns we’ll add our own new component, .featurette (using some of the coding best practices found in Bootstrap), to house some larger marketing messaging and visuals.
You’ll see we have a base class, .featurette, for the core component. Within that, we’ll use prefixed classes such as .featurette-image and .featurette-heading, to easily target elements within our component. Prefixed classes ensure shorter CSS selectors, fewer lines of code, and smarter categorical naming schemes. With these basics in place for our new component, it’s time to move on.
Customise with CSS
OK, so we’ve Bootstrapped our new HTML page, utilising some of the ready-made components and grid system, as well as writing our own component. Next let’s customise the default carousel and nav bar a bit. We’ll stretch out the carousel and style each slide, then increase the height of the nav bar and layer it on top of the carousel.
There are two basic ways to customise Bootstrap components: modifying HTML and adding additional CSS. The best implementations do both, and this tutorial is no different. If you recall from our HTML, we wrapped the nav bar in its own container (for centring on the page) while the carousel sits on its own.
This is important because it enables us to easily position them while enabling more customisation of the carousel slides. Finagle the nav bar into position by targeting its container, .nav bar-wrapper with a bit of CSS:
We use position and z-index to render the nav bar on a higher plane than the carousel, and a negative ‘margin-bottom’ to pull up the carousel. We’ll also increase the padding on the nav bar links to make it a bit taller.
.nav bar .brand, .nav bar .nav > li > a { padding: 15px 20px; }
At this point we have only skeletal markup and content with basic Bootstrap styles. This lets you apply your own style to the bare bones of the framwork
Now, we have to align the text in each carousel slide with the rest of the page. By default, the carousel includes only an <img> for the background of each slide and a <div> to house the caption.
The carousel will stretch to fill its parent as we set width: 100%; in the Bootstrap core. To align the custom content within each slide to the rest of the page, add a <div class=“container”> around the caption. Once done, the slide markup should look like this:
With the modifications complete, we have the slightly restyled nav bar on top of our full-width, customised carousel – and it’s looking pretty nice already
To make the carousel look like our final example, we’ll change the next and previous controls and customise the captions. The CSS is lightweight, involving some light overrides and modifications.
With a few tweaks to the text within the caption, we have our finished carousel. Lightweight HTML changes and around 20 lines of CSS give us a custom look, while maintaining all the awesomeness of Bootstrap’s default component.
Now it’s time to write our own component, the featurette. We already have almost all the HTML written, so let’s just get some basic styles in place. Our inspiration for this component is marketing content like that of Apple: big headings, lightweight text and some large visuals.
.featurette-divider { margin: 80px 0; /* <hr> between each */ } .featurette { padding-top: 120px; overflow: hidden; /* Clear floats */ } .featurette-image { margin-top: −120px; /* Vertically center image with the text */ } .featurette-heading { font-size: 50px; font-weight: 300; line-height: 1; letter-spacing: -1px; } .featurette-image.pull-left { margin-right: 40px; } .featurette-image.pull-right { margin-left: 40px; }
Thousands of sites using Bootstrap – like those featured above – make the best use of the toolkit by combining default styles with their own flair
And that’s it really. Given Bootstrap’s default styles, the amount of custom CSS we have to write for a new component is quite low. Bootstrap’s default typography styles such as .lead provide us with great looking marketing text while utility classes like .pull-right enable super fast floats. Without these, we’d have to rewrite common CSS for each custom component.
Mark Otto is creator of Bootstrap and designer specialising in HTML, CSS and design systems.
