0

I have the following code:

<div className="col-lg-6 text-lg-left mt-lg-0 col-md-12 mt-md-3 text-md-center" />

where on large screen devices, I want the div to be text aligned to the left, have no margin-top

On medium screen devices, I want the col to be full width, have margin top of 3rem and be centered. This works great and everything however, on small screen sizes, I also want the rules I have on medium screen sizes to persist as well as on xs screen sizes. However, it doesn't.

So I tried this:

<div className="col-lg-6 text-lg-left mt-lg-0 col-md-12 mt-md-3 text-md-center col-sm-12 mt-sm-3 text-sm-center" />

thinking it would work but it doesn't. I'm not sure what I'm doing wrong. I looked at the documentation and their is a sm and xs classes in the documentation I can use but it's not working on those smaller screen devices.

So my question is how can I persist the rules I have on medium screen devices to small and xs classes? I don't want to write custom medium queries I want to try and stick solely to the bootstrap framework.

Thanks,

Jorden
  • 153
  • 1
  • 3
  • 16

1 Answers1

0

As a rule of thumb, always define the rules for smaller breakpoints as they are carried over to the larger breakpoints automatically.

Thus a rule defined for Extra Small (xs) screen is applied all the way upto the Large (lg) screens until it's specified explicitly. So, if you have a specific setting for xs and sm define for xs, and if you have same setting for md and lg define it for md.

Also, in Bootstrap 4, the xs attribute has been dropped. Thus col-xs-3 in Bootstrap 3 becomes col-3 in Bootstrap 4.

Refer the question here for more info.

As for your solution, update the div as below

<div class="col-lg-6 text-lg-left mt-lg-0 col-12 mt-3 text-center">
    Hello World!
</div>

Below is a snippet for the same

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

    <div class="row">
        <div class="col-lg-6 text-lg-left mt-lg-0 col-12 mt-3 text-center">
            Hello World!
        </div>
    </div>

</body>
</html>
Debargha Roy
  • 2,320
  • 1
  • 15
  • 34