CODEWITHSUNDEEP
csshtmltwitter-bootstrapparagraph
Haradzieniec
Haradzieniec

Reputation: 9338

Twitter Bootstrap and <p> default height: why 28px?

I'm using Twitter Bootstrap. Everything goes fine, but <p>some text with the font-size of 50px</p> jumps out of the parent <div>. Once I remove bootstrap.min.css as a stylesheet, everything is OK.

Seems like Twitter Bootstrap applies some properties (heights, vertical paddings) on paragraphs because there are no additional properties for p tag in my own css file.

How to fix all <p> so that <p>Paragraph text could be any size and not jump out of the parent div</p>?

OK, here is an update:

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  <style>
    p {
      border:1px solid red;
      font-size:55px;
    }
  </style>
</head>

<body>
  <p>The text of more than 18 px is out of the red border if bootstrap.min.css connected </p>
</body>

Please do not forget to connect bootstrap.min.css to test it.

Upvotes: 3

Views: 10064

Answers (2)

Terry
Terry

Reputation: 14219

Changing all paragraph elements in your site to a font-size of 55px is a bad idea. Don't overwrite a base element with minimal-use customizations. I think a better solution for you would be to make your own custom paragraph class and use that when you need large text.

p.large {
    border: 1px solid red;
    font-size: 55px;
    line-height: 60px;
}

<p class="large">some text with the font-size of 55px</p>

Upvotes: 1

oezi
oezi

Reputation: 51817

as others said, the only (important) thing bootstrap does to a p is:

font-size: 13px;
line-height: 18px;

both inherited from body. the easiest fix for that is to replace the line-height value with a font-relative value:

p{
  line-height: 1.4em;
}

Upvotes: 1

Related Questions