Customizing Bootstrap

Bootstrap comes with a plenty of nice and pleasing styles for its components and you can use them to style your website. But if you need a distinctive look of your own for your website, then that is also possible with bootstrap. You can override the bootstrap defaults and apply different styles and colors to your design. You just have to put a teeny tiny effort into it.

The first step in customizing bootstrap for your website is to create a custom CSS file into your project CSS folder, preferably so for the sake of organization.

Now, in your HTML, load your custom.css file after you have loaded the bootstrap CSS stylesheet. It is important that you write the code to load your custom CSS after bootstrap CSS file in order to override the bootstrap defaults.

To add or modify the styles and colors using your custom CSS file all you need to do is find the element you want to customize and write the code for the changes you want in the custom CSS file.

Customizing various components of BootStrap

Alert

Alerts can be styled using four contextual classes- .alert-success, .alert-info, .alert-warning, .alert-danger. All these classes come with default background color, text color, text alignment etc. So let’s try and modify these defaults.

Create an alert box with the contextual class .alert-info. This class provides the alert box a blue background color and a matching darker blue to the text. In this example, I have targetted the elements with the class .alert, changed its background color to a shade of yellow (#f4e842), a center alignment to the text the alert box takes up to half of the width of the browser viewport, and finally changed its border color to black. It doesn’t look very pretty but gives you the idea of how you can customize your alert box with your custom CSS file.

.alert { background-color: #f4e842; width: 50%; text-align: center; align-items: center; }

So, now let's style a button. Create a button with a color which is not a default and give it a gradient as a background and rounded edges. Let’s also change the border color.

The CSS file would target all the components with the class .btn and change its properties according to the custom CSS file.

.btn { border-radius: 20px; background: linear-gradient(to bottom, #f44259, #fff); border-color: #ef0418; }

In these examples, you targeted an element using the particular class it has. So if you apply this CSS you will get all the elements with the class, let’s say, .btn will get changed. What if there are many buttons on the page and you only need to change maybe one or two of them. This could be done being selective. For example, if you have a button in your page on the jumbotron and outside the jumbotron. You only want to style the button in the jumbotron, then you could type .jumbotron .btn and then the style.

This will only target the button or buttons in the jumbotron.

.jumbotron .btn{ background-color: #f44259; border-color: #ef0418; border-radius: 10px; } <div class="jumbotron"> <h1>this is the title</h1> <button class="btn btn-secondary" type="submit">Button</button> </div> <button class="btn btn-primary button-style" type="submit">Button</button>

Another way of doing it is you can create a class of your own with the specific set of styles and apply that class to the component. For example, a class with name .button-style if applied to a button it will give it a background color of #f44259, border color of #ef0418 and a rounded border. Now, this class can be applied to any of the buttons that you want to customize.

.button-style { background-color: #f44259; border-color: #ef0418; border-radius: 10px; } <button class="btn btn-primary button-style" type="submit">Button</button>

Now that you can customize these components, don’t limit yourself and play around with font weight, font style, font color, padding, background etc.

Customizing Bootstrap Framework

Wait, there’s more. Bootstrap allows you to create and download a custom build entirely. You can go to the customize and build page of the official bootstrap website and customize your bootstrap.

You can select what all components and plugins are needed by you and un-select the components that you do not need since all the components are selected at first. For example, if you won't be using breadcrumbs in your projects at all, you can just untick them. One of the advantages of this other than customization is that you can reduce the size of the files but not adding the components that you do not need.

Now if suppose you want to change the default of a variable that you use pretty often in your project, say text-color which by default is gray-dark, you can change it to any color you want. You can change the defaults of anything and everything. And finally, at the bottom of the page, there is a compile and download button that will download your custom build bootstrap.

Now, since Bootstrap 4 is still in alpha stage, you can’t yet customize and download bootstrap. But not to be disappointed, Bootstrap 4 comes with a _custom.scss file for overriding the values of default variables easily. The default values are in the file _variable.scss. Copy and paste the variables that you need to change from the _variables.scss file into the _custom.scss file and modify the values.

Variable settings for the body element _variable.scss file

$body-bg:       $white !default; $body-color:    $gray-dark !default; $inverse-bg:    $gray-dark !default; $inverse-color: $gray-lighter !default;

Variable default changed in _custom.scss file.

$body-bg:       $gray-dark; $body-color:    $gray-light; $inverse-bg:    $white; $inverse-color: $gray-dark;

Re-compile the sass files to override the default values to the new default values. Be sure to remove the !default flag from the default values we have overridden.