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;
}
Related
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;
}
I have an html page with an header navbar and content. Both have their own header.css and content.css which define the font-size in the root.
The problem is that the second css overrides the first declaration and both components have the same font size in the root, which makes rem font sizing wrong for the header (in this case).
Is there a way to define two different roots or subroots?
(example)
html{
font-size: 18px
}
#content:root{
font-size: 11px
}
<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;
I am using bootstrap 3 in my project and I see that there are 2 declarations of font-size in bootstrap as below:
Scaffolding.less
html { font-size:10px;}
body{ font-size : #font-base-size; }
And the #font-base-size is defined as 14px in variables.less
I have been reading stuff where one way of having responsive font size was to have base font size as px defined in body or html as then use font sizes in rem for different components in body such as p, h1 etc.
But I am not sure, where do I define the base font, should it be in html OR body?
And why does bootstrap has different font size in html and body?
My observations:
When I define some font size in px in html, then only rem thing works for everything, defining font size as px in body doesn't work with rem.
The rem unit is relative to the root, or the html element.
Thus defining the base font size should happen on the html element.
Defining a font-size on the body will work, but all child elements which have a font-size definition using rem units will fall back to the root/html element to calculate their absolute size.
So:
html {
font-size: 10px;
}
body {
font-size: 15px;
}
.parent {
/* font-size will be 15px here */
}
.parent .child {
font-size: 1.2rem; /* resolved to 12px */
}
As to why Bootstrap uses 2 font-sizes: the 10px font-size on the html element is just part of some global reset they use. Also, some margins/paddings are calculated using the base font size, so it's best not to interfere with that too much.
If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1rem = 16px, and 2rem = 32px. If you set a font-size of 20px on the body element, then 1rem = 20px and 2rem = 40px.
In addition, em, rem are not an absolute unit - it is a unit that is relative to the currently chosen font size. Unless you have overridden font style by setting your font size with an absolute unit (such as px or pt), this will be affected by the choice of fonts in the user's browser or OS if they have made one, so it does not make sense to use em as a general unit of length except where you specifically want it to scale as the font size scales.
NB: too long for a comment. sorry for that
in "CSS: The missing manual" the author says that font-size: medium (or other size keywords) sets the font relative to the browser's base font size.
But what I'm seeing in FF2 and IE6 is that it sets the font size to what I specified in the .CSS HTML or BODY style (which is much preferred).
If it works the latter way, this is very handy if you have nested styles and you know you want some text to be the body font-size (i.e., "normal sized text").
From the CSS 2.1 specification:
The 'medium' value is the user's preferred font size and is used as the reference middle value.
If a browser doesn't do this, then the browser is buggy.
It will be based upon the parent element, so as to respect the cascade. If it is helpful, I always do my font sizes this way:
body {
font: normal 100% "Arial","Helvetica",sans-serif;
}
p, li, td {
font-size: .85em;
}
li p, td p {
font-size: 1em;
}
Go 100% on the body, then use em for everything else. I never use "smaller" or "medium" or anything like that. I have more control this way.
Edit:
Please see Jim's comment about "medium" being an absolute font size. Good to note.
As noted before medium is set by the UA (browser) but you can still get the behaviour you wished by using rem. rem is relative to the root element (notably the <html> element, not the <body>) and thus affected by styling of the root element.
See this fiddle for demonstration.
html
{
font-size: 60px;
}
#mediumBlock
{
font-size: medium;
}
#remBlock
{
font-size: 1rem;
}
#halfRemBlock
{
font-size: 0.5rem;
}
<div id="inheritedBlock">
Foobar inherited
</div>
<div id="mediumBlock">
Foobar medium
</div>
<div id="remBlock">
Foobar rem
</div>
<div id="halfRemBlock">
Foobar 0.5rem
</div>
Font Size Keywords (xx-small, x-small, small, medium, etc..) are based on the users default font size which is medium. It can also be used in the term of changing the size of a child element in relation to the parent element.
I think if you set a default size to a element like a container or the body, then any relative font-sizes in the children are based on the parent elements. Only if you don't specify a font-size anywhere does it just default to the browser (which they all have different sizes at that).