Hide in bootstrap 4

Question

Hide in bootstrap 4

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

1

I am trying to hide a text in the following way

<ul class="col-6 col-lg-4">
    <li>
       <i class="fa fa-briefcase" aria-hidden="true"></i>
       <div class="contenedor-eleccion ">
         <h4>Aplicaciones para la nube</h4>
         <p class="hidden-md-down">Para empresa que requiera ampliar sus plataformas de gestión.</p>
       </div>
    </li>

But the hidden-md-down class does not work. In the documentation of bootstrap 4 says that is done in this way. Responsive utilities - bootstrap 4

css bootstrap-4

asked by Borja Calvo 18.05.2017 в 10:03

source

3 answers

Append jquery table Search credit card number in an input or textbox, after this remove it [closed]

score 2 · Answer 1

2

The hidden- * classes were removed in the bootstrap version 4, now you have to use "d-none d-lg-block" to hide in all sizes except the length.

answered by 14.03.2018 в 03:24

score 1 · Answer 2

Here is an example of hidden-md-down working.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div>Este div se muestra.</div>
<div class="hidden-md-down">Este div no.</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

It is possible that you are missing one of the necessary libraries (jQuery and Tether), or that the resolution of the screen on which you are testing your code is higher than that of the class, in this case less than 992px.

score 0 · Answer 3

the class in .hidden was deleted in version 4 saves the class .d-none

<div class="d-none">no soy visible</div>

according to the documentation in the following link link

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<p class='errorposicion_x text-center alert alert-danger hidden'>este se muestra</p>
<p class='errorposicion_x text-center alert alert-danger d-none'>este no se muestra</p>
<p class='errorposicion_x text-center alert alert-danger hidden'> y este si se muestra</p>