Skip to main content
correção ortográfica e referencia
Fonte Link
Lauro Moraes
  • 4mil
  • 4
  • 28
  • 47

Bootstrap possui uma classe display abreviadabreviada como "d-{breakpoint}-{value}" você pode usá-la para delimitar 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>

Neste exmploexemplo basta clicar em executar e depois click em "Página toda" para ver a primeira <div> desaparecer.


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

Bootstrap possui uma classe display abreviad como "d-" você pode usá-la para delimitar 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>

Neste exmplo basta clicar em executar e depois click em "Página toda" para ver a primeira <div> desaparecer.

Bootstrap possui uma classe display abreviada como "d-{breakpoint}-{value}" você pode usá-la para delimitar 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>

Neste exemplo basta clicar em executar e depois click em "Página toda" para ver a primeira <div> desaparecer.


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

Fonte Link
Lauro Moraes
  • 4mil
  • 4
  • 28
  • 47

Bootstrap possui uma classe display abreviad como "d-" você pode usá-la para delimitar 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>

Neste exmplo basta clicar em executar e depois click em "Página toda" para ver a primeira <div> desaparecer.