Join Jen Kramer for an in-depth discussion in this video Customizing Bootstrap using Bootstrap's customization screen, part of Bootstrap 3: Customizing with LESS.
One of the ways you can customize Bootstrap is by using this very long, look at that scroll bar, super long, customization screen. Starts with the Less variables here, or just I don't know, an eighth of the way down the page. And it continues on for about 12 miles. Absolutely everything you ever wanted, you can customize here. This screen has up sides and down sides. On the up side, the screen is great for customizing whatever components you want included in your Bootstrap download. Those are up here at the top of the screen.
On the downside, you can customize pretty much every color and variable with Bootstrap right on down here, with the Less variables. As you will see in a minute, this screen is roughly the equivalent of the variables file in the Less files. While it's very easy to change values on the screen, what happens when the next version of Bootstrap comes out and you want to download it? You'll have to take careful notes on what exactly you've changed on the screen so you can repeat it again later. That's also true for customizing your Bootstrap download.
You'll need to remember what you didn't download so you can repeat this again when the new version of Bootstrap comes out. However, for the colors and fonts and padding and so forth that you can change on this download screen, you are much better off working with the Less or Sass files, rather than trying to make your customizations here.
- Setting up your working environment for Bootstrap and LESS
- Understanding the LESS file structure
- Creating and manipulating LESS variables
- Working with LESS mixins
- Creating custom styles using mixins and variables