Twitter Bootstrap: Center Pills

How do I center the twitter bootstrap tabs on the page?

nav-tabs list items are automatically floated to the left by the bootstrap so you have to reset that and instead display them as inline-block, and to center menu items we have to add the attribute of text-align:center to the container, like so:

CSS

.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs, .nav-pills {
    text-align:center;
}

Demo: http://jsfiddle.net/U8HGz/2/show/
Edit here: http://jsfiddle.net/U8HGz/2/

Edit: patched version that works in IE7+ provided by user @My Head Hurts down in the comments below.

Demo: http://jsfiddle.net/U8HGz/3/show/
Edit here: http://jsfiddle.net/U8HGz/3/

Center Pills in Bootstrap

You need to override the .nav-pills css classes defined by bootstrap (as you are already doing). You should update the margin and the specify a width for the element.

.nav-pills {
    margin: 0 auto;
    padding: 0;
    width: 400px;
}

Centering Bootstrap 4 pills to align over each other on small screens

Is there a build in bootstrap 4 trick that will align these three to centre

One of the first tricks is to use Bootstrap classes that actually exist.

col-6-lg col-4-md col-1-sm classes don't exist.

The next best trick is to replace your nav-tabs class with nav-item because the nav-tabs class isn't designed to be used the way you attempted to.

The mx-auto class needs to be added to the column to center it.

Finally, adding nav-justified to the parent element will do the trick of spreading the pills evenly. And for padding, you can use responsive padding classes px-lg-3 p-md-2 p-1.

Click the "run code snippet" button below and expand to full page:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">    <div class="row">        <div class="col-lg-12 col-sm-5 col-6 text-center mx-auto">            <h4 class="h4">Follow Social Media</h4>            <ul class="nav nav-pills nav-justified">                <li class="nav-item px-lg-3 p-md-2 p-1">                    <a class="nav-link active social social_f" href="#">Facebook</a>                </li>                <li class="nav-item px-lg-3 p-md-2 p-1">                    <a class="nav-link active social social_i" href="#">Instagram</a>                </li>                <li class="nav-item px-lg-3 p-md-2 p-1">                    <a class="nav-link active social social_y" href="#">Youtube</a>                </li>            </ul>         </div>    </div></div>

how do I align bootstrap tabs in the center?

.nav-tabs > li {
    float:none;
    display:inline-block;
    zoom:1;
}

.nav-tabs {
    text-align:center;
}

http://jsfiddle.net/j751b1mb/4/

How can I center Twitter-Bootstrap 3 navbar links?

Bootstrap 3 has a nav-justified class that can be used on nav. No extra CSS required:

<div class="container">
  <h3 class="text-muted">Project name</h3>
  <ul class="nav nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Downloads</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Demo: http://bootply.com/72519

Based on the comments, to have full-width centered links using the navbar-nav class, use flexbox...

.navbar-center {
    width:100%;
    display: flex;
}
.navbar-center>li {
    flex:1 1 auto;
}

<div class="navbar navbar-default">
    <div class="container">
        <ul class="nav navbar-nav navbar-center text-center">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">More</a></li>
            <li><a href="#">Options</a></li>
        </ul>
    </div>
</div>

https://www.codeply.com/go/6ZE3obnpuP

Also see
Bootstrap NavBar with left, center or right aligned items

Center Navbar in Bootstrap

Center Pills nav and Pills content Bootstrap

You could use the .mx-auto class with your .w-50 class, it will horizontally center your form

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css" rel="stylesheet"/>
<!-- Pills navs -->
<ul class="nav nav-pills nav-justified mb-3 w-50 mx-auto" id="ex1" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="tab-login" data-mdb-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a
        >

      </li>
      <li class="nav-item" role="presentation">
        <a
          class="nav-link"
          id="tab-register"
          data-mdb-toggle="pill"
          href="#pills-register"
          role="tab"
          aria-controls="pills-register"
          aria-selected="false"
          >Register</a
        >
      </li>
    </ul>
    <!-- Pills navs -->

    <!-- Pills content -->
    <div class="tab-content">
      <div
        class="tab-pane fade show active"
        id="pills-login"
        role="tabpanel"
        aria-labelledby="tab-login"
      >

        <form action="/login" method="post">

          <br>
          <!-- Email/Username input -->
          <div class="form-outline mb-4 w-50 login">
            <input type="text" id="loginCred" name="loginCred" autofocus autocomplete="off" class="form-control" />
            <label class="form-label" for="loginCred">Email or username</label>
          </div>
          <br>

          <!-- Password input -->
          <div class="form-outline mb-4 login">
            <input type="password" id="loginPassword" name="loginPassword" class="form-control" />
            <label class="form-label" for="loginPassword">Password</label>
          </div>

          <!-- 2 column grid layout -->
          <div class="row mb-4">

            <div class="col-md-12 d-flex justify-content-center">
              <!-- Simple link -->
              <a href="#!">Forgot password?</a>
    </div>

    </div>

    <!-- Submit button -->
    <button type="submit" id="login" disabled="disabled" class="btn btn-dark btn-block mb-4">Log in</button>

    </div>
    <!-- Pills content -->