Clever Geek Handbook

Positioning 3 split buttons

So I have 3 buttons in a row (2 boot buttons and 1 basic button) and I want to position them accordingly. So each one is inside a div width: 32%; (the divs themselves are 96% so there is exactly the third one for each "mini-div"). Then I want each button to be centered in "mini divs". I tried margin: auto

but it doesn't work. I did it with the main button using align-text: center

. However, 2 others that are split-buttons

sticking to the left of their divs.

Here's the image (the blue rectangles are the border of the "mini divs":

screencap

Here's my HTML ...

<div id="boutons">
    <!-- Split button, ajouter -->
    <div class="btn-group dropup" id="btn1">
        <button type="button" class="btn btn-primary">Ajouter 1 vecteur</button>
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu" role="menu" id="ajouter">
            <li><a href="#">1</a> </li>
            <li><a href="#">2</a> </li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a> </li>
            <li><a href="#">5</a> </li>
        </ul>
    </div>
    <!-- Split button, enlever -->
    <div class="btn-group dropup" id="btn2">
        <button type="button" class="btn btn-danger">Enlever 1 vecteur</button>
        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu" role="menu" id="enlever">
            <li><a href="#">1</a> </li>
            <li><a href="#">2</a> </li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a> </li>
            <li><a href="#">5</a> </li>
        </ul>
    </div>
    <div id="btn3">
        <button type="button" class="btn btn-info">Activer le graphique</button>
    </div>
</div>

... and CSS

#boutons
{
    margin-left: auto;
    margin-right: auto;
    width: 96%;
}

.btn-group a
{
    text-align: center;
    font-weight: bold !important;
}

#btn1, #btn2, #btn3
{
    display: inline-block;
    width: 32%;
}

#btn3
{
    text-align: center;    
}
+3


source to share


4 answers


Place a split button (or btn-group

) inside another div:

<div id="boutons">
  <div id="btn1">
    <div class="btn-group dropup" >
      <!-- btn-group content -->
    </div>
  </div>

  <div id="btn2">
    <div class="btn-group dropup">
      <!-- btn-group content -->
    </div>
  </div>

  <div id="btn3">
    <button type="button" class="btn btn-info">Activer le graphique</button>
  </div>
</div>


and then this css will work fine:

#boutons > div {
  text-align: center;
}
+2


source


You need to wrap your buttons in a different group to do the alignment: take a look here: http://www.bootply.com/6FnWLABceC



<div id="btn1">
    <div class="btn-group dropup">
 ...
+1


source 


#btn3
{
    text-align: center;    
}

Only applicable to your btn3

AND

.btn-group a
{
    text-align: center;
    font-weight: bold !important;
}

Applicable to your a

inside your btn's

Try:

#btn1,
#btn2,
#btn3{
    text-align: center;    
}
0


source


change your CSS to

/* CSS used here will be applied after bootstrap.css */
#boutons
{
    margin-left: auto;
    margin-right: auto;
    width: 96%;
}

.btn-group a
{
    text-align: center;
    font-weight: bold !important;
}

#btn1, #btn2, #btn3
{
    display: inline-block;
    width: 32%; background:#fc0;text-align: center;
}

#btn3
{
    text-align: center;    
}
.btn-group > .btn, .btn-group-vertical > .btn{float:none;}
.btn-group > .btn + .dropdown-toggle {
    padding-right: 8px;
    padding-left: 8px;
    margin-left: -4px;
}

See Bootply (I changed the bg color so you can see the alignment, but you should obviously tweak it to your needs)

0


source






More articles:


All Articles