1

Estoy intentando ocultar un texto de la siguiente manera

<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>

Pero la clase hidden-md-down no funciona. En la documentación de bootstrap 4 pone que se realiza de esta manera. Responsive utilities - bootstrap 4

6
  • Buenas Borja, ¿Tienes en la pantalla la resolución confirmada que actúa con las medidas a las que afecta esa clase?
    – Eduardorq
    el 18 may. 2017 a las 8:14
  • La clase se ocultará cuando la pantalla sea md o menor, v4-alpha.getbootstrap.com/layout/responsive-utilities/… ahí tienes los test que te indicarán en verde si cumple
    – PriNcee
    el 18 may. 2017 a las 8:23
  • Yo usaría la clase .hidden-xs-up o .hidden-xl-up y así ya te lo oculta en todas las resoluciones.
    – Eduardorq
    el 18 may. 2017 a las 8:29
  • Me he fijado que en la version de bottstrap de github en el css han quitado las clases hidden, supongo que estaran toqueteando algo el 18 may. 2017 a las 9:18
  • "Pero la clase hidden-md-down no funciona". ¿Cómo no funciona? ¿Se oculta siempre? ¿Se muestra siempre? ¿No se oculta en las resoluciones que debería ocultarse?
    – Alvaro Montoro
    el 19 may. 2017 a las 12:32

4 respuestas 4

4

Las clases hidden-* fueron eliminadas en la version 4 de bootstrap, ahora tienes que utilizar "d-none d-lg-block" para ocultar en todos los tamaños menos en el largo.

2
  • Tu respuesta fue reportada como de baja calidad. por favor expandela. mira Cómo responder
    – gbianchi
    el 14 mar. 2018 a las 3:55
  • Considero que esta es la respuesta correcta, pero agrega mas detalle, una explicación más amplia y también puedes incluir este link de GitHub que explica las equivalencias de hidden-* a d-*-* por si alguien mas tiene la duda y llega hasta aquí en busca de la respuesta
    – user22721
    el 14 mar. 2018 a las 5:02
1

Aquí tienes un ejemplo de hidden-md-down funcionando.

<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>

Es posible que te falte alguna de las librerias necesarias (jQuery y Tether), o que la resolución de la pantalla en la que estás probando tu código sea superior a la de la clase, en este caso menor que 992px.

1

¿Con que versión de bootstrap estas trabajando? Pues la versión actual de Bootstrap es 4.3...

Según su documentación esta es una forma para ocultar elementos, pero nada mas lo oculta y ocupa un espacio.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="visible">Aqui esta</div>
<div class="invisible">Aqui no esta.</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Visibilidad

Ahora si quieres ocultar algo según la dimesión de la pantalla... Existe otras clases.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
    <div class="d-none">Esta clase lo oculta para todo</div>
    
    <div class="d-none d-sm-block">Esta clase lo oculta para pantallas extra-pequeñas
    </div>
    
    <div class="d-none d-md-block">Esta clase lo oculta para pantallas pequeñas
    </div>
    
    <div class="d-none d-lg-block">Esta clase lo oculta para pantallas medianas
    </div>
    
    <div class="d-none d-xl-none">Esta clase lo oculta para pantallas grandes
    </div>

    <div class=" d-xl-none">Esta clase lo oculta para pantallas extra-grandes
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Puedes instruirte mejor en la documentación de Bootstrap. Espero haberte ayudado. Ocultar elementos

Te recomiendo ver los ejemplos en pantalla completa, para que visualices mejor.

0

la clase en .hidden se elimino en la version 4 ahorra se utiliza la clase .d-none

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

segun la documentación que hay en el siguiente link https://getbootstrap.com/docs/4.0/utilities/display/

<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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.