CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
AndrewLeonardi
AndrewLeonardi

Reputation: 3512

Align four buttons evenly stacked with Bootstrap?

I'm trying have have two rows of two buttons stacked on top of each other like below:

[button][button]
[button][button]

These buttons need to be in the center of the screen and evenly take up the space below the picture. I am very close with the code below but cannot get them centered correctly. How would I change my code to accomplish this:

[    Image     ]

[button][button]
[button][button]

Also I feel like I'm making this overly complicated. Is there an easier way to stack buttons evenly in the center? Thank you!

    /*Four Button Set-up*/
      
         .buttonAnswerLeft{
            width: 25%;
            max-width: 800px;
            font-size: 25px;
            display: inline-block;
            text-align:center;    
        }
        
        .buttonAnswerRight{
            width: 25%;
            max-width: 800px;
            font-size: 25px;
            display: inline-block;
             text-align:center;
             float: left;
        }
     <img class='image center-block' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
              </div>
        
               <div class="button-box col-lg-12 col-xs-12">
                <button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info   '> Absolutely sure, I'm not going.</button>
                <button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info   '> Pretty sure I'm not going. </button>
                </div>
                <div class="button-box col-lg-12 col-xs-12">
                <button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info   '> It's doubtful. </button>
                <button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info   '> It's a maybe. </button>
            </div>
        </div>
    </div>

Upvotes: 0

Views: 792

Answers (7)

Pete
Pete

Reputation: 58412

I know you have accepted an answer already but it doesn't seem to answer your question

First, whatever contains the following code must have text-align:center on it (in the example bootply, I have put this on the body tag).

Second, I have assumed you are using bootstrap because of the classes - this makes no difference but that's why I have done the example in bootply.

Third, wrap all elements in an inline element that has a max width of 100%;

Fourth, make image block and max-width of 100%

4th as your buttons seem to be inline-block elements, you can add box-sizing and 50% width to them and then comment out the space inbetween, then you should achieve what you are after

body {
  text-align: center;
}
.image-container {
  display: inline-block;
  max-width: 100%;
}
.image-container .image {
  display: block;
  max-width: 100%;
}
button {
  width: 50%;
  box-sizing: border-box;
}
<div class="image-container">
  <img class="image center-block" id="image6" src="http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg">

  <div class="button-box col-lg-12 col-xs-12"><!--
     --><button id="" type="button" class="buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info   "> Absolutely sure, I'm not going.</button><!--
     --><button id="" type="button" class="buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info   "> Pretty sure I'm not going. </button><!--
   --></div>
  <div class="button-box col-lg-12 col-xs-12"><!--
    --><button id="" type="button" class="buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info   "> It's doubtful. </button><!--
    --><button id="" type="button" class="buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info   "> It's a maybe. </button><!--
   --></div>
</div>

Example bootply

The above is fully responsive up to the max width of the image

Upvotes: 2

R. P&#252;lsinger
R. P&#252;lsinger

Reputation: 165

I tried something for you:

Fiddle:

JSFiddle

HTML:

<div id="img-div" class="col-xs-12">
</div>
<div class="row">
  <!-- Set this to your required width and offset -->
  <div class="row">
    <div class="col-xs-6">
      <button class="btn btn-block" type="button">A</button>
    </div>
    <div class="col-xs-6">
      <button class="btn btn-block" type="button">B</button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6">
      <button class="btn btn-block" type="button">C</button>
    </div>
    <div class="col-xs-6">
      <button class="btn btn-block" type="button">D</button>
    </div>
  </div>
</div>

CSS:

.btn {
  width: 100%;
}
#img-div    
{
  width: 100%;
  height: 600px;
  background-size: cover;
  background-image: url('http://i.dailymail.co.uk/i/pix/2013/10/22/article-2471794-18E82E4300000578-360_638x405.jpg');
}

Upvotes: 0

Andrew Stalker
Andrew Stalker

Reputation: 757

If you are using bootstrap then use the grid system to create a simple layour for the buttons:

<div class="row">
    <div class="col-xs-4 col-xs-offset-4"> <!-- set this to the required width and offset -->
        <img class='image' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
    </div>
</div>

