Hide a div

Asked

Viewed 507 times

0

I have two Ivs and I want one to disappear when I reach 'Md' the other to occupy the 12 columns. How can I do this with Bootstrap?

<div class="container">
  <div class="col">
    Essa desaparece quando chegar em md
  </div>
  <div class="col">
    Essa ocupa todas as 12 colunas quando chegar em md
  </div>
</div>
html css bootstrap

  • How are you doing to "get to Md"?? Edit your question because it is not clear.

  • I’m wearing a bootstrap

  • Who controls this is JS, not Bootstrap.

  • The one that disappears upon arrival in Md should occupy as much before disappearing?

3 answers

2


Bootstrap has a class display abbreviated as "d-{breakpoint}-{value}" you can use it to delimit break-points.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>


<div class="container">
  <div class="col-12 d-md-none">
    Essa desaparece quando chegar em md
  </div>
  <div class="col-12 d-none d-md-block">
    Essa ocupa todas as 12 colunas quando chegar em md
  </div>
</div>

In this example just click on Run and then click on "Whole Page" to see the first <div> disappear.

Reference : https://getbootstrap.com/docs/4.0/utilities/display/

0

If you are using Flexbox (bootstrap), assign an ID to the div that will disappear and assign the class col-12 (for mobile resolutions) and col-Md-6 (for resolutions larger than average) to the div that should occupy the 12 columns, and col-6 to the div that should disappear.

<div class="container">
  <div id="identificadorDaDiv" class="col-6">
    Essa desaparece quando chegar em md
  </div>
  <div class="col-12 col-md-6 ">
    Essa ocupa todas as 12 colunas quando chegar em md
  </div>
</div>

In your CSS, you can add a @media query for medium or smaller resolutions (The default bootstrap is 768px)

@media screen and (max-resolution: 767px) {
    #identificadorDaDiv {
        display: hidden
    }
}

0

How are 2 divs, place col-6 in each one within a row.

The class d-md-none will hide the div on entering the Md, and the class col-md-12 will occupy the 12 columns when entering the Md.

Example:

div.container div.col-6:nth-child(1){
   background: yellow;
}
div.container div.col-6:nth-child(2){
   background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="container">
   <div class="row">
     <div class="col-6 d-md-none">
       Essa desaparece quando chegar em md
     </div>
     <div class="col-6 col-md-12">
       Essa ocupa todas as 12 colunas quando chegar em md
     </div>
   </div>
</div>

Browser other questions tagged html css bootstrap

You are not signed in. Login or sign up in order to post.