Menu
I've got a basic bootstrap navbar with a brand in there. The start of my html looks like this:
<div class="wrapper">
<div class="navbar navbar-white navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">MyAwesomeCompany</a>
etc.
which looks like this:
I now want to change the font to Lato and increase the font, so I added the following to the <head>:
<link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<style>
.navbar-brand
{
font-family: 'Lato', sans-serif;
color:grey;
font-size: 100px;
margin: 0px;
}
</style>
but now it looks like this:
As you can see in the css I tried increasing the font-size to 100 pixels, but it stays so small. Does anybody know what I can do to increase the font-size of the brand? All tips are welcome!
676
Use the . lead class in Bootstrap to increase the font size of a paragraph.
Open your image in Preview - Go to Tools/AdjustSize: Then you can change your width or height to the desired size. Make sure to keep Scale Proportionally checked!
The navbar text and the brand text color can be set using the . navbar-text and . navbar-brand classes. These are the inbuilt navigation bar classes that are be overridden by using the same class name.
A standard navigation bar is created with the . navbar class, followed by a responsive collapsing class: . navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens). To add links inside the navbar, use a <ul> element with class="navbar-nav" .
Just use font-size: 100px !important; hope this will be helpful for you.
142
The font-size property specifies the size, or height, of the font. font-size affects not only the font to which it is applied, but is also used to compute the value of em, rem, and ex length units.
Demo
Try like this
.navbar-brand
{
font-size: 100px;
}
Absolute keywords and values
.navbar-brand
{
font-size: larger;
}
It accepts the following absolute keyword values:
xx-small
x-small
small
medium
large
x-large
xx-large
h1 {
font-size: 250%;
}
h2 {
font-size: 200%;
}
p {
font-size: 100%;
}<h1>MyAwesomeCompany</h1>
<h2>MyAwesomeCompany</h2>
<p>MyAwesomeCompany</p>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
