Bootstrap has LESS variables that can be used for components and the default values are listed as follows:
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;
You can change the placeholder
contextual color using the following code:
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}
Bootstrap uses @body-bg: #fff;
and @text-color: @black-50;
for the body background and the text color. You can alter the background or text color by assigning different values for the background color and text color.
You can style your links with your preferred choice by assigning values to the following fields:
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
We will take a look at the following code to help you understand how we can customize the Base CSS using LESS variables:
<!DOCTYPE html>
<html>
<head>
<title> Base Css with LESS </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<style>
#packt {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
hr { background-color: red; height: 1px; border: 0; }
</style>
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
<body id="packt">
<h1> Manipulating Bootstrap Base Css with LESS </h1>
<hr>
<h6> Packt Publishing </h2>
<p>Packt's mission is to help the world put software to work in new ways.</p>
<hr>
<form role="form">
<div class="form-group">
<label for="enterusername"> Enter Email Address as the Username</label>
<input type="email" class="form-control" id="enterusername" placeholder="Enter email">
</div>
<div class="form-group">
<label for="enterpassword">Password</label>
<input type="password" class="form-control" id="enterpassword" placeholder="Password">
</div>
<br>
<div class="form-group">
<label for="filebrowse">Browse to find file</label>
<input type="file" >
</div>
<br><br>
<button type="submit" >Login</button>
</form>
</body>
</html>
The output of the code will be as follows:

As you can see from the preceding code and output, we have not yet defined the style.less
file.
First, copy and paste the less
files from the source code into a file called bootstrap
in the css
folder similar to what we did in Chapter 3, Using the Bootstrap Grid. Then create a style.less
file in the css
folder and copy the following code into the style.less
file:
@import "bootstrap/bootstrap.less";
@font-size-base: 15px;
@font-size-h1: 20px;
@font-size-h6: 45px;
@body-bg: #996600;
@input-bg: #FFFF99;
@btn-primary-color: #00FF33;
@btn-primary-bg: #660000;
In the code, we have changed the value of font-size-base
to 15px
. The font size of headings <h1>
and <h6>
have been changed to 20px
and 45px
respectively. The body background color was changed to #996600
and the input form field color was changed to #FFFF99
. Finally, we changed the color of the primary button to #00FF33
and the background color of the primary button to #660000
. Save the file and covert the style.less
file to style.css
using the SimpLESS or WinLess compiler.
Upon execution, we will get the following screen with all the changes incorporated:

From the preceding code and output, you can see that the Bootstrap styles and the padding styles have been overridden with the style.css
file resulting in a different output. Thus, you can modify most of the Base CSS styles using LESS variables.