How to make button appear in center using bootstrap

Question

I am new to bootstrap and jquery, and working on a small project for my school. I am using bootstrap in my application so that it can be responsive. The problem as you can see in attached image is that both buttons appear vertically at the top of their respective columns.How could I arrange both buttons so that they appear in middle of their respective columns. Below is my code

 <div class="container">
  <div class="row">
   <section class="col-sm-5">
    <div class="form-group">
     <label for="project-name">Enter Data:</label>
     <textarea class="form-control" rows="3" id="textarea1"
      name="input1"></textarea>
     <div class="error" id="javaerror"></div>
    </div>
   </section>
   <section class="col-sm-2 text-center">
    <div class="vcenter">
     <button type="button" class="btn btn-default" id="data1">Process1</button>
    </div>
   </section>
   <section class="col-sm-5">
    <div>
     <label for="project-name">Result</label>
     <textarea class="form-control" rows="3" id="result1"
      name="resultdata"></textarea>
    </div>
   </section>
  </div>

  <div class="row">
   <section class="col-sm-5">
    <div class="form-group">
     <label for="project-name">Enter Data:</label>
     <textarea class="form-control" rows="3" id="textarea2"
      name="input2"></textarea>
     <div class="error" id="openerror"></div>
    </div>
   </section>
   <section class="col-sm-2 text-center">
    <div class="vcenter">
     <button type="button" class="btn btn-default" id="data2">Process2
      </button>
    </div>
   </section>
   <section class="col-sm-5">
    <div>
     <label for="project-name">Result</label>
     <textarea class="form-control" rows="3" id="result2"
      name="resultDataNew"></textarea>
    </div>
   </section>
  </div>
 </div>

My requirements is that both button(Process1,Process2) should appear in the middle as shown in this image

Have you tried `margin: auto 0;` in the stlying of the buttons? — bluecouch, May 30 '18 at 07:06

score 0 · Accepted Answer · answered May 30 '18 at 07:09

0

You can use Bootsraps' 4 vertical alignment https://getbootstrap.com/docs/4.0/utilities/flex/#align-items

answered May 30 '18 at 07:09

Vadzim

296
1
3
11

adding 'display: flex;justify-content: center;align-items: center;' and adding this class at row level fixed my issue. Thanks – Phoenix May 30 '18 at 12:08

score 0 · Answer 2 · answered May 30 '18 at 07:17

You can do one thing,

You can insert a <style> before <body> which should be

    button.center{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

Then for inserting any buttons in a centre you should write <button type="button" class="center">Button</button> and for inserting a normal button remove the center class.

How to make button appear in center using bootstrap

2 Answers2