loading...

Bootstrap 3 – Overriding with custom CSS

The easiest way to customize Bootstrap is to create your custom CSS file where you will put your own CSS code. The link to this customized CSS file needs to be added after the Bootstrap CSS in your HTML document for it to override the Bootstrap CSS declarations.

Look at the following code to understand it better:

<!DOCTYPE html>
<html>
<head>
<title>BootStrap with Packt</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest Bootstrap CDN CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<h1>Welcome to Packt</h1>
<button type="button"  >PACKT LESSONS</button>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

In the preceding code example, we did not include the external style sheet. The output of the code on execution will be as follows:

Consider the same preceding HTML code. Let’s link it to an external style sheet custom.css. On adding the link, the code will look like this:

<!DOCTYPE html>
<html>
<head>
<title>BootStrap with Packt</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest Bootstrap CDN CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="custom.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Welcome to Packt</h1>
<button type="button"  >PACKT LESSONS</button>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

Tip

The CSS file should be in the same folder as the HTML document. If not, then you need to specify the location of the style sheet.

We will now write the code for the custom.css file:

#packt   {
  padding: 19px 30px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
  border-radius: 35px;
  color: red
}

Once we save this custom.css file, the output of the code will be as follows:

As you can see, the PACKT LESSONS button that was referenced by the packt ID will be displayed differently according to the border-radius padding and the red color assigned to it.

Tip

Placing all your customizations in your own CSS files instead of modifying the Bootstrap files is a good practice. This approach helps you, particularly when a new version comes along and you are upgrading Bootstrap, as all you need to do is replace the Bootstrap files in your project folder by the latest ones (provided the newer versions in the future support backward compatibility).

Comments are closed.

loading...