Using bootstrap - text to match parent div width on browser resize

Question

I am using bootstrap and I have a background img that is aligned to the center of timer-background. I want subtext and big-text width to change to be 100% of timer-background so that I can center align them.

HTML:

<div class='col-xs-4'>
    <div class='borders timer-background'>
            <span class='subtext'>june</span><span class="big-text">05</span>
    </div>
</div>

CSS:

.timer-background {
     background: url(../assets/timer_background.png) center center no-repeat;
}

.big-text {
     font-family: 'Tulpen One', cursive;
     color: #ffffff;
     font-size: 120px;
   }

date image

You want the `span` width to be 100% or the font size to scale to fill the space? — Turnip, May 21 '15 at 13:29
I wanted the font to scale to fill the space. I got it working using width:inherit; position:absolute; — nontechguy, May 22 '15 at 10:03

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

Here are a few Stackoverflow articles that I think will point you in the right direction.

How can I vertically center text over a responsive image?

How to create responsive text on top of an image?

Text vertically and horizontally centered over a responsive image

Hope this helps the cause.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 21 '15 at 18:39

cfnerd

3,658
12
32
44

1

I eventually did solve this but thanks for the links they are super helpful! – nontechguy May 22 '15 at 10:01

Using bootstrap - text to match parent div width on browser resize

1 Answers1