What are the default sizes given to <body> tag in Bootstrap framework ?
In this article, we are going to find out about the default sizes given by the bootstrap framework to the <body> tag.
Bootstrap is an awesome CSS and javascript framework to create beautiful and responsive websites which are fast and easy to make. It’s very easy to learn and provides a lot of pre-built components which can be directly added to your HTML and make your website functional at an ease. By default Bootstrap updates the <body> tag to provide better page-wide defaults.
Bootstrap applies the following properties on the body tag:
font-size: 1rem;
margin: 0;
Note: Bootstrap assumes the default font-size “16px” applied by the browser to be equal to 1rem.
Properties applied by bootstrap on body tag
value of font-size
So, these are the default sizes applied by bootstrap on the <body> tag in HTML. Let us look at examples to see these default sizes in effect:
Example 1: Understanding the effect of the default margin value
HTML
<!doctype html>
< html lang = "en" >
< head >
< link rel = "stylesheet"
href =
</ head >
< body >
< h1 >Hello, world!</ h1 >
< script src =
</ script >
</ body >
</ html >
|
Output:
Notice that in the first pic, there is no space between the boundaries and the <h1> tag. This is because bootstrap has set margin to 0 which overrides the default margin applied by the browsers.
Effect of the font-size value: The font size equal to 1 rem means the default font size for a <p> tag or any normal text is equal to 1rem. And 1rem translates (be default) to 16px. Hence the default font size is 16px.
Example 2: Understanding the effect of the font-size value
HTML
<!doctype html>
< html lang = "en" >
< head >
< link rel = "stylesheet"
href =
</ head >
< body >
< p >Hello, world!</ p >
< a href = "#" >GeeksForGeeks</ a >
< span >
Right now reading about default sizes
applied by the bootstrap
</ span >
On the body tag
< script src =
</ script >
</ body >
</ html >
|
Output: As you can see in all the text whether in an a, p or span or without any tag at all, the size is equal to 1rem or 16px (by default).
Last Updated :
03 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...