5

can anyone pls help me in responsive text using Bootstrap 4. I searched everywhere but wierd to see no tutorial in this regard. Here are my codes in case if you want to guide me.

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div style="font-size: 3rem;">Hello World</div>
    </div>
  </div>
</div>
7
  • 4
    Great! Now what's your question? Feb 1, 2018 at 21:54
  • What's happening? What do you expect to happen? Give us an minimal reproducible example
    – jpaugh
    Feb 1, 2018 at 21:55
  • Please change your title to describe the problem or question. Also, please see Why is “Can someone help me?” not an actual question?
    – takendarkk
    Feb 1, 2018 at 22:01
  • If that's literally all of your code, you've forgotten to include Bootstrap, and you've forgotten the all-important viewport meta tag.
    – ceejayoz
    Feb 1, 2018 at 22:06
  • 2
    @csmckelvey, you pros know better. i just expressed my view re title and in result i got -27 resulting suspension for days to "ask" another question. probably a way to welcome a newbie by a pro.
    – Emraan Aly
    Feb 3, 2018 at 21:59

1 Answer 1

19

Well, this is described in the Responsive typography section of the Bootstrap 4 documentation. From the docs: Bootstrap doesn’t do this for you, but it’s fairly easy to add if you need it.

It is indeed not that hard. Basically you have to define the font sizes on the <html> tag for each media breakpoint.

Here is an example:

html { font-size: 1rem; }

@media (min-width: 576px) {
    html { font-size: 1.25rem; }
}
@media (min-width: 768px) {
    html { font-size: 1.5rem; }
}
@media (min-width: 992px) {
    html { font-size: 1.75rem; }
}
@media (min-width: 1200px) {
    html { font-size: 2rem; }
}
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Hello World</h1>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

2
  • ah you have made my life - you guided in a very easiest way. Thanks from a newbie.
    – Emraan Aly
    Feb 2, 2018 at 12:07
  • seems like it was easier for me to just use font-size: 9vw; letter-spacing: 4vw; for my needs
    – Jordan
    Dec 5, 2020 at 19:44

Not the answer you're looking for? Browse other questions tagged or ask your own question.