How to increase Bootstrap navbar-brand font-size?

html css twitter-bootstrap fonts font-size

44,382

Solution 1

Just use font-size: 100px !important; hope this will be helpful for you.

Solution 2

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>

44,382

Author by

kramer65

Updated on July 26, 2022

Comments

kramer65 almost 2 years

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!