Home / Questions / 4352
Accepted
fredyfx
Asked: 2020-02-18 10:38:36 +0800 CST 2020-02-18 10:38:36 +0800 CST

How to make a right floating DIV with Twitter Bootstrap?

  • 772

I have the following HTML structure with Bootstrap

<div class="row">
    <div class="col-md-9">
     Aqui hay tanto contenido que el scrollbar se va hasta China
    </div>
    <div class="col-md-3">
        <div> 
            Este debe mantenerse flotando a la derecha de manera fija, asi el scroll llegue al piso.
        </div>  
    </div>
</div>

When using position:fixedin divwith the class col-md-3, it goes to the left and is placed on the content of the div col-md-9. I used the Bootstrap affix and it didn't work for me.

html5

3 Answers

  1. Best Answer

    The col-md-3bootstrap class already positions the divto the right thanks to the bootstrap grid system. It is not recommended to assign classes to it to float or position it fixed, but you can do this with the <div>internal.

    To achieve what you are looking for just add style="position: fixed;"the <div>internal.

    <div class="row">
  <div class="col-md-9">
    Aqui hay tanto contenido que el scrollbar se va hasta China
  </div>
  <div class="col-md-3">
    <div style="position: fixed;">
      Este debe mantenerse flotando a la derecha de manera fija, asi el scroll llegue al piso.
    </div>
  </div>
</div>
    • 5

  2. Without using other 'bootstrap' classes or plugins, it would look like this:

    <div class="row">
     <div class="col-md-9">
      Aqui hay tanto contenido que el scrollbar se va hasta China
     </div>
      <div class="col-md-3">
         <div style="position:fixed;left:79.1%;"> 
      Este debe mantenerse flotando a la derecha de manera fija, asi el scroll llegue al piso.
        </div>  
     </div>
</div>

    I hope you have been helpful.

    • 1

  3. If you mean to position the div to the right of a container how would you float:right:use the class .pull-right.

    Or if instead you want to always keep the div to the right with a fixed position try the following: 

    <div class="row">
    <div class="col-md-9">
     Aqui hay tanto contenido que el scrollbar se va hasta China
    </div>
    <div class="col-md-3" style="position: fixed;right: 0;z-index:9999">
        <div> 
            Este debe mantenerse flotando a la derecha de manera fija, asi el scroll llegue al piso.
        </div>  
    </div>
</div>

    Adding the <div>one you want to set the following style to:style="position: fixed;right: 0;z-index:9999"

    • 1