We help IT Professionals succeed at work.

Could you point how to configure this Bootstrap buttons to be correctly distributed accordingly with this layout?

Medium Priority
75 Views
Last Modified: 2020-02-19
Hi Experts


Could you point how to configure this Bootstrap buttons to be correctly distributed accordingly with this layout?

img010

<div class='row'>

      <div class="panel panel-primary">
      
          <div class='row'>
          
            <div class='col-md-8 pull-right'>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.novo();">
                  <i class="fas fa-video" aria-hidden="true"></i> Minhas Fotos
                </button>
              </div>
            </div>
            
            <div class='col-md-6 pull-right'>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.novo();">
                  <i class="fas fa-video" aria-hidden="true"></i> Todas as Fotos
                </button>
              </div>
            </div>
              
            <div class='col-md-4 pull-right'>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.novo();">
                  <i class="fas fa-video" aria-hidden="true"></i> Enviar Foto
                </button>
              </div>
            </div>
              
          </div>  
       
    </div>
</div>

Open in new window


Thanks in advance!
Comment
Watch Question

CERTIFIED EXPERT

Commented:
Hi,

The problem is that a row div must equal 12 per column type
You have
col-md-8 + col-md-6 + col-md-4 = 18
it must equal 12

so change it to have total of 12
Eduardo FuerteDeveloper and Analyst

Author

Commented:
Hi

My attempt was:



<!--div class='row'-->
<div class="row col-md-12 col-sm-12">

      <div class="panel panel-primary">
      
          <div class='row'>
          
            <div class='col-md-4 pull-right'>
              <div class="btn-group" role="group">
                <!--button type="button" class="btn btn-primary" onclick="hotsite.vitrine.minhasfotos();"-->
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.minhasfotos();">
                  <i class="fas fa-video" aria-hidden="true"></i> Minhas Fotos
                </button>
              </div>
            </div>
            
            <div class='col-md-4 pull-right'>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.novo();">
                  <i class="fas fa-video" aria-hidden="true"></i> Todas as Fotos
                </button>
              </div>
            </div>
              
            <div class='col-md-4 pull-right'>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.novo();">
                  <i class="fas fa-video" aria-hidden="true"></i> Enviar Foto
                </button>
              </div>
            </div>
              
          </div>  
       
    </div>
</div>

Open in new window



img013
CERTIFIED EXPERT
Commented:
Hi,

You should not use the row and column class for the same DIV, also container DIV is missing and it help to align correctly
This is no good
<div class="row col-md-12 col-sm-12">

Open in new window


This is good
<div class="container">
     <div class="row">
          <div class=" col-md-12 col-sm-12">  </div>
       </div>
 </div>

Open in new window


What you can do is to remove the pull class for now and check if the buttons are aligned, if not this probably mean that your panel class or other custom class break the Bootstrap code.

Ref about Container
https://getbootstrap.com/docs/4.4/layout/overview/#containers

Ref about the grid (there are multiple way)
https://getbootstrap.com/docs/4.4/layout/grid/#how-it-works

Which Bootstrap version did you kept v3 or v4 ( If I remember correctly one of your question  you was using both bootstrap versions and JS was missing)
So make sure you have only one Bootstrap version with all files CSS and JS

Difference depending of the version
https://getbootstrap.com/docs/4.0/utilities/float/
https://getbootstrap.com/docs/3.4/css/#helper-classes-floats
Eduardo FuerteDeveloper and Analyst

Author

Commented:
Hi lenamtl


By following your suggestions I still get:

img001
Much better than before.

With this code:
<div class="container">
    <div class="row">
    
          <div class="panel panel-primary">
            <div class=" col-md-12 col-sm-12"> 
                  <div class='row'>
                  
                     <div class="col-sm-12 col-md-6">
                      <div class="btn-group" role="group">
                        <button type="button" class="btn btn-primary" onclick="xxxx;">
                          <i class="fas fa-video" aria-hidden="true"></i> Minhas Fotos
                        </button>
                      </div>
                    </div>
                    
                     <div class="col-sm-12 col-md-3">
                      <div class="btn-group" role="group">
                        <button type="button" class="btn btn-primary" onclick="xxx;">
                          <i class="fas fa-video" aria-hidden="true"></i> Todas as Fotos
                        </button>
                      </div>
                    </div>
                      
                     <div class="col-sm-12 col-md-3">
                      <div class="btn-group" role="group">
                        <button type="button" class="btn btn-primary" onclick="xxx;">
                          <i class="fas fa-video" aria-hidden="true"></i> Enviar Foto
                        </button>
                      </div>
                    </div>
                      
                  </div>  
                  
              </div>
           
        </div>
    </div>
</div>

Open in new window


Just something else is needed to consider the panel.

I couldn't read the material you suggested, yet.
CERTIFIED EXPERT

Commented:
Hi,

Your code is missing the Div for panel body

Here is an example with title body and footer


<div class="panel panel-default">
  
   <div class="panel-heading">

        <h3 class="panel-title">Panel title</h3>

    </div>

    <div class="panel-body">
            Panel content
    </div>

 <div class="panel-footer">Panel footer</div>
</div>

Open in new window


about the panel fro Bootstrap 3
https://getbootstrap.com/docs/3.3/components/#panels
Eduardo FuerteDeveloper and Analyst

Author

Commented:
Much better now!

img002
Eduardo FuerteDeveloper and Analyst

Author

Commented:
lenamtl

Thank you for your help!