CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
the_young_programmer
the_young_programmer

Reputation: 121

rescaling text when resizing with bootstrap

How can I rescale the text using bootstrap? (a h2 actually) The problem is that the heading is getting out of its box. Here is the css box code:

.buton{
    padding-top:50px;
    padding-bottom:50px;
    border:2px solid #E3A739;
    border-radius:10px;
    margin-top:3em;
    margin-bottom:3em;
}

And here is the HTML code:

<div class="row">
                    <div id="iteme" class="buton col-xs-3 col-md-3 col-lg-3">
                        <h2>Iteme</h2>
                    </div>
                  .....

How can I make the heading resize when I resize the page itself? (I want to make the site responsive)

Upvotes: 2

Views: 411

Answers (6)

Matthew
Matthew

Reputation: 922

Bootstrap uses media queries like so. 

@media (min-width: 768px) {
    h2 {
        font-size: 14px;
    }
}
@media (min-width: 992px) {
    h2 {
        font-size: 16px;
    }
}
@media (min-width: 1200px) {
    h2 {
        font-size: 18px;
    }
}

Upvotes: 0

Jozef Leg&#233;ny
Jozef Leg&#233;ny

Reputation: 1167

You can use the vh, vw, vmin and vmax units to resize text depending on the viewport size.

For example

h2 {
  font-size:4vh;
}

will size the text of H2 to 4% of the height of the viewport.

I've put an example JSFiddle here

Upvotes: 0

user3196599
user3196599

Reputation: 

h2{
  font-size:2rem;
}

rems are awesome!

Upvotes: 1

Hive7
Hive7

Reputation: 3675

What you could do is look into media queries and find out the width or height that the page needs to be edited at.

Look here for help with it: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Upvotes: 1

BahaEddine Ayadi
BahaEddine Ayadi

Reputation: 987

You can use the vw instead of px :

.buton h2{
    font-size:3vw;
}

You should change the variable as you want it to be, and you can use media queries with it too, because in small devices, it could become invisible with the actual value (3vw) , so you can change it for small devices to be some bigger value.

You can check the browser support for the viewport units in here : CanIUseIt

I hope that this'll help.

Upvotes: 6

Dylan Wijnen
Dylan Wijnen

Reputation: 219

What i've seen in alot of website is that they use:

font-size: 100%;

on their text elements this makes it scale within its parent. Sometimes it can work sometimes it can become so small its barely readable on a phone. Another option is using media queries.

Upvotes: 3

Related Questions