How to Customize Button Styles in Bootstrap ?
Last Updated :
30 Apr, 2024
Customizing button styles in Bootstrap involves modifying predefined classes or creating custom CSS rules. This allows alignment with brand identity, and differentiation, and ensures design consistency across projects.
We can customize button styles in Bootstrap using different approaches as listed below:
Using internal styling
Customizing button styles using internal styling involves defining CSS styles within the <style> tag in the <head> section of your HTML file. This allows you to override the default Bootstrap button styles and create your own custom look for buttons.
Example: Below is the example of customizing button styles using internal styling in HTML.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Customize Bootstrap Buttons</title>
<style>
.container {
margin-top: 10%;
text-align: center;
}
.heading {
color: #1e7e34;
}
.custom-primary {
background-color: #28a745;
border-color: #28a745;
margin: 5px;
}
.custom-primary:hover {
background-color: #218838;
border-color: #1e7e34;
}
.custom-secondary {
background-color: #dc3545;
border-color: #dc3545;
}
.custom-secondary:hover {
background-color: #c82333;
border-color: #bd2130;
}
</style>
</head>
<body>
<div class="container">
<h3>Using Internal Styling</h3>
<div class="one">
<button type="button"
class="btn btn-primary
custom-primary">
Custom Primary</button>
<button type="button"
class="btn btn-secondary
custom-secondary">
Custom Secondary</button>
</div>
</div>
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous">
</script>
</body>
</html>
Output:
Button Styles in Bootstrap Example Output
Using Bootstrap Utility classes
In this approach, we will use Bootstrap utility classes to customize button styles. These classes are a set of predefined CSS classes provided by the Bootstrap framework. These classes allow us to quickly apply styles to elements without having to write custom CSS.
Example: This example shows the use of utility classes to customize the buttons style.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Customize Button Styles with Bootstrap Utility Classes
</title>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
</head>
<body>
<div style="text-align: center; " class="container">
<h1 style="color: green;">GeeksForGeeks</h1>
<h2>Using Utility Classes</h2>
<button class="btn btn-primary btn-lg">
Large Primary Button
</button>
<button class="btn btn-primary btn-sm">
Small Primary Button
</button>
<button class="btn btn-secondary btn-lg">
Large Secondary Button
</button>
<button class="btn btn-secondary btn-sm">
Small Secondary Button
</button>
<button class="btn btn-success">
Success Button
</button>
<button class="btn btn-danger">
Danger Button
</button>
<button class="btn btn-warning">
Warning Button
</button>
</div>
<!-- Link Bootstrap JavaScript (optional) -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script
src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity=
"sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous">
</script>
<script
src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous">
</script>
</body>
</html>
Output:
Button Styles in Bootstrap Example Output
Similar Reads
How to create an outline button in Bootstrap 4 ? Before performing with outline classes of bootstrap just know about a little bit of button outline. An outline on buttons means to give an outline around the buttons. This '.btn-outline' class removes all background colors or styles from the button for giving the Effective, lighter, and highlighter
4 min read
How to customize the appearance of a button in React Bootstrap? While developing the ReactJS forms, and submission applications, we need to use Buttons to perform different functions. These buttons can be either created using HTML tags or by using the react-bootstrap library Buttons. In the react bootstrap library there are classes through which the button is be
4 min read
How to create block level buttons in Bootstrap ? In many websites, we notice that there are big block level buttons used to perform some work when the user clicks on them. This is used to trigger some functions or redirect the user to a different link. Block buttons are the responsive stack of buttons of full width. We will use the below approach
2 min read
How to Customize Bootstrap 5? To customize Bootstrap 5, adjust its appearance by using custom CSS to modify default styles or by utilizing Sass variables to customize design elements like colors, typography, and spacing. These methods enable you to control your project's visual presentation. Table of Content Custom CSSModifying
2 min read
How to Create "Add to cart" Button in Bootstrap? Creating an "Add to Cart" button in Bootstrap is simple and helps improve the shopping experience on your website. Bootstrap has ready-made styles that make it easy to create buttons that look good and work well on all devices.Approach to creating an "Add to cart" Button in BootstrapUse a Bootstrap
2 min read
How to get circular buttons in bootstrap 4 ? It is an open source toolkit for developing with the HTML, CSS, and JS. It includes several types of buttons, styles, fonts each of them serving its own semantic purpose which is predefined, with a few extras thrown for more control. You can use Bootstrap custom button styles to create your buttons
2 min read