I have been using Bootstrap 3.4.1 for many years, and am working on moving it to Bootstrap 5.3.
Back in Version 3.4 it was possible to customise your download, which would result in a smaller download when users visit your website (sorry for non-technical speak).
However I am struggling to work out how to do similar in version 5.3.
I am using VSCode and have installed Node.js on my laptop, and have worked through the Bootstrap 5 Crash Course Tutorial #19 - Customizing Bootstrap tutorial.
That was useful in as much as it helped provide steps to override some default styles and to add some of your own custom styles - e.g. by adding your own scss file:
// custom variables
$primary: #c29938;
$light: pink;
// import the functions & variables
#import '../../node_modules/bootstrap/scss/_functions';
#import '../../node_modules/bootstrap/scss/_variables';
$custom-theme-colors: (
"altlight": #f2ebfa,
"altdark": #522192
);
$theme-colors: map-merge($custom-theme-colors, $theme-colors);
// import bootstrap
#import '../../node_modules/bootstrap/scss/bootstrap';
However, I am struggling to find any guidance about how I would be able to compile my own bootstrap file that excluded bootstrap components I don't want to use, such as:
accordion
carousel
modal
dropdown
etc. etc.
Is it possible to do this using the Vscode / NPM setup I have installed, and using SCSS files, or do I need to learn about other routes using LESS and Gulp and all sorts of other things?
Any advice much appreciated.
Thanks
Related
I am following this link:
Docs
Specifically:
Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new $enable-* Sass variables. Override a variable’s value and recompile with the included Gruntfile as needed.
I have never used Gruntfile before. Can I use other tools to compile scss into css? Also, what the outcome of such compilation is going to be? A _custom.css that must be placed in the same folder where original bootstrap.css is?
Thanks for help.
While there is not an "official" Bootstrap 4 customizer like there was in 3.x, there are several tools that can do this. These all convert from SASS to CSS, and some provide a UI if you're not familiar with SASS.
Themestr.app Customizer
Bootply Customizer
Also see this answer for details on how to customize with CSS overrides or SASS.
You actually do not need to know too much about Grunt. Bootstrap 4 provides doc on how to setup build tools which can be found at,
https://v4-alpha.getbootstrap.com/getting-started/build-tools/#tooling-setup
Run grunt (or a specific set of Grunt tasks) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
My suggestion is to clone the Bootstrap Beta 4 from Github change the variable and rebuild using the reconfigure gruntfile.
https://github.com/twbs/bootstrap#running-documentation-locally
I am reasonably new to Grunt - I have less setup via grunt/node and would like to include the basic unstyled responsive backbone of Bootstrap - rather than the entire css/ js - is this possible - can anyone explain how as i've read various documentation and i'm mighty confused!
I have found this NPM library - https://www.npmjs.com/package/grunt-bootstrap which sound slike it could provide what i'm after but I have no idea what files would provide me with the basic responsive skeleton without all the styling - or what version of Boostrap the files relate to - can anyone advise please?
You can download the Bootstrap's source code. Then run npm install, after that you can rebuild bootstrap by running the Grunt tasks.
You can disable the jquery Plugins in the Gruntfile.js by commenting them out. The same for your CSS code in the less/bootstrap.less file.
The less/bootstrap.less file already contains useful comments such as // Reset and dependencies and // Core CSS so it will be easier to find out what to use and what not.
To compile a very basic version that only contains the grid system you could use a less/bootstrap.less which contains:
// Core variables and mixins
#import "variables.less";
#import "mixins.less";
// Reset and dependencies
#import "normalize.less";
#import "print.less";
// Core CSS
#import "grid.less";
After changing the less/bootstrap.less as above you can run grunt dist-css. The preceding command compiles dist/css/bootstrap.min.css which can be used for your project.
I was able to create a Wordpress theme that I am working on, using my local machine. The issue I am having is incorporating Sass into the Underscores Starter theme, with Twitter Bootstrap's Sass and Wordpress.
I was creating the fixed-top bootstrap navigational bar. I managed to add the proper code to include WP_Walker_Nav in my functions.php file, but this is what my navigation looked like My Bootstrap Nav.
The content is too close to the fixed-top navigation and I wasn't able to control the body tag styles to provide padding of at least 60px from the top.
I was wondering if someone can guide me in the direction on how to incorporate Twitter Bootstrap's Sass and Font-Awesome's Sass into Underscore's Wordpress theme.
I'm struggling with the proper workflow. For my Wordpress default style.css, all I would do is put
#import url("css/style.css");
underneath Wordpress Stylesheet default comments.
I have a folder labeled sass (for all my scss files) and a folder css (for all my compiled css). In my style.scss, I import bootstrap and font-awesome's sass files, and I create a separate scss file (main.scss) to use for my custom styling, but nothing works when I create a variable in my main.scss file.
I would set my style.scss file like this:
#import 'main';
#import 'bootstrap-sass';
#import 'font-awesome';
For example:
$padding10: 10px;
body {
padding-top: ($padding10 * 6)
}
nothing happens when I set up my body tag. Please tell me what I am doing wrong, any help is appreciated. Thank you!
For those wondering about how to do this: the _S Underscores theme added direct support for generating a starter theme with a sass-based architecture last year, which I only recently found out about. If you click the “Advanced Options” link on the Underscores main page, you can then select the _sassify! option and you’re on your way. From there, it should be clear to you how to wire in Bootstrap. The generated sass/styles.scss file in your new theme is a very well organized and documented list of imports, to which you can add Bootstrap however you wish (via Bower, direct download, whatever).
As a side note, you can automate this and make it even easier via wp-cli, which very recently added support for the sassify option to their wp scaffold _s subcommand, which looks something like:
wp-cli scaffold _s my-sassy-theme --theme_name="My Sassy Theme" --sassify
(Note that as of this writing, there hasn’t been a release of wp-cli with that feature; you can use it immediately, however, by installing the wp-cli nightly.)
I am trying to use angular, yeoman, and sass at the same time, also I only wanted some css components in twitter bootstrap, so I tried scaffolding my app like this
yo angular --coffee
And answered yes for the following questions,
would you like to install twitter bootstrap & would you like to use compass sass blah2x.
I answered yes,
Now the application is ready to go, but I have few concerns.
it loads all twitter bootstrap components, I actually wanted only the normalize.scss
How do I selectively use an scss component, because it builds all files, making my codebase super big because of unnecessary imports.
Thank you.
It sounds like you may need yeoman install yeoman-normalize.scss and then inside your main.scss file add a import line to correctly add normalize.scss
So:
#import "../components/yeoman-normalize.scss/yeoman-normalize";
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 ?
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!
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