'How to increase Bootstrap navbar-brand font-size?

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:

enter image description here

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:

enter image description here

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!

htmlcsstwitter-bootstrapfontsfont-size


Solution 1:[1]

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>

Solution 2:[2]

You can do something like the following. It will not only make your brand-name a link but also will make it a heading. Easily change the font size by using a different heading tag (change h1 to h2, h3 etc). It will be efficient for search engines too.

<nav class="navbar navbar-light bg-light">
   <a class="navbar-brand" href="#"><span class="mb-0 h1">Navbar</span></a>
</nav>

Solution 3:[3]

For Bootstrap > 5 you can use:

<span class="navbar-brand mb-0 h1 fs-2">Your Brand</span>

You have more info in: Getbootstrap

I hope you find it useful

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Codeone
Solution 2 DeveloperDan
Solution 3 antoniolulee

Related Questions