on medium and below medium screen sizes i have 4 cols
that will be above each others, i need to give 2 cols
some margin on medium and below medium screen sizes and remove it on above medium screen sizes, so i give it class mt-5 mt-md-0
, but the mt-5
class overrides mt-md-0
on above medium screen sizes, am i using it the wrong way ?
import React from "react";
import { useTranslation } from "react-i18next";
function CoreValues() {
const { t } = useTranslation();
return (
<div className="container-fluid px-0">
<div className="row px-lg-5">
<div className="col-lg-6">
...
</div>
<div className="col-lg-6 mt-5 mt-md-0">
...
</div>
</div>
<div className="row mt-5 px-lg-5">
<div className="col-lg-6">
...
</div>
<div className="col-lg-6 mt-5 mt-md-0">
...
</div>
</div>
</div>
);
}
export default CoreValues;
Johnny — I've created an html code snippet based on your question. If you run and expand the snippet, you can see the margin-top switching from 3rem to 0 on larger (> 768px) screens.
The attached screen capture shows mt-md-0
overriding mt-5
in developer tools.
If you are experiencing something different, it would be easiest to see what's happening if you would post a functional code snippet, rather than copying your code from your React module.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid px-0">
<div class="row px-lg-5">
<div class="col-lg-6">
...
</div>
<div class="col-lg-6 mt-5 mt-md-0">
...
</div>
</div>
<div class="row mt-5 px-lg-5">
<div class="col-lg-6">
...
</div>
<div class="col-lg-6 mt-5 mt-md-0">
...
</div>
</div>
</div>