Cargando

Ir a contenido

X

Margin bottom en div de bootstrap





Solución elegida por el autor
Iniciado por George10 , 07 mayo 2015 - 20:52

Hice algunas modificaciones a tu HTML que deberian funcionarte sin problemas:

<div class="leftbar row" style="margin-top:10px;">

   <div class="col-xs-4 text-center" style="background:#ffc016; height:150px;">
       Nombre empresa
   </div>

   <div class="col-xs-8"> 
       <a href="#" class='pull-right'>
           <i class="glyphicon glyphicon-heart-empty"></i>
       </a>
       <h4>Titulo</h4>

       <ul class="row">
           <li class="col-xs-3">
               <small>Nike Inc</small>
           </li>
           <li class="col-xs-3">
               <small>England</small>
           </li>
           <li class="col-xs-3">
               <small>Internship</small>
           </li>
       </ul>         </div>

   <div class="btn-group bottom-right" role="group" aria-label="...">
       <span class="btn btn-default monthly">
           <small>Guardar</small>
       </span>
       <a class="btn btn-default applynow">
           Ver
       </a>
   </div>

</div>

Adicionalmente, debes incluir un poco de CSS para que logres lo que deseas:

.leftbar {
   position: relative;
}
.bottom-right {
   position: absolute;
   bottom: 0;
   right: 15px; 
}

Espero te sea de ayuda. Saludos.



  AUTOR PREGUNTA

Publicado 07 mayo 2015 - 17:12

Alguien sabe como puedo setear el margin bottom en un div con las clases de row de bootstrap, he intentado de muchas formas pero sin exito alguno. Me gustaria que mi fila este al fondo. Alguna idea?

 

  • ¿Tienes la misma pregunta? Yo también
  • Volver arriba

PREGUNTAS SIMILARES


 

Publicado 07 mayo 2015 - 20:47

Podrias colocar tu codigo, de esa forma te podemos ayudar de mejor forma



   AUTOR PREGUNTA

Publicado 07 mayo 2015 - 20:48

Aqui les dejo el codigo, gracias de antemano:

<div class="leftbar" style="margin-top:10px;">
     <div class="row">
       <div class="col-md-4">
         <div style="background:#ffc016; height:150px;">
           <div class="text-center">
               Nombre empresa
           </div>              </div>
       </div>
       <div class="col-md-8">
         <div class="row">
           <div class="col-md-10">
               <h4>Titulo</h4>
           </div>
           <div class="col-md-2 text-right heart"><a href="#"><span class="glyphicon glyphicon-heart-empty"></span></a></div>
         </div>

         <div class="row">
           <div class="col-md-3"><small>Item 1</small></div>
           <div class="col-md-3"><small>Item 2</small></div>
           <div class="col-md-3"><small>Item 3</small></div>
           <div class="col-md-3"><small>Item 4</small></div>
         </div>

         <div class="row thisrow">
           <div class="col-md-2">&nbsp;</div>
           <div class="col-md-10 text-right heart">
               <div class="btn-group" role="group" aria-label="...">
                   <span class="btn btn-default monthly"><small>Guardar</small></span>
                   <a class="btn btn-default applynow">Ver</a>
               </div>
           </div>
         </div>
       </div>
     </div>
     </div>


 

Publicado 07 mayo 2015 - 20:51

Puedes probar con el margen en la division del boton de la siguiente forma:

<div class="btn-group" role="group" aria-label="..." style="margin-top:_px">
                   <span class="btn btn-default monthly"><small>Guardar</small></span>
                   <a class="btn btn-default applynow">Ver</a>
               </div>


 

Publicado 07 mayo 2015 - 20:52

Hice algunas modificaciones a tu HTML que deberian funcionarte sin problemas:

<div class="leftbar row" style="margin-top:10px;">

   <div class="col-xs-4 text-center" style="background:#ffc016; height:150px;">
       Nombre empresa
   </div>

   <div class="col-xs-8"> 
       <a href="#" class='pull-right'>
           <i class="glyphicon glyphicon-heart-empty"></i>
       </a>
       <h4>Titulo</h4>

       <ul class="row">
           <li class="col-xs-3">
               <small>Nike Inc</small>
           </li>
           <li class="col-xs-3">
               <small>England</small>
           </li>
           <li class="col-xs-3">
               <small>Internship</small>
           </li>
       </ul>         </div>

   <div class="btn-group bottom-right" role="group" aria-label="...">
       <span class="btn btn-default monthly">
           <small>Guardar</small>
       </span>
       <a class="btn btn-default applynow">
           Ver
       </a>
   </div>

</div>

Adicionalmente, debes incluir un poco de CSS para que logres lo que deseas:

.leftbar {
   position: relative;
}
.bottom-right {
   position: absolute;
   bottom: 0;
   right: 15px; 
}

Espero te sea de ayuda. Saludos.



   AUTOR PREGUNTA

Publicado 08 mayo 2015 - 04:17

Gracias crack! como anillo al dedo





PREGUNTAS SIMILARES

X