<div class="row">
<div class="col-xs-4 col-xs-offset-4"> <!-- Set this to your required width and offset -->
    <div class="row">
        <div class="col-xs-6">
            <button class="btn btn-block" type="button">Button 1</button>
        </div>
        <div class="col-xs-6">
            <button class="btn btn-block" type="button">Button 2</button>
        </div>
    </row>
    <div class="row">
        <div class="col-xs-6">
            <button class="btn btn-block" type="button">Button 3</button>
        </div>
        <div class="col-xs-6">
            <button class="btn btn-block" type="button">Button 4</button>
        </div>
    </div>
</div>
</div>

http://getbootstrap.com/css/#grid

Upvotes: 0

coding-dude.com
coding-dude.com

Reputation: 808

Here's my solution:

you can use the grid system of Bootstrap. The idea is that the class "row" spans for the full width of the parent, and then tell each button to stretch for 25% of its parent (col-xs-3). The first button in each row also needs an offset of 25% (col-xs-offset-3).

I recommend to read about the grid system: http://getbootstrap.com/css/#grid

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">



<div >
  <div>
    <div>
      <img class='image center-block img-responsive' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
          </div>

           <div class="button-box row">
            <button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info col col-xs-3 col-xs-offset-3 '> Absolutely sure, I'm not going.</button>
            <button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info col col-xs-3'> Pretty sure I'm not going. </button>
            </div>
            <div class="button-box row">
            <button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info col col-xs-3 col-xs-offset-3 '> It's doubtful. </button>
            <button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info col col-xs-3'> It's a maybe. </button>
        </div>
    </div>
</div>

Upvotes: 1

Jman
Jman

Reputation: 27

Add some row classes and then make the buttons their own columns.

/*Four Button Set-up*/

     .buttonAnswerLeft{
        width: 100%;
        max-width: 800px;
        font-size: 50px;
        display: inline-block;
        text-align:center;


    }

    .buttonAnswerRight{
        width: 100%;
        max-width: 800px;
        font-size: 25px;
        display: inline-block;
         text-align:center;
         float: left;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">

 <div class="col-lg-12 col-xs-12">
<img class='image center-block' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg' width="100%">
</div>
  </div>         
           <div class="row">
            <div class="button-box col-lg-6 col-xs-6">
            <button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info   '> It's doubtful. </button>
        </div>
          <div class="button-box col-lg-6 col-xs-6">
            <button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info   '> It's doubtful. </button>
        </div>
        </div>
<div class="row">
            <div class="button-box col-lg-6 col-xs-6">
            <button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info   '> It's doubtful. </button>
        </div>
          <div class="button-box col-lg-6 col-xs-6">
            <button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info   '> It's doubtful. </button>
        </div>
        </div>

Upvotes: 0

Sir McPotato
Sir McPotato

Reputation: 949

You should take advantage of the Bootstrap grid layout, even for your buttons :)

Example : http://codepen.io/anon/pen/MJoavP

I have made two different buttons rows, so you can check the differences 

<div class="container">
  <div class="row">
    <img class='image center-block' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
  </div>
  <hr>
  <div class="row">
        <button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info col-md-5 pull-left'> Absolutely sure, I'm not going.</button>
        <button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info col-md-5 pull-right'> Pretty sure I'm not going. </button>
    </div>
    <div class="row">
        <button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info col-md-6'> It's doubtful. </button>
        <button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info col-md-6'> It's a maybe. </button>
    </div>
</div>

Upvotes: 0

Arun CM
Arun CM

Reputation: 3435

Are you expecting result something like this?
You can use bootstrap text-centerclass to make the buttons center

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<img class='image center-block col-lg-12 col-xs-12 col-md-12' id='image6' src='http://mooxidesign.com/wp-content/uploads/2015/04/Online-Education.jpg'>
</div>

<div class="button-box col-lg-12 col-xs-12 col-md-12 text-center">
  <button id='' type="button" class='buttonAnswerLeft noCollegeForSure buttonsQuestion6 btn btn-info   '>Absolutely sure, I'm not going.</button>
  <button id='' type="button" class='buttonAnswerRight noCollegeForSure buttonsQuestion6 btn btn-info   '>Pretty sure I'm not going.</button>
</div>
<div class="button-box col-lg-12 col-xs-12 text-center">
  <button id='' type="button" class='buttonAnswerLeft maybeCollege buttonsQuestion6 btn btn-info   '>It's doubtful.</button>
  <button id='' type="button" class='buttonAnswerRight maybeCollege buttonsQuestion6 btn btn-info   '>It's a maybe.</button>
</div>
</div>
</div>

Upvotes: 1

Related Questions