how to change bootstrap primary color?
July 06, 2022Hi Friends đź‘‹,
Welcome To aGuideHub! ❤️
To change the primary color, put .btn-primary { background-color: red;} class, this will show the primary color change on a page.
In this tutorial, we will learn how to change primary color in bootstrap with code example.
There is no need to use !important in custom CSS, unless you are overriding one of the Bootstrap utility classes. The CSS Specification always works for one CSS class to override another.
Suppose for example you want to change the default blue "primary" color in Bootstrap to another color (eg. red). You can make a simple CSS override for the .btn-primary button like this…
.btn-primary {
background-color: red;
}Table of contents
- Includes bootstrap view
- Includes bootstrap library
- Includes css in html page
- Define its class name
Step 1: Includes bootstrap view
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Step 2: Includes bootstrap library
First of all, load the Bootstrap framework CSS into the head tag of your webpage.
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">Step 3: Includes css in html page
Here, we are using in css class to change primary color.
.btn-primary {
background-color: red;
}Step 4: Define its class name
After that, create the button right side in with a class name .text-right.
<button class="btn btn-primary">aGuideHub</button>Example.
Let’s look at the following example to understand how it basically works:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.btn-primary {
background-color: red;
}
</style>
<title> bootstrap </title>
</head>
<body>
<h1>Change primary color in bootstrap</h1>
<button class="btn btn-primary">aGuideHub</button>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>Check the output of the above code example.
All the best đź‘Ť