How to center align a button using bootstrap?

Question

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <button type="button" class="btn btn-outline-primary">Gallary</button>
    </div>
  </div>
</div>

I'm new to html and bootstrap. I'm trying to place a button in the center of the webpage vertically and horizontally. I have created a container and added a row inside it. Inside the row I offsetted a 4 column div element. Inside the div element is the button. But this button does'nt seem to be in the center. If I add a second button and tried offsetting it, it would be placed in the center but the hover wont work(or button does'nt work).

score 2 · Answer 1 · edited Jan 16 '19 at 20:14

In Bootstrap 4 you should use the text-center class to align inline-blocks.

NOTE: text-align:center; defined in a custom class you apply to your parent element will work regardless of the Bootstrap version you are using. And that's exactly what .text-center applies.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">    
<div class="container">
  <div class="row">
    <div class="col text-center">
      <button class="btn btn-default">Centered button</button>
    </div>
  </div>
</div>

AndrewL64 · Answer 2 · 2019-01-16T20:01:52.433

0

As described in the official Bootstrap Docs, you can just add the class name text-center to a parent class list to horizontally center it's children text elements using text-align: center.

Check and run the following Code Snippet for a practical example of using the text-center class name:

/* CSS */

a {text-decoration: none;}

<!-- HTML -->

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">

    <div class="col-md-4 col-md-offset-4 text-center">
        <button type="button" class="btn btn-outline-primary"><a href="#linkToYourOtherPage">Gallary</a></button>
    </div>

  </div>
</div>

edited Jan 16 '19 at 20:01

answered Jan 16 '19 at 19:46

AndrewL64

15,794
8
47
79

This positions the button perfectly for me. But the button doesn't seem to work in google chrome. No redirecting, hover, or cursor. It works while running code snippet. – Kiran George Jan 16 '19 at 19:57
Hmm.... That's weird. Do you need the button to redirect you to a link? – AndrewL64 Jan 16 '19 at 19:58
I just need it as a button to take me to the next page. – Kiran George Jan 16 '19 at 20:00
Then you need to nest an anchor tag inside the button. Let me update the answer. – AndrewL64 Jan 16 '19 at 20:00
Check the updated code snippet. – AndrewL64 Jan 16 '19 at 20:03
Still it's the same. Button doesn't react to the cursor. – Kiran George Jan 16 '19 at 20:04
Can you post the exact code in jsfiddle.net and give me the link. Ill check it out. – AndrewL64 Jan 16 '19 at 20:08
https://jsfiddle.net/tjsw7r2p/#&togetherjs=9fslTNNhMS – Kiran George Jan 16 '19 at 20:13
This code runs perfectly in jsfiddle and code snippet but not in the google chrome. In chrome the button just doesn't work. – Kiran George Jan 16 '19 at 20:14

score 0 · Answer 3 · answered Jan 16 '19 at 19:48

There is a class 'text-center' already with the property of text-align: center in bootstrap. You should use that in the parent element in order to center align child elements.

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4 text-center">
      <button class="btn btn-default">Gallery</button>
    </div>
  </div>
</div>

How to center align a button using bootstrap?

3 Answers3