I am trying to override the
@grid-float-breakpoint: in the variables.less file. (in order to adjust the collapse width of the top menu)
In my index file i am importing the Bootstrap core files css files with:
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
I am then importing the compiled and adjusted variables files after.
<link rel="stylesheet/less" type="text/css" href="less/variables.less">
Why does my variables.less not override the bootstrap.min.css?
It won't be possible to override the variables that way as they have already been compiled to CSS. Less is a preprocessor so you'd need to override them and then compile and include your compiled css. For this you can use a variety of command line tools (I use http://gruntjs.com/ and https://npmjs.org/package/grunt-contrib-less ) or there are apps!
Note that you'll need a separate less file with your custom values in and then import it after you've imported variables.less, e.g.
@import "bootstrap.less"; /* Imports all the bootstrap less files in the correct order, including variables.less */ @import "custom-variables.less"; /* Your custom less variables */
See this answer Overriding Bootstrap LESS variables after @import for more details.