Bootstrap 4, How do I center-align a button?

<div> <div> <div> <div v-for="job in job"> <div> <h1>{{ job.job_title }}</h1> <p><strong>Google Inc. </strong> - {{ job.location }}</p> <h2><u>Job Description</u></h2> </div> <p v-html="desc"></p> <p>Posted: {{ formatDate(job.date_created) }}</p> <button v-on:click="applyResume()">{{ buttonText }}</button> </div> </div> <div></div> </div> </div> 

Can't figure out how to center this button. In BS 3 I would just use center-block but that's not an option in BS4. Any advice?

10 Answers

In Bootstrap 4 one 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=""> <div> <div> <div> <button>Centered button</button> </div> </div> </div>

If the content to be centered is block or flex (not inline-), one could use flexbox to center it:

<link rel="stylesheet" href=""> <div> <button>Centered button</button> </div>

... which applies display: flex; justify-content: center to parent.

Note: don't use .row.justify-content-center instead of .d-flex.justify-content-center, as .row applies negative margins on certain responsiveness intervals, which results into unexpected horizontal scrollbars (unless .row is a direct child of .container, which applies lateral padding to counteract the negative margin, on the correct responsiveness intervals). If you must use .row, for whatever reason, override its margin and padding with .m-0.p-0, in which case you end up with pretty much the same styles as .d-flex.

Important note: The second solution is problematic when the centered content (the button) exceeds the width of the parent (.d-flex) especially when the parent has viewport width, specifically because it makes it impossible to horizontally scroll to the start of the content (left-most).
So don't use it when the content to be centered could become wider than the available parent width and all content should be accessible.

Try this with bootstrap

CODE:

<div> <button type="submit">btnText</button> </div> 

LINK:

With the use of the bootstrap 4 utilities you could horizontally center an element itself by setting the horizontal margins to 'auto'.

To set the horizontal margins to auto you can use mx-auto . The m refers to margin and the x will refer to the x-axis (left+right) and auto will refer to the setting. So this will set the left margin and the right margin to the 'auto' setting. Browsers will calculate the margin equally and center the element. The setting will only work on block elements so the display:block needs to be added and with the bootstrap utilities this is done by d-block.

<button type="submit">Submit</button> 

You can consider all browsers to fully support auto margin settings according to this answer Browser support for margin: auto so it's safe to use.

The bootstrap 4 class text-center is also a very good solution, however it needs a parent wrapper element. The benefit of using auto margin is that it can be done directly on the button element itself.

Here is the full HTML that I use to center by button in Bootsrap form after closing form-group:

<div> <div> <button type="submit">Submit</button> </div> </div> 

Use text-center class in the parent container for Bootstrap 4

for a button in a collapsed navbar nothing above worked for me so in my css file i did.....

.navbar button { margin:auto; } 

and it worked!!

What worked for me was (adapt "css/style.css" to your css path):

Head HTML:

 <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> 

Body HTML:

 <div> <div> <div> <button> Login </button> </div> </div> </div> 

Css:

.mycentered-text { text-align:center } 

thing is you need to wrap your button in a parent element :

 ` <div> <a href="./templatemo_558_klassy_cafe/index.html">Lavande Restaurant PH</a>` </div> 

you can also just wrap with an H class or P class with a text-center attribute

Its Easy

<div> <button type="button"> Click Me! </button> </div>