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;
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
Is there a way to disable Tailwind's Preflight on a specific div or component? For example a WYSIWYG editor, or wanting to migrate gradually to Tailwind.
Search about 'unreset tailwind'.
https://www.swyx.io/tailwind-unreset/
download file unreset.scss from https://raw.githubusercontent.com/ixkaito/unreset-css/master/_unreset.scss
copy it over to your tailwind.scss and namespace it under an unreset class.
.unreset { // paste unreset.scss here! }
And then in your JSX, you can add that unreset class in:
div className="unreset" dangerouslySetInnerHTML={{ __html: post.contents }}
https://www.youtube.com/watch?v=iLEYtgBezhs
I believe the optimal method, if you're using it for basic markdown is to use the the #tailwind/typography package which will allow tags such as <h6> <b> etc...
run npm i #tailwindcss/typography
add require("#tailwindcss/typography") to your plugins in tailwind.config.js
add the className prose prose-lg
<div className="prose prose-lg" dangerouslySetInnerHTML={{ __html: markdownDesc }} />
Found this method in a article here:
https://tjaddison.com/blog/2020/08/updating-to-tailwind-typography-to-style-markdown-posts/
As far as i know it will always load the ui if can find similar classes. Some solution can be
Reducing its priority from other css, by putting it earlier from other css files in initial load.
you can config tailwind.config.js file in a way so that it only generates css that needed
wrapping css with extra identifier so that it can't collide with tailwind classes.
Another option is:
.element-selector {
all: revert;
}
all can set all properties of the element to the initial, inherit or revert value.
More info here: https://developer.mozilla.org/en-US/docs/Web/CSS/all
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.
In my Angular2 project, I extract some common css into a global-style.css file and link this in index.html.
I also link third-party css in index.html but third-party css conflict with my global-style.css.
Let's see a concrete example.
In my global-style.css I have a style
.display-none { display: none; }
In bootstrap css there is a style
input[type="file"] { display: block; }
When I want to hide file picker I write the code
<input class="display-none" type="file">
But file picker still display because input[type="file"] have higher specificity than .display-none. (according to https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
There is a Plunker live demo: https://plnkr.co/edit/7HOT1if3ZhtSGu0UXOZX?p=preview
My question is, how to make my global-style.css have higher priority than other third-party css?
I know the way declaring !important but is there any other more elegant way? Thanks for any answer!
Here are some things you might be looking for:
Put the bootstrap link before your 'global-style.css'. This will solve your problem as the order of the links is the order that the CSS will be brought in.
Just use !important. A 10 character solution isn't not elegant.
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.