CSS: How do I change bootstrap LESS code.less source code to customize my code coloring?

Question

Currently, the theme I am using is based on the bootstrap.min.css from maxcdn online, but I can't seem to find the code.less source code anywhere to edit so that I can change the coloring of my inline code and the font type used.

I have written a custom.css file to overlay the original bootstrap css with the following option:

pre {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

// Inline code
code {
  padding: 2px 4px;
  font-size: 90%;
  color: #000000;
  background-color: #eff0f1;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

// Enable scrollable blocks of code
.pre-scrollable {
  overflow-x: scroll;
}

But nothing has changed. Is there a way I could actually let the changes I want kick in? My website is currently based on Jekyll.

This is the source code where I put custom.css over the original bootstrap css: https://github.com/kwotsin/kwotsin.github.io/blob/master/_includes/head.html

Am I doing it the right way?

Answer 1

You basically have 3 option:

Option:1 Download the bootstrap source code less.css . modify the file and use it.

Option:2 Place !important beside the css that you want to override in your custom.css

Option:3 Go to developer tools identify the portions of less.css which you want to override and use your own id with those elements. After that style them in your own css file.

Answer 2

You have to install the source code version of bootstrap locally and compile the less-files yourself - for example with grunt.

Take a look at the Bootstrap documentation .

Answer 3

确保自定义CSS文件位于您要在“标题”部分中尝试修改的bootstrap链接下