Customizing the Base CSS using LESS variables

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+
  &amp...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning Bootstrap

By : Shenoy

Learning Bootstrap

By: Shenoy

Overview of this book

Customizing the Base CSS using LESS variables

Learning Bootstrap

By : Shenoy

Learning Bootstrap

By: Shenoy

Overview of this book

Customizing the Base CSS using LESS variables

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access