Extending Bootstrap

Best practices

CSS and JavaScript files to include and why

bootstrap.min.css: It is the minified version of the Bootstrap CSS styles
html5shiv.js: It adds HTML5 support to older browsers
respond.min.js: It adds media query support to older browsers

There are a lot of best practices when it comes to customizing Bootstrap themes. To avoid the most common mistakes that developers make, the following is a list of the most important things to be kept in mind:

Use similar selectors when overriding styles: You should always use the same selector when you are overriding a style to make sure that the selector is efficient enough. You can use tools (for example, Chrome development tools) to find the correct selectors.
Make sure that the files are included in the correct order: Remember that you always need to include your overrides after the original styles; otherwise, they will not work.
Please do not modify the source files: It is considered bad practice to modify the source files directly because it makes both maintaining your customizations and upgrading the source files difficult, sometimes even impossible. There are no exceptions in this case.
Do not use !important unless absolutely necessary: You should avoid using !important in your styles because it usually means that your selector is either wrong or not efficient enough. However, there are some rare cases where you need to use !important to override a style. If you do, try to learn why you have to use it before doing so. Read More.
Use classes to style elements and IDs for binding JavaScript functionalities: This way, you can distinguish between the attributes used to define styles for an element and the attributes used to identify it through JavaScript.
Learn how Cascade works: You can improve your styles quite a bit if you understand how CSS Cascade works, that is, how browsers parse your styles and determine which styles are more significant than others. Read More

Building Bootstrap from the source

Before you can build Bootstrap from the source, you need to download the source from the project website. Once you have downloaded the source and opened the package, you will see that the source package contains a large number of directories and files. You need to perform the following steps to build Bootstrap from the source:

Unzip the package you downloaded in a location where you can easily find it. Create a new folder named less for the LESS files in your project and a bootstrap folder within that folder. Copy the contents of the less folder from the files that you just unzipped, and place it in the bootstrap folder, which is inside the less folder.
Create an entry LESS file called main.less under the less directory and add the following content:
```
@import "bootstrap/bootstrap";
```

Customizing Variables

The easiest way to customize Bootstrap through LESS is to customize its variables. To do this, you need to perform the following few modifications to your project:

Create a new LESS file named custom-variables.less in the less directory. Open main.less and add the following line to import the new file:

@import "custom-variables";

You can now override Bootstrap variables easily by redeclaring them in custom-variables.less, and Bootstrap will use the overridden values instead of the defaults when it is compiled into CSS.

.content {
  .make-md-column(9);

  article {
    margin-bottom: 40px;
  }
}
.sidebar {
  .make-md-column(3);
}
.sidebar-avatar {
  display: block;
  margin-bottom: 20px;
  max-width: 100%;
}
.sidebar-bio {
  color: @gray;
}

Add the HTML and CSS for the sidebar and used two mixins to turn the .content and .sidebar elements into grid elements. A grid in Bootstrap consists of 12 columns by default, so adding .make-md-column(9) to .content makes it span three quarters; leaving one quarter for the sidebar and adding .make-md-column(3) to .sidebar makes use of the rest of the space.

Tip

In case you have not noticed, your project is fully responsive. You can try resizing your browser window to see how the grid responds when the window size is adjusted.

Bootstrap comes with a large collection of useful mixins, such as gradients, CSS3 properties, various components, and grid, for various purposes. All of these are great once you learn how to use them; they are listed as follows:

Gradients: Bootstrap supports many kinds of gradients, such as horizontal, vertical, directional, radial, striped, and both horizontal and vertical gradients with three colours. When you use Bootstrap mixins for gradients, you do not need to worry about browser compatibility because Bootstrap adds all browser-specific rules automatically, even for Internet Explorer 8.
CSS3 properties: Bootstrap comes with mixins for the most commonly used CSS properties, such as box-shadow, transition, transform (rotate, scale, and translate), perspective, animation, backface-visibility, box-sizing, use-select, content-columns, and hyphens. These CSS3 mixins also work across all browsers.
Component: Component-specific mixins are handy when you want to perform more advanced customizations to Bootstrap components. Components such as panels, alerts, tables, list groups, buttons, labels, the navbar, and progress bar have their own mixins in Bootstrap.
Grid: Bootstrap uses mixins to build its grid. It is considered as a good practice to avoid vendor-specific classes such as .col-md-6 in your HTML in order to allow for the separation of structure and layout. You can achieve this by adding custom classes to your elements and using mixins such as .make-md-column(6) to make them act like grid columns instead.

Custom breakpoints

With custom breakpoints, you can control how the grid is floated on different devices. Bootstrap uses media queries to define its breakpoints, and each breakpoint can easily be customized by changing the value of its associated LESS variables.

Make some changes to the breakpoints in your Bootstrap project. Open custom-variables.less and add the following lines of code:

@screen-xs-min: 500px;
@screen-sm-min: 790px;
@screen-md-min: 1020px;
@screen-lg-min: 1240px;