I'm someone who is very new to Bootstrap 5 and Sass, and I've been really enjoying my time learning them both! I just have a quick couple of questions...
When it comes to customizing Bootstrap Sass, I know you can do variable overrides (to change certain colors, fonts, etc.), but when it comes to making changes to various components (such as Bootstraps Nav component), is it good practice to override some of the prewritten classes with my own changes - or should I rewrite new classes and just reference them in my HTML?
For example, I want to have a specific nav for my header with a certain colored background, hover, font, and border radius; however, I don't want to maintain that style for the other navs used throughout my page. What would I do in this instance?
My current approach is to just create some more custom variables, and then create a custom class for my nav header where certain things will be applied.
Here is how my main .scss file is set up as well:
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
#import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
#import "../node_modules/bootstrap/scss/variables";
#import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
#import "../node_modules/bootstrap/scss/root";
#import "../node_modules/bootstrap/scss/reboot";
#import "../node_modules/bootstrap/scss/type";
#import "../node_modules/bootstrap/scss/images";
#import "../node_modules/bootstrap/scss/containers";
#import "../node_modules/bootstrap/scss/grid";
// 5. Add additional custom code here
Thanks for your help!
Edit:
Here's an example of a customization. I wanted to change the nav hover option for only one use case (in my header), so I created a new file called _custom-nav.scss where I put this class:
.hover-light {
&:hover {
background-color: $nav-pills-hover-color;
}
}
I would then reference this class in my HTML so that my page is properly styled.
Is this bad practice? I would just manually change the variables and hover options within Bootstraps nav; however, I only needed this hover option for the nav in my header.
This is an opinion based question and not really suited to this kind of forum - I'm sure a dozen ppl will reply with a dozen different views.
The basics of what you've done so far is not wrong, and you can just stick with that. The thing to remember about frameworks like Bootstrap is that it is just that - a framework. Akin it to a car chassis - that's all you're "buying" > the chassis and the motor. You can certainly drive it ... but to get the most of it you should add more to it.
How that's done is many ways - from loading the whole BS5 core and then creating a separate CSS to override the default - call that a "plugin" - to compiling ones own CSS from BS5 SASS (like you're doing).
If you're asking for "best practice" that too is a misnomer - as that too will vary.. from purists who will tell you that you should not use BS5 at all and that you should create your own CSS from code to those who say don't customise anything and just use "themes" like you can get from bootswatch.com ... there is no correct answer here - just opinions.
Your answer is somewhere in the middle - and for you, you're on the right track.
Related
I have been using boostrap 4.0 to build my website.
A newly added item requires me to use boostrap 3.3.
But after adding the boostrap 3.3 css stylesheet, the collapse/exapnd nav bar is having trouble functioning normally.
So I am thinking to use JS to apply script tag and link tag to an item with certain ID. Is that possible? Thank you.
It would be a disaster to rewrite the newly added item :(
Certain css and js components can be downloaded separately here: https://getbootstrap.com/docs/3.4/customize/
For example, if you want to use only bs X3 css for grid only you can uncheck all and then check "Grid system". You can also modify bs css by adding an extra class in front of the classes in order to make them unique.
Example ( adding a .bs-3 class for every X3 bootstrap class - it can be easily done if you download the sass files ) so wherever you use bootstrap classes along with your new class it should override the X4 classes.
.bs-3.row {
width: 100%;
max-width: 100%;
}
What you are trying is against how CSS is designed to work (applying the style to the whole site). Now, this is possible with components, like the ones provided in most frameworks that create a limiting scope for CSS and JS.
Native HTML components are not widely used nowadays.
If it is only a component, migrating it from Boostrap 3 to 4 should not be a big deal. There are not high design changes as we have between Bootstrap 3 and 4.
Other options are using the SAAS source of Boostrap 3 and rename the classes you use and add only them, but I think this would be much more work.
My limited CSS knowledge is starting to catch up with me now and I'm not sure how to handle this particular situation, despite grappling over it in various forms for months.
So I was having this problem awhile back with my solid-color Bootstrap navbar where it didn't fully extend to the right side of the browser by a handful of pixels. I could never figure out why but I did figure out a while back that overriding .row with a margin-right attribute of 0, fixed this problem. Fast forward a few weeks, I just noticed that my grey content boxes are now off-centered, as in, the margins between the left side and content and the right side and content were not the same, clearly because of this change I had previously made.
Now I can offset this problem by overriding .row with a margin-left attribute of 0 (and then messing with padding in comparison to those values to get the desired effect) but I'm really just not sure if this is bad practice or not? As .row is one of the most used classes of all in Bootstrap, I feel like I'm hacking away when there must be a elegant solution (where one problem I can't figure out is how to apply the margin-right styling to certain outer rows and not in certain rows - which would be a nightmare to try and figure out where at this stage of my project). I did try for a little while to apply this margin-right: 0 attribute just to the specific rows I thought were the culprit for the navbar issue but in the end, I wasn't able to figure it out.
Any help is appreciated, thanks!
you should not change the css properties of a Bootstrap class, for many reasons: above all
you could create regression somewhere else in your site (as already happened to you)
you can't be sure what will happen to your site if you upgrade the bootstrap css to a new release
You should
add a specific ID or a specific custom class to the originary navbar that had that issue
then create a custom css file (that you will import in you web pages after importing all bootstrap css files)
add in this new custom css file a rule to the previous new ID/class for the navbar that fix the original problem
It sounds like you might be nesting a container within a container, or a similar nesting issue. I cannot tell without a code sample.
You shouldn't need to use a row on your navbar, bootstrap has its own classes for a navbar.
See http://www.w3schools.com/bootstrap/bootstrap_navbar.asp for some snippets on how to do this.
Also you should never edit the bootstrap file, create an override file and put any changes you make into there. Make sure you link to the override file after the bootstrap file so that it cascades correctly. Like so:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-override.css">
I am using Twitter Bootstrap 3 for a while, but now Twitter Bootstrap 4 is coming. And new Twitter Booststrap comes with some changes, like renaming .table-condensed to .table-sm for example. For sake of future possible migration from current to future version, is there a way to make HTML code independent from changes in CSS class names?
For example, if I have .table-condensed class, is there a way to create my own class table-small and create it from existing Twitter Bootstrap's class table-condensed? Something like (pseudo-code):
.table-small {
join(".table-condensed")
}
I use only pure CSS until this moment (I am Front-End Developer occasionally rather than full-stack:) ), if anybody will answer me if this thing is even possible in some way, maybe with preproccesors or something like that, I would be very grateful - thank you in advance !
If you're using SASS then you can use the #extend function.
However, it's recommended to avoid doing this as it copies the selected class into the new one thus, essentially, doubling the size of your CSS
The solution is either to not upgrade to BS-4, unless you have a requirement to. Or to update all your HTML when you do
Edit
Reading through the SASS docs, it seems the functionality has been changed to work using the comma syntax. So this would be your best option going forward.
It still generates excess CSS by doubling the number of classes, but not as bad as duplicating all your CSS
You can use less css and do the following:
.table-small {
&:extend(.table-condensed);
}
This does not copy over the class like sass but just adds the selector:
Generated css:
.table-condensed,
.table-small {
background: red;
}
preprocessor online: http://lesscss.org/less-preview/
I have provided a template and it contains many CSS files in head and the body is divided into header ,content and footer portions. I want to add to add bootstrap in order to utilize its grid system for its content part. But when ever I add bootstrap.css in head above or below all the style sheets in <head> content part and footer part renders well but my header portion of the body encounter certain design problems as many of the properties in other css files get overridden by its grid system.
All I want to know is, is there any hack I may be able to use the
bootstrap.css for the content part?
I have also tried linking the bootstrap file in <body> below the <header> and above the content portion(I know its not a good practice.) . but it also causes the similar problems for the header portion.
What you can do is make and download a custom bootstrap version from http://getbootstrap.com/customize/ that contains only the grid system and use that CSS in your web app.
No, you can't. You're going to either have to change your markup and adjust the styles accordingly, or use an ID wrapper and change the styles in your CSS to only target <header> under that specific ID.
You're better off adjusting your styles to fit bootstrap, though.
Try adding !important to the properties that you want to customize in your CSS file.
But the best way I see to solve your issue is modifying the bootstrap.css file adding your configurations and adding !important if necessary
I'm working on integrating the Gridiculous grid with the Genesis Framework. Genesis already has some nice responsiveness built in, but I'd like to be able to quickly adjust my layout and get the nice fluidity that Gridiculous offers.
To do that, I'd like to be able to add custom classes to the major layout elements such as content, and sidebar. So, I'd like to be able to add a CSS class of .c3, .c8 etc to specific HTML elements. I need to be able to take
<div class="primary-sidebar">
and make it so that it's
<div class="primary-sidebar c3">
Am I barking up the wrong tree here? What path would be best to take to add specific classes like this to different elements? Body classes and post classes won't really work for this.
If I understand your question, I think you're definitely on the right track. You will have to write those multiple classes, of course, on your own so that the applied properties can take place. I would say start with whatever the Gridiculous supplies you in the CSS, and then add any additional styling in your own stylesheet.
In short, you would have to include the primary-sidebar c3 class in some stylesheet, but you can just copy the primary-sidebar properties given, and add your own customization to them. Hope that helps!