Take the 2-minute tour ×

I'm trying to create a large text header on my web page. I'm using Twitter Bootstrap and it looks like the span12 isn't adjusting to the text size.

When I shrink the browser screen, instead of the text wrapping to another line, the letters basically squish into one another. I'd like to have the row / span12 column adjust to the size of the text, instead of keeping the height fixed. Does anyone have any idea on how I can do that?

Here is the code:

#meettheteam {
        border: 1px solid red;
        font-weight: bold;
        font-family: garamond, 'times new roman',serif;
        font-size: 96px;


and here is the HTML:

    <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;'>
share|improve this question
add comment

1 Answer

I have seen bootstrap have problems with sizing when you have a border around the div with the span in it. This may be part of the problem. The spans are designed to have a specific width and when you add a border it throws off the calculation. If you want to have a border, put it on a div inside the div with the span. If you remove that and it still doesn't work, please post more information. For instance what is your pagination-centered class doing?

share|improve this answer
add comment

Your Answer


