I'm trying to set the sm breakpoint so that it is >=500 as opposed to the default of 576
I don't use Sass or anything along those lines, so have just been trying to make the change directly into the CSS (I really miss the customiser that Boostrap 3 had)
I of course don't want to tamper with the Boostrap CSS file, but did see the breakpoint values in there. And so I added the following in the <head> section of my HTML
<style>
:root{
--breakpoint-xs:0;
--breakpoint-sm:500px;
--breakpoint-md:768px;
--breakpoint-lg:992px;
--breakpoint-xl:1200px
</style>
But it doesn't appear to be working, as I'm viewing it at 568px and not seeing any changes I've made
Related
Sorry if this is a silly question, I'm completely new to bootstrap and ASP.NET.
I'd really like to change the nav-link colours for my web application but applying inline CSS and changing the bootstrap.css is not working. According to inspect all CSS for the nav-links are being overridden by Navbar.less
Screenshot of inspect:
Bootstrap v3.4.1
Of course you should be compiling bootstrap's files combined with your style to make a perfect match, taking advantage of bootstrap variables, and overriding them in case of need. You can compile it automatically when saving using editor extension or other way you choose.
I assume you are using bootstrap 3 because it uses less files.
main.less <-- your file
#import "path/to/bootstrap.less";
// your overrides here: (see file variables.less)
#navbar-default-color: white;
#navbar-default-bg: pink;
// and also
.my-primary-border {
border: 1px solid #brand-primary;
}
// and rest of your styles.
my-html.html
<!-- main.css is automatic output of main.less -->
<link rel="stylesheet" href="main.css">
If you're using bootstrap 4/5 it's the same idea. See here
I'm using twbs bootstrap 3.3.6 with Meteor and trying to style a <fieldset>.
However when I use the Chrome inspector it says that the style is coming from bootstrap.css even though I have tried using class-specific and id-specific css.
My style sheet is in the application root, as suggested by some answers.
I'm very new to meteor and css so I could be making a novice error.
Otherwise, what's the best practice to override bootstrap css settings?
Generally if you want to override the css you should put your css file after all of the other files like the bootstrap css because css starts from top to bottom so the bottom lines are the ones that will be executed, example:
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/your-css.css" />
Also you can add !important at the end of every css line to give that style the top priority no matter of the line index, example:
.someclass {
color: red!important;
}
You can either override the specific property on the same class in your css...
.btn {
background-color: #fff !important;
}
...create an inheritance map so that it only applies to the element inside another specific element...
div.classForSpecificContainer btn {
background-color: #fff !important;
}
or specify your own class and add it to the element in question
myOverrideClass {
background-color: #fff !important;
}
The.. important part is that you use !important; to prevent Bootstrap from overriding it. That will generally solve the problem even if the CSS files load in the incorrect order, but not always. I have made a habit of prefixing my CSS files in the same folder with z- to make sure they get loaded last if I'm using something like Meteor that merges and compresses the CSS.
This seems to be a common problem in Meteor because of the way their build injects the merged stylesheet into the top of the html <header> instead of the bottom. There is a merged PR that looks like it will be available in 1.6.2 that allows you to put a pseudo tag anywhere in the <head> you want the merged css injected.
Example: proposed availability in 1.6.2 - PR already merged
<head>
<link rel='stylesheet' type='text/css' href='some-cdn.bootstrap.css'/>
<meteor-bundled-css/>
</head>
That will work once the merged PR is included in the next build.
Until then...
SOLUTION 1: If you're using the bootstrap LESS or SCSS files, you can just import it into your client/main.less or client/main.scss file and then import your override file after this. It looks like you're using pre=compiled css though, so move to SOLUTION 3.
SOLUTION 2: Use !important on the end of your lines... BAD not recommended practice. If you use important you break the cascade.
SOLUTION 3: Put you third-party library overrides files in your public folder and manually <link> it below the bootstrap <link> in your head. I suggest this for now.
I have a site I am adding some functionality to. The site is a bit outdated but I am not being paid to overhaul the entire site, just a few pages. Because of this I am using more modern code on these pages but there is still old code on these pages. Because of the old code (which will stay and not be removed) I have some CSS that conflicts.
Is it possible to make an entire stylesheet only apply to styles within a div.
Example:
<div class="style-sheet-modern">
<!-- My Stylesheet applies only within this div -->
</div>
My first thought was to just rename my css to fall within the div. Example:
.style-sheet-modern .conflicting-class{ /* styles */ }
However, this isn't desirable because there are a few hundred lines of CSS and I don't want to go through and rename all of my CSS. Also makes it difficult to update in the future.
Is there a way to apply an entire stylesheet within a certain div and not anywhere else on the page?
Sure, in most modern browsers. Put a scoped stylesheet WITHIN the div.
<div class="style-sheet-modern">
<style scoped>
.conflicting-class { ... }
</style>
</div>
You can use #import to use external styles. Note, for browsers that don't support it, it will apply the style to the entire page. So you probably just want to add an id to the div you want and style with that, for compatibility.
Why not give the <div> an ID?
Then you could use specificity to override just the classes/ids that are in that div?
IE:
<div id="style-sheet-modern">
<div class="my-class"></div>
<div class="etc"></div>
</div>
You could then target all styles inside the "modern" div like this:
#style-sheet-modern .my-class{
color:black;
}
#style-sheet-modern .etc {}
There would be no browser support issues.
If you're using something like less or sass – you could even have it in a separate file named "style-sheet-modern.less" or whatever you want it named and #import it at the bottom of your main styles file. This include would need to come last in the file so that it will override the other styles that could be applied to those same styles.
You could use a wildcard to reset all the styles inside the #style-sheet-modern as well if necessary like this:
#style-sheet-modern * {
reset: stuff; //obviously not the actual css
}
That reset for those styles would be the first thing in your 'style-sheet-modern.*ss' file.
And as I mentioned before, no browser support issues.
I'm redesigning my comics website, http://HittingTreesWithSticks.com, and have been having a lot of trouble with the responsiveness. That being said, I'd like to redo it without responsiveness.
So when I make the screen smaller, elements won't shrink, like http://theoatmeal.com/.
I've only included <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.css" media="screen"/> in my header, and not the responsive file, yet it's still responsive. Why is that?
Also, do I need to change everything to instead of ?
Thanks!
You can make your site unresponsive by doing the following:
Remove all of the #media rules and styles within them at the bottom of bootstrap.css
Remove max-width: 100%; from the img {} rule
Make sure your HTML doesn't contain any class names with "-fluid"
I am using twitter bootstrap for layout and css. But I like the foundation top bar navigation over what bootstrap provides. I tried to use the top bar code inside my html (built with bootstrap) and it messes up the layout. That is not surprising because both of them rely extensively on class named "row" and they have different properties.
One of the options I could think off is to override the row class some how in my style sheet but that would be too much of a work and doesn't seem right.
Other option might be using iframe.
Is there any other way this issue can be solved?
Ideally, you only need to use the top-bar CSS and JS code of Foundation, since that is the only component you mean to use. Here is the SCSS file (with dependancies on the variables declared in _settings.scss. Or you can use the generated CSS code.
If you still need to use .row, just copy the .row styling and name it different. I.e:
/* The Grid ---------------------- */
.foundation-row { width: 1000px; max-width: 100%; min-width: 768px; margin: 0 auto; }
Finally, dont't forget to include the jquery.foundation.topbar.js file and calling
$(document).foundationTopBar();
Old question but thought I'll share the latest if someone is looking for a seamless solution: Web Components
It's a bit of a more complex subject but will allow you to create widgets within completely isolated Shadow DOM's without overriding a thing. Read more about it
here and here. Then you'll be able to do something like this:
<template id="templateContent">
<style> #import "css/generalStyle.css"; </style>
</template>
Taken from this answer
Using an iframe for this is a bad idea. If you like the style for the Foundation top bar, just copy those styles into a custom class in your stylesheet.
Please note that you may have to override some of Bootstrap's default styles for the top bar to get it right.