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.