How to increase font-size in Bootstrap 4?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
27
In Bootstrap 4, font-size defaults to using em or rem for fonts.
How can I increase the font-size for all viewport sizes? Because every element looks tiny.
html css twitter-bootstrap bootstrap-4
asked Sep 1 '17 at 11:35
Mukul KantMukul Kant
5,87952546
add a comment |
27
In Bootstrap 4, font-size defaults to using em or rem for fonts.
How can I increase the font-size for all viewport sizes? Because every element looks tiny.
html css twitter-bootstrap bootstrap-4
asked Sep 1 '17 at 11:35
Mukul KantMukul Kant
5,87952546
add a comment |
27
27
27
5
In Bootstrap 4, font-size defaults to using em or rem for fonts.
How can I increase the font-size for all viewport sizes? Because every element looks tiny.
html css twitter-bootstrap bootstrap-4
asked Sep 1 '17 at 11:35
Mukul KantMukul Kant
5,87952546
In Bootstrap 4, font-size defaults to using em or rem for fonts.
How can I increase the font-size for all viewport sizes? Because every element looks tiny.
html css twitter-bootstrap bootstrap-4
html css twitter-bootstrap bootstrap-4
asked Sep 1 '17 at 11:35
Mukul KantMukul Kant
5,87952546
asked Sep 1 '17 at 11:35
Mukul KantMukul Kant
5,87952546
edited Jan 4 at 4:43
Mukul Kant
asked Sep 1 '17 at 11:35
Mukul KantMukul Kant
5,87952546
asked Sep 1 '17 at 11:35
Mukul KantMukul Kant
5,87952546
asked Sep 1 '17 at 11:35
Mukul KantMukul Kant
5,87952546
5,87952546
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
29
Because Bootstrap 4 uses rem for the font-size unit of most of it's elements, you can set the font-size in px on the HTML element in your own stylesheet and this will change the default sizing Bootstrap applies to your elements. I've included a link to a codeply project, so you can see it in action. The environment already has Bootstrap 4 loaded in it. If you change the value of the font-size for the html selector and run the project you can see how the sizing of the elements all change relative to the root element.
Adding three lines of CSS to your stylesheet should be pretty easy:
html {
font-size: 16px;
}
answered Sep 1 '17 at 14:44
Jade CowanJade Cowan
1,6041922
2
You can also set this to an em value, but you'll need to test at multiple sizes. The main advantage of this method is it will respect the font-size setting of the user agent and user style sheet, making your site more accessible to those with visual impairments.
– LightBender
Sep 1 '17 at 16:57
Such a setting is critical to the entire page. Developer must be aware of its implications.
– NoChance
Oct 3 '18 at 10:55
add a comment |
0
you can use .h1 to .h6 bootstrap classes or you can make your own custom css class and define font size over here and put your class on your html element.
edited Sep 19 '17 at 8:57
bfontaine
9,39774474
answered Sep 1 '17 at 14:47
Mr. Laeeq KhanMr. Laeeq Khan
9817
1
These classes should be used to indicate logical structure, not to control text size.
– Armando Fox
Feb 2 at 19:13
1
i am not talking about java classes... i am just talking about css class. you have to read about css classes first.
– Mr. Laeeq Khan
Feb 16 at 16:27
@ArmandoFox I disagree — HTML classes don't have any intrinsic semantic value the way that HTML elements do. They are largely arbitrary hooks for styling, and Bootstrap has chosen that convention precisely to control font sizing.
– Jon
yesterday
@Jon you have a lot more mileage with HTML+CSS than I do so thanks for your comment. I have to admit I'm surprised though, since I always thought the whole point of using CSS correctly was to allow the HTML elements to reflect the logical structure of the document. Since H1 thru H6 suggest hierarchical sections, I assumed that .h1 thru .h6 were intended to be similarly applied. I defer to your experience though.
– Armando Fox
12 hours ago
@ArmandoFox in terms of HTML structure you're absolutely right — elements should be chosen for their semantic value (e.g. they should describe the content they contain) and then machines/bots can make inferences from that data. But classes don't have any meaning beyond being hooks for CSS or JS, so the naming really becomes a personal choice on the developers' part. I think Bootstrap used this convention because most devs intuitively think "h1 is bigger than h2", so they figured that would be an easy way of visualizing it (e.g. I want this element to be anh3, but be styled like anh1).
– Jon
10 hours ago
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f45999420%2fhow-to-increase-font-size-in-bootstrap-4%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
29
Because Bootstrap 4 uses rem for the font-size unit of most of it's elements, you can set the font-size in px on the HTML element in your own stylesheet and this will change the default sizing Bootstrap applies to your elements. I've included a link to a codeply project, so you can see it in action. The environment already has Bootstrap 4 loaded in it. If you change the value of the font-size for the html selector and run the project you can see how the sizing of the elements all change relative to the root element.
Adding three lines of CSS to your stylesheet should be pretty easy:
html {
font-size: 16px;
}
answered Sep 1 '17 at 14:44
Jade CowanJade Cowan
1,6041922
2
You can also set this to an em value, but you'll need to test at multiple sizes. The main advantage of this method is it will respect the font-size setting of the user agent and user style sheet, making your site more accessible to those with visual impairments.
– LightBender
Sep 1 '17 at 16:57
Such a setting is critical to the entire page. Developer must be aware of its implications.
– NoChance
Oct 3 '18 at 10:55
add a comment |
29
Because Bootstrap 4 uses rem for the font-size unit of most of it's elements, you can set the font-size in px on the HTML element in your own stylesheet and this will change the default sizing Bootstrap applies to your elements. I've included a link to a codeply project, so you can see it in action. The environment already has Bootstrap 4 loaded in it. If you change the value of the font-size for the html selector and run the project you can see how the sizing of the elements all change relative to the root element.
Adding three lines of CSS to your stylesheet should be pretty easy:
html {
font-size: 16px;
}
answered Sep 1 '17 at 14:44
Jade CowanJade Cowan
1,6041922
2
You can also set this to an em value, but you'll need to test at multiple sizes. The main advantage of this method is it will respect the font-size setting of the user agent and user style sheet, making your site more accessible to those with visual impairments.
– LightBender
Sep 1 '17 at 16:57
Such a setting is critical to the entire page. Developer must be aware of its implications.
– NoChance
Oct 3 '18 at 10:55
add a comment |
29
29
29
Because Bootstrap 4 uses rem for the font-size unit of most of it's elements, you can set the font-size in px on the HTML element in your own stylesheet and this will change the default sizing Bootstrap applies to your elements. I've included a link to a codeply project, so you can see it in action. The environment already has Bootstrap 4 loaded in it. If you change the value of the font-size for the html selector and run the project you can see how the sizing of the elements all change relative to the root element.
Adding three lines of CSS to your stylesheet should be pretty easy:
html {
font-size: 16px;
}
answered Sep 1 '17 at 14:44
Jade CowanJade Cowan
1,6041922
Because Bootstrap 4 uses rem for the font-size unit of most of it's elements, you can set the font-size in px on the HTML element in your own stylesheet and this will change the default sizing Bootstrap applies to your elements. I've included a link to a codeply project, so you can see it in action. The environment already has Bootstrap 4 loaded in it. If you change the value of the font-size for the html selector and run the project you can see how the sizing of the elements all change relative to the root element.
Adding three lines of CSS to your stylesheet should be pretty easy:
html {
font-size: 16px;
}
answered Sep 1 '17 at 14:44
Jade CowanJade Cowan
1,6041922
answered Sep 1 '17 at 14:44
Jade CowanJade Cowan
1,6041922
answered Sep 1 '17 at 14:44
Jade CowanJade Cowan
1,6041922
answered Sep 1 '17 at 14:44
Jade CowanJade Cowan
1,6041922
1,6041922
2
You can also set this to an em value, but you'll need to test at multiple sizes. The main advantage of this method is it will respect the font-size setting of the user agent and user style sheet, making your site more accessible to those with visual impairments.
– LightBender
Sep 1 '17 at 16:57
Such a setting is critical to the entire page. Developer must be aware of its implications.
– NoChance
Oct 3 '18 at 10:55
add a comment |
2
You can also set this to an em value, but you'll need to test at multiple sizes. The main advantage of this method is it will respect the font-size setting of the user agent and user style sheet, making your site more accessible to those with visual impairments.
– LightBender
Sep 1 '17 at 16:57
Such a setting is critical to the entire page. Developer must be aware of its implications.
– NoChance
Oct 3 '18 at 10:55
2
2
You can also set this to an em value, but you'll need to test at multiple sizes. The main advantage of this method is it will respect the font-size setting of the user agent and user style sheet, making your site more accessible to those with visual impairments.
– LightBender
Sep 1 '17 at 16:57
You can also set this to an em value, but you'll need to test at multiple sizes. The main advantage of this method is it will respect the font-size setting of the user agent and user style sheet, making your site more accessible to those with visual impairments.
– LightBender
Sep 1 '17 at 16:57
Such a setting is critical to the entire page. Developer must be aware of its implications.
– NoChance
Oct 3 '18 at 10:55
Such a setting is critical to the entire page. Developer must be aware of its implications.
– NoChance
Oct 3 '18 at 10:55
add a comment |
0
you can use .h1 to .h6 bootstrap classes or you can make your own custom css class and define font size over here and put your class on your html element.
edited Sep 19 '17 at 8:57
bfontaine
9,39774474
answered Sep 1 '17 at 14:47
Mr. Laeeq KhanMr. Laeeq Khan
9817
1
These classes should be used to indicate logical structure, not to control text size.
– Armando Fox
Feb 2 at 19:13
1
i am not talking about java classes... i am just talking about css class. you have to read about css classes first.
– Mr. Laeeq Khan
Feb 16 at 16:27
@ArmandoFox I disagree — HTML classes don't have any intrinsic semantic value the way that HTML elements do. They are largely arbitrary hooks for styling, and Bootstrap has chosen that convention precisely to control font sizing.
– Jon
yesterday
@Jon you have a lot more mileage with HTML+CSS than I do so thanks for your comment. I have to admit I'm surprised though, since I always thought the whole point of using CSS correctly was to allow the HTML elements to reflect the logical structure of the document. Since H1 thru H6 suggest hierarchical sections, I assumed that .h1 thru .h6 were intended to be similarly applied. I defer to your experience though.
– Armando Fox
12 hours ago
@ArmandoFox in terms of HTML structure you're absolutely right — elements should be chosen for their semantic value (e.g. they should describe the content they contain) and then machines/bots can make inferences from that data. But classes don't have any meaning beyond being hooks for CSS or JS, so the naming really becomes a personal choice on the developers' part. I think Bootstrap used this convention because most devs intuitively think "h1 is bigger than h2", so they figured that would be an easy way of visualizing it (e.g. I want this element to be anh3, but be styled like anh1).
– Jon
10 hours ago
add a comment |
0
you can use .h1 to .h6 bootstrap classes or you can make your own custom css class and define font size over here and put your class on your html element.
edited Sep 19 '17 at 8:57
bfontaine
9,39774474
answered Sep 1 '17 at 14:47
Mr. Laeeq KhanMr. Laeeq Khan
9817
1
These classes should be used to indicate logical structure, not to control text size.
– Armando Fox
Feb 2 at 19:13
1
i am not talking about java classes... i am just talking about css class. you have to read about css classes first.
– Mr. Laeeq Khan
Feb 16 at 16:27
@ArmandoFox I disagree — HTML classes don't have any intrinsic semantic value the way that HTML elements do. They are largely arbitrary hooks for styling, and Bootstrap has chosen that convention precisely to control font sizing.
– Jon
yesterday
@Jon you have a lot more mileage with HTML+CSS than I do so thanks for your comment. I have to admit I'm surprised though, since I always thought the whole point of using CSS correctly was to allow the HTML elements to reflect the logical structure of the document. Since H1 thru H6 suggest hierarchical sections, I assumed that .h1 thru .h6 were intended to be similarly applied. I defer to your experience though.
– Armando Fox
12 hours ago
@ArmandoFox in terms of HTML structure you're absolutely right — elements should be chosen for their semantic value (e.g. they should describe the content they contain) and then machines/bots can make inferences from that data. But classes don't have any meaning beyond being hooks for CSS or JS, so the naming really becomes a personal choice on the developers' part. I think Bootstrap used this convention because most devs intuitively think "h1 is bigger than h2", so they figured that would be an easy way of visualizing it (e.g. I want this element to be anh3, but be styled like anh1).
– Jon
10 hours ago
add a comment |
0
0
0
you can use .h1 to .h6 bootstrap classes or you can make your own custom css class and define font size over here and put your class on your html element.
edited Sep 19 '17 at 8:57
bfontaine
9,39774474
answered Sep 1 '17 at 14:47
Mr. Laeeq KhanMr. Laeeq Khan
9817
you can use .h1 to .h6 bootstrap classes or you can make your own custom css class and define font size over here and put your class on your html element.
edited Sep 19 '17 at 8:57
bfontaine
9,39774474
answered Sep 1 '17 at 14:47
Mr. Laeeq KhanMr. Laeeq Khan
9817
edited Sep 19 '17 at 8:57
bfontaine
9,39774474
edited Sep 19 '17 at 8:57
bfontaine
9,39774474
edited Sep 19 '17 at 8:57
bfontaine
9,39774474
9,39774474
answered Sep 1 '17 at 14:47
Mr. Laeeq KhanMr. Laeeq Khan
9817
answered Sep 1 '17 at 14:47
Mr. Laeeq KhanMr. Laeeq Khan
9817
answered Sep 1 '17 at 14:47
Mr. Laeeq KhanMr. Laeeq Khan
9817
9817
1
These classes should be used to indicate logical structure, not to control text size.
– Armando Fox
Feb 2 at 19:13
1
i am not talking about java classes... i am just talking about css class. you have to read about css classes first.
– Mr. Laeeq Khan
Feb 16 at 16:27
@ArmandoFox I disagree — HTML classes don't have any intrinsic semantic value the way that HTML elements do. They are largely arbitrary hooks for styling, and Bootstrap has chosen that convention precisely to control font sizing.
– Jon
yesterday
@Jon you have a lot more mileage with HTML+CSS than I do so thanks for your comment. I have to admit I'm surprised though, since I always thought the whole point of using CSS correctly was to allow the HTML elements to reflect the logical structure of the document. Since H1 thru H6 suggest hierarchical sections, I assumed that .h1 thru .h6 were intended to be similarly applied. I defer to your experience though.
– Armando Fox
12 hours ago
@ArmandoFox in terms of HTML structure you're absolutely right — elements should be chosen for their semantic value (e.g. they should describe the content they contain) and then machines/bots can make inferences from that data. But classes don't have any meaning beyond being hooks for CSS or JS, so the naming really becomes a personal choice on the developers' part. I think Bootstrap used this convention because most devs intuitively think "h1 is bigger than h2", so they figured that would be an easy way of visualizing it (e.g. I want this element to be anh3, but be styled like anh1).
– Jon
10 hours ago
add a comment |
1
These classes should be used to indicate logical structure, not to control text size.
– Armando Fox
Feb 2 at 19:13
1
i am not talking about java classes... i am just talking about css class. you have to read about css classes first.
– Mr. Laeeq Khan
Feb 16 at 16:27
@ArmandoFox I disagree — HTML classes don't have any intrinsic semantic value the way that HTML elements do. They are largely arbitrary hooks for styling, and Bootstrap has chosen that convention precisely to control font sizing.
– Jon
yesterday
@Jon you have a lot more mileage with HTML+CSS than I do so thanks for your comment. I have to admit I'm surprised though, since I always thought the whole point of using CSS correctly was to allow the HTML elements to reflect the logical structure of the document. Since H1 thru H6 suggest hierarchical sections, I assumed that .h1 thru .h6 were intended to be similarly applied. I defer to your experience though.
– Armando Fox
12 hours ago
@ArmandoFox in terms of HTML structure you're absolutely right — elements should be chosen for their semantic value (e.g. they should describe the content they contain) and then machines/bots can make inferences from that data. But classes don't have any meaning beyond being hooks for CSS or JS, so the naming really becomes a personal choice on the developers' part. I think Bootstrap used this convention because most devs intuitively think "h1 is bigger than h2", so they figured that would be an easy way of visualizing it (e.g. I want this element to be anh3, but be styled like anh1).
– Jon
10 hours ago
1
1
These classes should be used to indicate logical structure, not to control text size.
– Armando Fox
Feb 2 at 19:13
These classes should be used to indicate logical structure, not to control text size.
– Armando Fox
Feb 2 at 19:13
1
1
i am not talking about java classes... i am just talking about css class. you have to read about css classes first.
– Mr. Laeeq Khan
Feb 16 at 16:27
i am not talking about java classes... i am just talking about css class. you have to read about css classes first.
– Mr. Laeeq Khan
Feb 16 at 16:27
@ArmandoFox I disagree — HTML classes don't have any intrinsic semantic value the way that HTML elements do. They are largely arbitrary hooks for styling, and Bootstrap has chosen that convention precisely to control font sizing.
– Jon
yesterday
@ArmandoFox I disagree — HTML classes don't have any intrinsic semantic value the way that HTML elements do. They are largely arbitrary hooks for styling, and Bootstrap has chosen that convention precisely to control font sizing.
– Jon
yesterday
@Jon you have a lot more mileage with HTML+CSS than I do so thanks for your comment. I have to admit I'm surprised though, since I always thought the whole point of using CSS correctly was to allow the HTML elements to reflect the logical structure of the document. Since H1 thru H6 suggest hierarchical sections, I assumed that .h1 thru .h6 were intended to be similarly applied. I defer to your experience though.
– Armando Fox
12 hours ago
@Jon you have a lot more mileage with HTML+CSS than I do so thanks for your comment. I have to admit I'm surprised though, since I always thought the whole point of using CSS correctly was to allow the HTML elements to reflect the logical structure of the document. Since H1 thru H6 suggest hierarchical sections, I assumed that .h1 thru .h6 were intended to be similarly applied. I defer to your experience though.
– Armando Fox
12 hours ago
@ArmandoFox in terms of HTML structure you're absolutely right — elements should be chosen for their semantic value (e.g. they should describe the content they contain) and then machines/bots can make inferences from that data. But classes don't have any meaning beyond being hooks for CSS or JS, so the naming really becomes a personal choice on the developers' part. I think Bootstrap used this convention because most devs intuitively think "h1 is bigger than h2", so they figured that would be an easy way of visualizing it (e.g. I want this element to be an
h3, but be styled like an h1).– Jon
10 hours ago
@ArmandoFox in terms of HTML structure you're absolutely right — elements should be chosen for their semantic value (e.g. they should describe the content they contain) and then machines/bots can make inferences from that data. But classes don't have any meaning beyond being hooks for CSS or JS, so the naming really becomes a personal choice on the developers' part. I think Bootstrap used this convention because most devs intuitively think "h1 is bigger than h2", so they figured that would be an easy way of visualizing it (e.g. I want this element to be an
h3, but be styled like an h1).– Jon
10 hours ago
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f45999420%2fhow-to-increase-font-size-in-bootstrap-4%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
