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
Related
I have seen similar questions but solution suggests to change it through css.
I tried but unable to reproduce the solution for my code. Currently link is looking like this
I also explored react-bootstrap docs but hey haven't mentioned any specific tag to remove that styling
I want to remove that Blue Under Line.
Code :
<ListGroup.Item>
<Link to={`/panelmember/${item._id}`}>
<Card.Title as="h2">
<strong>{item.name}</strong>
</Card.Title>
</Link>
</ListGroup.Item>
Is there Any way to add Short code inside the <Link> tag ? Or if we have to customize it in index.css then can you suggest any solution.
.links {
text-decoration: none;
}
<Link className={`links`} to={`/panelmember/${item._id}`}>
<Card.Title as="h2">
<strong>{item.name}</strong>
</Card.Title>
</Link>
Like this
Bootstrap 4 makes use of Sass for its styling (Sass is a pre-processor scripting language that is interpreted or compiled into Cascading Style Sheets - see https://sass-lang.com/). See https://getbootstrap.com/docs/4.0/getting-started/theming/ for details on Bootstrap theming.
If you are using Sass to compile your CSS file, you can override the default Bootstrap styling for links (which is underline) by adding the following to the scss file (before importing bootstrap):
$link-decoration: none;
Let's say I got the following in my index.html and I'm using Bootstrap:
<head>
bootstrap stylesheet
main.css stylesheet
...
<button class="btn btn-primary">Button</button
Btn-primary is a class for making the button blue.
I wanna change all my primary buttons to red for say.
Is it bad I go straight to the Boostrap class or should I make my own? In main.css:
btn-primary{ background: red; }
VS
btn-red{ background: red; } //applying that class to the button in question obviously
What I'm asking is only about good practice.
I know that both work.
I just wanna know if I do use bootstraps' classes for that I'm doing something that's generally not well accepted.
Good practice would entail not editing the framework code within the files that are provided by the framework.
In my practice I use an override.css file (or section of a file) to specifically override framework styles.
ex:
/* Bootstrap.css */
.btn-primary {
background-color: not-red;
}
/* Override.css - load this after Bootstrap.css */
.btn-primary {
background-color: red;
}
**Note that this is a simplified version, and that sometimes the framework will have more specific selectors than simply a class style, for instance form .btn-primary for <form> buttons. In this case you may opt to out-specify the framework, or use !important on your style.
If Bootstrap updates their framework, it's simple for me to update and keep my styles. This also addresses the issue of redundant classes, as you can still utilise Bootstrap classes with your own styles.
I don't think it is possible, but I will ask anyway:
Can I apply an external css file (Bootstrap for instance) to a div and its children without affecting the rest of the page.
For example, I need to migrate a footer written with Bootstrap over to an existing page. That page does not use bootstrap. If I link Bootstraps css at the top of the page, the css is applied to the whole page which ruins existing css. How can I just apply the bootstrap styles to the footer section without having to rewrite most of the page's css?
Any suggestions?
I ended up using LESS to compile a new css of bootstrap with a prefix of .bootstrap as seen below. It works, but i wonder if there is a more traditional way of handling this problem.
file: bootstrap-only.less
.bootstrap {
#import 'bootstrap.css'
}
file: bootstrap-only.css
.bootstrap .container {
width: 100%;
}
file: page.html
<style>
.container { width: 20px; }
</style>
<link rel="stylesheet" type="text/css" href="bootstrap-only.css">
<div class="not-bootstrap">
<div class="container">I am 20px</div>
</div>
<div class="bootstrap">
<div class="container">I am 100%</div>
</div>
You can try usig scooped css.Please do refer the following sample code.
<div>
<style scoped>
#import "filename.css";
</style>
//your div with its children will come here
</div>
Your inline styles should not be affected by adding Bootstrap as inline styles take precedence over styles from external resources. The only elements that should be affected are the ones in the page that share class names with bootstrap classes.
You can try referencing the Bootstrap css before your own css and your stylesheet will take precedence over the Bootstrap css. Unfortunately this may add styles additional styles to some of your classes which that you didn't explicitly reference in your stylesheet and may still change the look of your page.
For those classes that exist in both bootstrap and your stylesheet it's probably best to just change the names of those classes in your stylesheet and page. A quick way to do this is to use "replace" search for the class name and replace it with the new class name most IDEs have a way to "replace all" so it's often just a bit of typing and a few clicks to change a bunch of styles.
You can try using the Angular 2+, where you can simply create an component and us it anywhere irrespective of the page css. Basically it will create a shadow DOM and will not be accessible outside that component.
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 am building a web application where I have set my default color to navy blue using css. But when i added the twitter bootstrap css's in my page I did not find my navy blue color instead I found the white background color provided by twitter bootstrap.
My query is that what portion of css should I change in bootstrap to change my page's background.
You can overwrite Bootstraps default CSS by adding your own rules.
<style type="text/css">
body { background: navy !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>
Bootstrap 4 provides standard methods for this, fully described here: https://getbootstrap.com/docs/4.3/getting-started/theming
Eg. you can override defaults simply by setting variables in the SASS file, where you import bootstrap. An example from the docs (which also answers the question):
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
#import "../node_modules/bootstrap/scss/bootstrap";
You have to override the bootstrap default by being a bit more specific. Try this for a black background:
html body {
background-color: rgba(0,0,0,1.00);
}
I would not recommend changing the actual bootstrap CSS files. If you do not want to use Jako's first solution you can create a custom bootstrap style sheet with one of the available Bootstrap theme generator (Bootstrap theme generators). That way you can use 1 style sheet with all of the default Bootstrap CSS with just the one change to it that you want. With a Bootstrap theme generator you do not need to write any CSS. You only need to set the hex values for the color you want for the body (Scaffolding; bodyBackground).
You can simply add this line into your bootstrap_and_overides.css.less file
body { background: #000000 !important;}
that's it
I'm using CDN bootstrap, and the solution that I found was:
First, include the bootstrap's CDN, then (just under) you include the file .css where you are editing the default styles of bootstrap.
<!-- Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Your styles -->
<link rel='stylesheet' href='styles/my_bootsrap_editions.css'>
Add your own .css file & put in it:
body{
background: navy;
}
Important: While including css files in html, first include the cdn bootstrap css, then only include your own .css file. This way stylings in your own css file overrides the default behaviour from bootstrap css.
The colors changed due to the order of CSS files.
Place the custom CSS under the bootstrap CSS.
Its not recommended to overwrite bootstrap file, just in your local style.css use
body{background: your color !important;
here !important declaration overwrite bootstrap value.
how to change background color in html & css with class
example:
on html you write
<div class="pad_menu">
</div>
on css
.pad_menu {
padding: 100px;
background-color: #A9FFCB;
}
so your background will be change to Magic Mint, if you want to know the code of the color, i suggest you visit https://coolors.co. Hope this useful :)