# Building Fast, Consistent UIs with Bootstrap 3

> How to produce decent-looking interfaces without a designer: Bootstrap 3's grid system and ready-made components.

- Published: 2014-09-07
- Category: Interface
- Tags: CSS, Bootstrap
- Reading time: 3 min read
- Source: https://www.muhammetsafak.com.tr/en/blog/building-fast-consistent-uis-with-bootstrap-3/
- Language: en-US
- Author: Muhammet Şafak

---
I'm a back-end developer. I don't shy away from writing CSS, but spending hours fine-tuning pixel-perfect layouts isn't exactly my strong suit. On client projects I often work without a designer — which means the UI falls on me too.

In that equation, **Bootstrap 3** has been a serious time-saver. I want to give a quick overview of what it does and how I use it. Where the ready-made classes ran out and I had to write my own CSS, keeping it maintainable at scale is something I covered later in [writing CSS with Sass](/en/blog/writing-maintainable-css-with-sass/).

## What is Bootstrap?

**Bootstrap** is an HTML and CSS component library originally developed by Twitter. Version 3, released in 2013, gave it a solid foundation. It ships with a ready-made grid system, typography defaults, form styles, buttons, a navbar, and dozens of UI components.

You can drop it into any project straight from a CDN:

```html
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
```

Or you can pull it in as a managed package via Composer or Bower.

## Grid System

The foundation of Bootstrap is a 12-column grid. You divide the page into columns using CSS classes:

```html
<div class="container">
    <div class="row">
        <div class="col-md-8">
            Main content (8 of 12 columns)
        </div>
        <div class="col-md-4">
            Sidebar (4 of 12 columns)
        </div>
    </div>
</div>
```

`col-md-8` and `col-md-4` add up to 12, so they sit side by side. The `md` prefix stands for "medium" and applies to desktops and wider. `col-sm-*` targets small screens, `col-xs-*` targets phone-sized viewports.

When the screen shrinks, columns automatically stack vertically. You get a responsive layout without writing a single `@media` query by hand.

## Responsive Design

Bootstrap 3 is mobile-first. You can stack multiple breakpoint classes on the same element to define different layouts at different screen sizes:

```html
<div class="col-xs-12 col-sm-6 col-md-4">
    <!-- Full width on phones, half on tablets, one-third on desktop -->
</div>
```

Those three classes together cover all the major breakpoints. Mobile compatibility comes for free — no extra work required.

## Ready-Made Components

Beyond the grid, Bootstrap provides a library of common UI elements:

**Navigation bar:**

```html
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">Logo</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </div>
</nav>
```

To collapse into a hamburger menu on mobile you also need the `navbar-toggle` button and the `collapse navbar-collapse` wrapper — Bootstrap's JavaScript bundle handles the rest out of the box.

**Forms:**

```html
<div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email" placeholder="example@site.com">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
```

The `form-control` and `btn btn-primary` classes immediately style the field and button with sensible defaults: colors, borders, and focus states included.

**Alert boxes:**

```html
<div class="alert alert-success">Operation completed successfully.</div>
<div class="alert alert-danger">An error occurred.</div>
```

These feel like small wins, but they come up in every project. Reaching for a class instead of writing it from scratch adds up to real time saved.

## Customization

Bootstrap's default look is recognizable — it can make sites feel samey. To work around that:

- If you want to change the color palette, you can override Bootstrap's LESS variables.
- Or you download the Bootstrap CSS and layer your own overrides in a separate stylesheet on top.

On most projects I use Bootstrap as the base and keep client-specific colors and fonts in a separate CSS file. Iterating quickly on top of this foundation beats designing from scratch every time.

One thing to watch out for: CSS specificity. When you try to override Bootstrap component styles, the framework's own rules can win. If a style isn't applying as expected, open the browser's developer tools and check which rule is taking precedence. I minimize this by loading my custom stylesheet separately, after Bootstrap.

## The Value for a Back-End Developer

As a back-end developer with limited design skills, Bootstrap gives me a baseline guarantee: the UI will at least look consistent and functional. I can put together a prototype to show a client in half a day, and it holds up until a designer comes on board.

A functional form, a table, a listing screen — these come together very fast with Bootstrap. The speed is especially valuable when you need to show a client "here's how the flow will work" before anything is finalized. Writing CSS from scratch is a discipline in its own right; Bootstrap lets you skip that and still land at an acceptable UI.

It's not the right fit for every project. If a client needs a distinctive visual identity, Bootstrap can feel constraining. But for projects where speed matters and functionality comes first, this is still my go-to choice.