CODEWITHSUNDEEP
cssbootstrap-4
Strahinja Ajvaz
Strahinja Ajvaz

Reputation: 2643

bootstrap 4 align buttons in center

im a little stuck as to how to center align a button group i have:

<section>
  <div class="d-inline mx-auto">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

I've tried to add d-inline and mx-auto to it but it doesnt work. Im not that familiar with the library so could someone please point me in the right direction?

Upvotes: 6

Views: 30115

Answers (7)

nownow1989
nownow1989

Reputation: 1

Making a quick landing page and wanted the button centered. Adding a div was a simple solution for me :)

Learn more

My page in progress

Upvotes: 0

Maizied Hasan Majumder
Maizied Hasan Majumder

Reputation: 1053

Simple way to do that: just add: style="margin-left: 45%;"

<section>
  <div class="d-inline mx-auto" style="margin-left: 45%;">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

Upvotes: 0

Sylvia
Sylvia

Reputation: 1022

add the 2 classes mx-auto d-block to the button

<button class="btn btn-primary mx-auto d-block">My Button</button>

this worked for me when the button was in a card-body div.

Upvotes: 3

ankita patel
ankita patel

Reputation: 4251

By default bootstrap give text-center class. Please add this. Extra css or class haven't needed.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<section>
  <div class="text-center">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

Upvotes: 2

Ehsan
Ehsan

Reputation: 12969

Insert class center :

<div class="d-inline mx-auto center">

And:

 .d-inline.mx-auto.center {
    text-align: center!important;
    display:block!important;
}


.d-inline.mx-auto.center {
    text-align:center!important;
    display:block!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<section>
  <div class="d-inline mx-auto center">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

Upvotes: 1

Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

Different way to also try it, to parent element text-align: center example:

.center { text-align: center; }

TRY THIS CSS 

<section>
    <div class="center">
        <a class="btn btn-outline-primary" href="#">Home</a>
        <a class="btn btn-outline-primary" href="#">Traffic</a>
        <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
        <a class="btn btn-outline-primary" href="#">Alert Logging</a>
        <a class="btn btn-outline-primary" href="#">Diameter Server</a>
        <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
     </div>
</section>

Upvotes: 0

Znaneswar
Znaneswar

Reputation: 3387

Just use margin:auto its working with bootstrap 4

.center{margin:auto;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="row">
  <div class="center">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>
or you can use mx-auto in this way.. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="row">
  <div class="mx-auto">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

Upvotes: 10

Related Questions