How to Customize Bootstrap for your Website

PressTigers

How to Customize Bootstrap for your Website

July 20, 2016
Leave a comment

Bootstrap, a popular framework for front-end development, is used to minimize the work load involved in creating custom, responsive, grid based web applications. It contains a built-in 12 grid system, HTML elements and jQuery plug-ins. Millions of websites choose Bootstrap due to its flexible structure and extensive customizations. In this article, you will learn a simple way to customize Bootstrap for your website.

Assuming that you have already added Bootstrap CSS to your project, here are the steps to customize bootstrap:

Add a CSS file along with Bootstrap CSS to the style folder in your project. Let’s name it as custom.css

Include this custom.css file in your <head> section after Bootstrap CSS as follows:

<head>
<link href=”/css/bootstrap.min.css” rel=”stylesheet” media=”all” />
<link href=”/css/custom.css” rel=”stylesheet” media=”all” />
</head>

<head>

</head>

Customization

Let us also assume the following visual example moving forward:

How to Customize Bootstrap for your Website-1

For modifying bootstrap or adding an extra styling, custom.css file is used. Let’s customize jumbotron – a bootstrap element to add/display key content of the web page and style it according to the requirement:

.jumbotron {
    padding: 15px;
    margin-bottom: 30px;
    border-radius: 0;
    background-color: #757575;
}

.jumbotron {

padding: 15px;

margin-bottom: 30px;

border-radius: 0;

background-color: #757575;

}

It will be displayed as follows:

How to Customize Bootstrap for your Website-2