CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4marginresponsive
KevinM
KevinM

Reputation: 329

Bootstrap 4 remove margin for element via media query

I'm trying to remove the margin mt-2 that I added in the nav-link element via media query in CSS when using mobile screen, but can't achieve that. It could be possible that I'm calling the class incorrectly.

See example here>: enter image description here

@media (max-width: 991px) {

   .nav-link hovtext p-1 mt-2 a{
    margin: 0;
  }
}
    <div class=" col-xs-12 col-sm-8 col-md-4   d-flex clearfix">
          <nav class="nav flex-column footerstyle">
            <a class="nav-link hovtext p-1 mt-2" href="#">Términos de uso</a>
            <a class="nav-link p-1" href="#">Políticas de privacidad</a>
            <a class="nav-link p-1" href="#">Socios</a>
            <a class="nav-link p-1" href="#">Confianza y Seguridad</a>
          </nav>
        </div>

Upvotes: 2

Views: 6186

Answers (3)

Tiramonium
Tiramonium

Reputation: 867

You don't need to declare the class manually, since it already has breakpoint-related options, ranging from mt-# to mt-xl-#. So what you want, according to your comment is to have a top margin on a large screen and none in a small one. And you follow the Bootstrap convention of writing from the smallest breakpoint to the largest one, so it would look like this.

    <!-- 'mt' for the smallest breakpoint (xs) and mt-md for anything with a
        larger size than equal a medium-sized screen (md) -->
    <div class=" col-xs-12 col-sm-8 col-md-4 d-flex clearfix">
        <nav class="nav flex-column footerstyle">
            <a class="nav-link hovtext p-1 mt-0 mt-md-2" href="#">Términos de uso</a>
            <a class="nav-link p-1" href="#">Políticas de privacidad</a>
            <a class="nav-link p-1" href="#">Socios</a>
            <a class="nav-link p-1" href="#">Confianza y Seguridad</a>
        </nav>
    </div>

If you need it to be applied in a bigger breakpoint, just change the 'md' in the mt-md-2 class to whichever breakpoint you want.

Upvotes: 0

pradeep kumar
pradeep kumar

Reputation: 1011

why you are mentioning all the classes? Ref the below code. And you have not mentioned hovtext as class. Class should be represented with '.' before the class name.

i.e .hovtext{...}

@media (max-width: 991px) {

   .hovtext{
    margin: 0;
  }
}

If the above code not working means then mark it as important.

i.e. margin:0 !important;

Upvotes: 0

WebDevBooster
WebDevBooster

Reputation: 14954

You can just use the responsive mt-lg-2 class instead of mt-2.

That will add the top margin for screens that are large (lg) or larger (i.e. those starting at 992px). And for smaller screens, it will default to zero margin.

In other words, that would be the same as adding the classes mt-0 mt-lg-2.

So, you don't need any custom css or media queries for that. The native Bootstrap 4 class mt-lg-2 is designed to do exactly what you are trying to do. The spacing classes in Bootstrap 4 are responsive classes already. You don't need (and shouldn't) use any custom css for those simple tasks.

Here's a working snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-sm-8 col-md-4 d-flex clearfix">
    <nav class="nav flex-column footerstyle">
        <a class="nav-link hovtext p-1 mt-lg-2" href="#">Términos de uso</a>
        <a class="nav-link p-1" href="#">Políticas de privacidad</a>
        <a class="nav-link p-1" href="#">Socios</a>
        <a class="nav-link p-1" href="#">Confianza y Seguridad</a>
    </nav>
</div>

Reference:

https://getbootstrap.com/docs/4.0/utilities/spacing/

Also, important:

The col-xs-* class group doesn't exist in Bootstrap 4 (anymore). Use col-* instead.

Upvotes: 13

Related Questions