Avatar of Eduardo Fuerte
Eduardo Fuerte
Flag for Brazil asked on

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

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

Avatar of undefined
Last Comment
Eduardo Fuerte

8/22/2022 - Mon
lenamtl

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 Fuerte

ASKER
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
ASKER CERTIFIED SOLUTION
lenamtl

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Eduardo Fuerte

ASKER
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.
Your help has saved me hundreds of hours of internet surfing.
fblack61
lenamtl

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 Fuerte

ASKER
Much better now!

img002
Eduardo Fuerte

ASKER
lenamtl

Thank you for your help!
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.