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

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

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>

Select allOpen in new window

Hi lenamtl


By following your suggestions I still get:


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>

Select allOpen in new window

Just something else is needed to consider the panel.

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

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>

Select allOpen in new window

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

Much better now!

lenamtl

Thank you for your help!