Member Avatar for rouse

I am playing with LESS and Bootstrap again, and was having lots of fun making it work with the Netbeans 7.4 IDE. When I set about some practical work, like changeing the background color of the site I realize I could not do this even after some web research. So I hope some on here knows how to do this.
WBR
0

  • 3 Contributors
  • 3 Replies
  • 104 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by rouse

Dani AI

Generated

Good call getting into the LESS source. For Bootstrap 3 the easiest, safest ways to change a site-wide background are either to override the appropriate LESS variable and recompile, or to add a small stylesheet that overrides compiled Bootstrap rules and is loaded last. As pointed out, the browser only reads CSS, so a compile step is required if you edit LESS directly. See Bootstrap's customization guide and the variables file for the actual variable names and relationships (Bootstrap customize and variables.less on GitHub).

A compact workflow that works well in NetBeans or any build tool:

Create a small LESS file that sets your color(s) first, then imports Bootstrap so the variables are picked up:

/* custom.less */
@body-bg: #f5f7fa;
@import "bootstrap.less";

Compile that into CSS (for example with the Less compiler):

lessc custom.less custom.css

Include the generated custom.css in place of, or instead of, the default Bootstrap CSS.

Common pitfalls and quick fixes:

  • Caching: force-reload the page or clear cached CSS.
  • Load order: make sure your compiled CSS is the file the page loads (and not an older CDN copy).
  • Specificity: a later rule or a component-level background may override the body color; inspect the element in devtools to see which rule wins.
  • If you only need a one-off tweak, a small override CSS loaded after Bootstrap (e.g., body { background: #... }) is fine, but it will not change component colors that come from LESS variables.

If using NetBeans 7.4, use a LESS plugin or an external watcher to compile on save so you see changes immediately. If something still looks wrong after recompiling, inspect computed styles to find what is overriding the value.

Recommended Answers

All 3 Replies

Member Avatar for Member #120589

It would help if you showed the CSS/Less that you're using. You need to produce the .css file from the .less files in a live environment.

Member Avatar for dany12

What version of bootstrap?
Do you use a div class="col-md-12"?
On a div class="row"?

Member Avatar for rouse

I am using 3.0. I had a breakthrough last night and was ablet to understand how to use variable.less to alter these traits.
Thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.