How to customize Bootstrap's CSS

It's 2015 now and there are lots of free CSS frameworks. It's worth using a framework since it can help you a lot. Also making a website responsive has never been so easy!

Of course, it's not ALWAYS necessary to use a framework. Sometimes, you don't need it and adding it will just make your project messy. Some of the pros of those CSS frameworks are that

  • You don't need to write everything from scratch every time,
  • Support most of the browsers
  • Most of them have comprehensive documentation (and the open source one have communities that will help you right away!)
  • You can learn CSS while using the framework (which, imo, is a big plus!)

But just keep in mind that not every project you start needs a CSS framework (they include lots of handy stuff) that you might never gonna use in a small project. Most of the frameworks have some sort of builders, which let you choose what components/styles you need.

So, let's get to the fun part. First, we need to download a fresh copy of Twitter Bootstrap:

Then we have to create a new .css file, let's call it main.css. This is an empty file which we will include in our page. Basically, you will need to create the html page and link all the css files.

The default bootstrap css file (bootstrap.min.css) HAS TO BE LINKED BEFORE YOUR CUSTOM CSS.

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">

You should never edit the css files provided in Twitter Bootstrap directly! You should only override the properties with your styles in the new css file we created.

Let's say that you did not like the rounded corners on the inputs that have .form-control. Open main.css and put the following css:

.form-control {
	border-radius: 0px;

And since our file is applied after the default bootstrap.css, we have this as a result:

See the Pen XJGyNm by Ivanka Todorova (@FakeHeal) on CodePen.

Basically, you should follow those simple rules:

  1. Do not change the default files directly.
  2. Link your css AFTER linking the default files.

If you want to create a complete custom theme based on Twitter Bootstrap, you might find these links useful.

  • - A comprehensive list of the elements in Bootstrap that can be customized
  • Bootswatch - The default theme provided by Twitter Bootstrap as well as othere themes.

unsplash-logoArash Mehri provided this awesome picture!

Show Comments