3

I want to set up bootstrap like that Twitter Bootstrap Customization Best Practices I want though the responsive version. I found this thread Twitter Bootstrap responsive css is not generated form the less files but it's not clear to me how can I set up bootstrap files so I can customized it using the responsive version ?

Community
  • 1
  • 1
Petran
  • 7,677
  • 22
  • 65
  • 104

2 Answers2

1

If you are wondering how to use less to customise the bootstrap css and then use this in your project, then there are basic approaches.

You can combine your customisation into the base bootstrap css files and import this into your project, or you can leave the bootstrap files untouched, create a second css file for your customisation and import this into your project as well, after the bootstrap css.

Overwrite vs override.

From the first link you give, you can see that both approaches have their supporters.

I've usually used the first method, and this is what I've done.

  • Download a copy of the less files, here is one source, and add to your project files
  • Open the bootstrap.less file. You'll see that it orchestrates everything and imports the individual less files
  • Create theme-variables.less and theme-css.less files and save to this less folder
  • You need to import these files in the right sequence. Adding the variables file at the end of the Core variables and mixins block with @import "theme-variables.less"; and the theme file at the end of the Base CSS block with @import "theme-css.less"; works for me. Depending on what you are customising, you may need to play with this a bit

That's basically it. Edit your custom files, compile bootstrap.less, and import the resulting bootstrap css file(s) into your project.

Naturally at the start you want to keep good backups incase something goes wrong, and likewise when you upgrade Bootstrap.

Good luck!

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
1

First download form https://github.com/twbs/bootstrap less version

How to use Less and less compilers http://lesscss.org/ http://winless.org/

Bootstrap tutorial http://www.w3resource.com/twitter-bootstrap/tutorial.php

Jeromy French
  • 11,812
  • 19
  • 76
  • 129
ShibinRagh
  • 6,530
  • 4
  • 35
  • 57