I am having trouble creating a large text header for my website using Twitter Bootstrap. The span12 column is not adjusting to the size of the text as I would like it to.
When I resize the browser window, instead of the text wrapping onto a new line, the letters compress together. I want the row/span12 column to adapt to the text size rather than maintaining a fixed height. Does anyone know how I can achieve this?
Below is the CSS code:
#meettheteam {
border: 1px solid red;
font-weight: bold;
font-family: garamond, 'times new roman', serif;
font-size: 96px;
}
And here is the corresponding HTML code:
<div class='container-fluid'>
<div class='row-fluid' style='border: 1px solid red;'>
<div id='meettheteam' class='span12 pagination-centered' style='border: 1px solid yellow;'>
MEET THE TEAM
</div>
</div>
</div>