CODEWITHSUNDEEP
cssbuttonbootstrap-4
profiler
profiler

Reputation: 627

Bootstrap, center buttons in row

I have the problem with center all button in each col-md-4:

<div class="row position-relative mt-2">
  <div class="col-md-4 center-block">
    <div class="center-block align-to-bottom">
      <div class="btn-group-vertical">
        <p>
          <button class="btn btn-info btn-sm btn-block" type="button">
            button
          </button>
        </p>
        <p>
          <button class="btn btn-warning btn-sm btn-block" type="button">
            button
          </button>
        </p>
      </div>
    </div>
  </div>
  <div class="col-md-4 center-block">
    <div class="btn-group-vertical">
      <p>
        <button class="btn btn-info btn-sm btn-block" type="button">
          button
        </button>
      </p>
      <p>
        <button class="btn btn-info btn-sm btn-block" type="button">
          button
        </button>
      </p>

      <p>
        <button class="btn btn-warning btn-sm btn-block" type="button">
          button
        </button>
      </p>
    </div>
  </div>
  <div class="col-md-4 center-block">
    <p>
      <button class="btn btn-success btn-sm btn-block" type="button">
        button
      </button>
    </p>
  </div>
</div>

Also second question -> I uses also w-100, h-85... But it is no working. I am also looking for solution to set up relative size of buttons.

Upvotes: 0

Views: 800

Answers (1)

Halden Collier
Halden Collier

Reputation: 862

To horizontally align a button you can just add the class text-center to your parent column.

I also removed the p tags and instead added the margin to the button itself with the class mb-2

I did remove a lot of your classes too as they didn't seem to be Bootstrap 4 classes. If these are needed just add them back where you think neccessary.

Also rather than making your button a block which gives it the full width of your parent, I just added another row and put each button in its own full width column which will act as the block.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mt-2">
  <div class="col-md-4 text-center">
    <div class="row">
    
      <div class="col-12 mb-2">
        <button class="btn btn-info btn-sm" type="button">
          Button
        </button>
      </div>
        
      <div class="col-12 mb-2">
        <button class="btn btn-warning btn-sm" type="button">
          Button
        </button>
      </div>
     
      <div class="col-12 mb-2">
        <button class="btn btn-warning btn-sm" type="button">
          Button
        </button>
      </div>
        
    </div>
  </div>
  <div class="col-md-4 text-center">
    <div class="row">
    
      <div class="col-12 mb-2">
        <button class="btn btn-info btn-sm" type="button">
          Button
        </button>
      </div>
        
      <div class="col-12 mb-2">
        <button class="btn btn-info btn-sm" type="button">
          Button
        </button>
      </div>
        
      <div class="col-12 mb-2">
        <button class="btn btn-warning btn-sm" type="button">
          Button
        </button>
      </div>
        
    </div>
  </div>
  <div class="col-md-4 text-center">
    <button class="btn btn-success btn-sm" type="button">
      Button
    </button>
  </div>
</div>

I hope this solves your issues, let me know if it's not quite what you were looking for.

Upvotes: 1

Related Questions