How to apply Bootstrap's "text-center" on MD devices and below , and not on larger devices?

Question

I have a div that I want to apply Bootstrap's text-center class , only on MD devices and below.

Any device above MD , I don't want to apply text-center class.

<p className='text-capitalize text-center'>
                    Copyright &copy; Tech Store {new Date().getFullYear()} 
                    All Rights Reserved!
</p>

a solution to this would be to use media query and target screens <= 768px — 95faf8e76605e973, Sep 22 '20 at 10:57
read the doc: https://getbootstrap.com/docs/4.5/utilities/text/#text-alignment you can add breakpoint as prefixes — Temani Afif, Sep 22 '20 at 11:04

Becky · Accepted Answer · 2020-09-22T11:08:36.653

2

If you are looking for a bootstrap solution, Use text-lg-left class by setting 'text-center` as default.

  <p className='text-capitalize text-center text-lg-left'>
            Copyright &copy; Tech Store {new Date().getFullYear()} 
             All Rights Reserved!
  </p>

JSFiddle

edited Sep 22 '20 at 11:08

answered Sep 22 '20 at 11:04

Becky

5,467
9
40
73

1

You mean `text-lg-left`. – Y4roc Sep 22 '20 at 11:07
OK thanks , great it works like a charm `text-center text-lg-left` both – JAN Sep 22 '20 at 11:10
1

glad to help :) – Becky Sep 22 '20 at 11:11

How to apply Bootstrap's "text-center" on MD devices and below , and not on larger devices?

1 Answers1