I am using Bootstrap v5.0.2 but I need to override the font size to some custom value.
In the html I am using Click
This gives me some predefined button sizes.
In my main .css file I have:
body{font-size: 22px;}
h1{font-size: 24px;}
I want to match the button font size to the the page font size.
What is the best way to override the font size of the button?
If you want the custom size applied to all .btns then in a stylesheet loaded after BS override the body font size by setting the value of the CSS variable and the .btn font size to use the variable:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<style>
h1 {
font-size: 24px;
}
body {
--bs-body-font-size: 22px;
}
.btn {
font-size: var(--bs-body-font-size);
}
</style>
<h1>
heading
</h1>
<p>
paragraph
</p>
<button class="btn btn-primary">
button
</button>
This will adjust the font size of any element that is based on the var(--bs-body-font-size) value.
There is no need to use !important nor an additional class name (on every single .btn).
I would add a class in your main css file . For Example
.pageButtonSize { font-size: 22px !important; }
and then add the class to your button markup.
Click
you can create your own file.css containing all styles you want to override
then, add this file to your project after bootstrap is added
Note: to make sure your styles will be applied, consider adding !important for each style for example:
h1{
font-size: 50px !important;
}
Related
How can I set the font size of a bootstrap-select to a certain size?
you can give font size to any select just by applying the following css. apply !important to override css loaded after your style.
select {
font-size: 50px !important;
}
I'm trying to use Reveal.js to build a UX portfolio which is responsive. However, I noticed that most of the properties I write in a style sheet are overridden. Is there a way to force slideshows using Reveal.js to use custom CSS for font sizes and other settings?
Yes there is. For sure it's not the best way, but is simple and functional. Carefully, add "!important" to the setting you want to be adjusted. Like:
.reveal section p {
font-weight: bold !important;
font-size: 1.1em !important;
}
.reveal section pre code {
font-size: 0.7em !important;
}
Hope this helps!
You can override the variable --r-main-font-size - used by all of the out-of-the-box themes provided by revealjs.
<style type="text/css">
:root {
--r-main-font-size: 30px;
}
</style>
<i class="fa fa-graduation-cap" aria-hidden="true" style="font-size: 50px;"></i>
works
.fa-graduation-cap {
margin-top: 38px;
color: #E46A6B;
font-size: 50px;
}
doesnt work
I've never had this issue before. Any idea?
Yes, I do have the font-awesome css correctly linked.
I believe the font-size is already defined for the icons in the font-awesome.css file. Adding the style tag to the html code overrides these predefined classes. Try typing !important after defining font-size in the css to explicitly override. For example:
.fa-graduation-cap {
margin-top: 38px;
color: #E46A6B;
font-size: 50px !important;
}
Like #developernator stated, you can also use the predefined classes. However, I find that most of the time the right size falls between the sizes of these classes.
The class uses first inline css then internal css and then external css
Your font awesome might have already given inline css either remove inline css or
do-
font-size: 50px !important;
How can I set a standard font size and padding to an entire wordpress post?
For example, currently I use p style="padding-right: 30px;padding-left: 60px;font-size: large" for every single paragraph except for title tags.
Is there a better way to do this?
It sounds like you want to use CSS (Cascading Style Sheets) (tutorial).
For your current example, you can apply the styles to every <p> element on the page using:
<style type="text/css">
p {
padding-right: 30px;
padding-left: 60px;
font-size: large;
}
</style>
You can also put the contents (excluding <style> tag) into an external file (.css), then address the file using <link rel="stylesheet" href="PATH_TO_STYLESHEET" />. Stick the <link> element in the <head> of your theme.
Since you are working within Wordpress...
You can open up your theme's style.css (or edit it within Wordpress by going to Appearance > Editor in the dashboard). Just place the content from above (again, without the style tag) near the bottom of your stylesheet. If you only want to style <p> elements within the post body, you can use the selector div.post p {.... rather than simply p {.... WordPress uses the "post" class, among others, for each post that is displayed.
If you use something like this it will apply it to all the paragraphs
.post-class p {
padding-right: 30px;
padding-left: 60px;
font-size: large;
}
You might have to adjust .post-class to whatever the theme is using.
Is there a way to apply a font style or any other style to an element inside CSS?
For instance
You defined a certain font style
.impact {
font-family: "Impact";
letter-spacing: 16px;
line-height: 72%;
}
Now apply this style to an element inside css:
#certainElement {
font-family: Impact (the one we defined)
width: 400px;
}
Unfortunately, CSS does not support this kind of composition. However, you can use SASS or LESS to get similar behavior.
Is there any reason that defining a class on your element with id certainElement isn't desirable?
<div id="certainElement" class="impact"></div>