I'm a beginner in bootstrap and I try to change the break-point position to make my navbar collapse earlier. (something like 810px instead of the 768px default value).
I searched for the solution through the most of asked questions, but as bootstrap evolves every day, the solutions are deprecated and they don't work anymore.
What I try to do is to modify the variable.less file in the less directory of Bootstrap.
I changed the file like that :
//** Point at which the navbar becomes uncollapsed.
#grid-float-breakpoint: 810px;
Then I recompiled the file bootstrap.less in bootstrap.css using lessc with this command line :
lessc bootstrap.less > bootstrap.css so a new file bootstrap.css have been created in my folder. I simply replaced the default bootstrap.css with the recompiled file bootstrap.css, but nothing change on my website, my navbar always collapse at 768px...
Anyone can help ?
Thanks.
Ok I'm stupid, I was replacing the wrong folders in the bootstrap folder of my project. Now that I have replaced the right folders in bootstrap/dist everything is ok !
Thanks for sharing the Bootstrap live customizer, it is very helpful and nice to use.
Related
I got a Bootstrap template that was built by a company and I am doing a bunch of coding and additions to it but I am new to Bootstrap and I am having a problem. I added the vendor.css and theme.css files to my php header and I added the bootstrap.css file as well. My problem is when I try and use some of the bootstrap classes they dont work because of the vendor and theme css files being used. Some of them work but the appearance and functions are different. Is there any way around this so I can still use some of the bootstrap classes. I put the css files in the header in this order. theme, vendor, bootstrap and then my own css file at the bottom. Is the only way to do this by adding my own css file and make the changes. Any advice would be great. Thanks
As far as I understand from your question that, some of your bootstrap classes are working and some of the them are not working.
In that case, I think it is bootstrap version issue. Obviously updated version class will not work in older version class.
I am new to bootstrap, I am just testing it out. Lets say I place CSS code in bootstrap.css it doesnt seem to place it in bootstrap.min.css
Am I missing something!?
They are 2 different files that why. Bootstrap.min.css is just a minified version of Bootstrap.css. This means all the whitespace and other extra characters have been removed, this is normally done to improve loading times. https://developers.google.com/speed/docs/insights/MinifyResources
If you want to add your own styles, just make a new .css file and include it in your project then add all your custom styles in there. You don't need to edit bootstrap.css or bootstrap.min.css.
i have a simple but for me rather an important question. I will start a clean Project with Less and wanna include bootstrap. So my basic style.less file would look like this:
// Bootstrap Corefile
#import "bootstrap.less";
// My own Styles
header {
.make-row();
}
is this logical correct because now the bootstrap and my own styles are compressed in one file. In addition I would have a pretty big css file... And what if I want to use another css file from external plugins.
I would like to know if someone has already experience with it?
Yeah that will work. If you want to add another file you can just import that as well.
One thing that you do have to be careful of is that in the earlier version of IE it has a max number of classes it process. I can't remember off the top of my head but I think it is somewhere near 1000. So if the css at the end of the file isnt working in IE thats why.
Here is a line to the documentation to see what you can do with it. Check out the import section.
When I want to change for example the style of a bootstrap button how should I do that:
Remove the css class in the bootstrap file and create a class in my css file with my settings
Leave the original css file and create a class in my css file with !important to overwrite the original file settings.
There are surely other ways...
What is the best my also considering upgrading to new bootstrap.css file?
The best way is to:
Leave the bootstrap file untouched
Modify the class in your own stylesheet
Load your own stylesheet after the bootstrap CSS
You have the benefit of not having to use !important and you can still update bootstrap.
Note: although you can update the bootstrap-file, you still have to test your page to see whether the update broke something, but this will at least assure you that you didn't lose any work
1.) Make a backup of the file and just edit the file as you please. I wouldn't create multiple files with !important since you'll lose track of things pretty fast.
is there a way to change the breakpoint where Bootstrap menu becomes responsive and collapse? 979px is far too big for me and I would like the transformation taking place only on smaller sizes.
Yes, you can do it by redefining #navbarCollapseWidth variable in less/variables.less file. And recompiling css after that.
Compiling instructions can be found in Compiling Bootstrap with Less section of official documentation.
#nick-kugaevsky the 'compiling bootstrap with less' - link is broken.
BTW, for bootstrap 3 RC 1, you will want to modify the following property in less/variables.less
// Point at which the navbar stops collapsing
#grid-float-breakpoint: #screen-phone; // here i allready changed it
BTW: this only prohibits the responsive nav to collapse when width > #screen-phone for example. Here is some more info on compiling bootstrap with less: http://bootstrap.lesscss.ru/less.html
You have to download bootstrap, point your app or the node js util to the bootstrap directory containing the less files, modify less/variables and recompile the bootstrap.less file.
Argh, just found out it this is written in the bootstrap documentation:
http://getbootstrap.com/components/#navbar