0

I need to my output in center, but for some reasons by alignment is not coming in center and responsive, any idea how to get that done, my code is as below.

<div class="abc"  style="width:50%;margin:0 auto;text-align:center;">
<ul class="nav nav-tabs" id="myTab" role="tablist"style="width: 390px" >
  <li class="nav-item" role="presentation"  >
      
     
    <button class="nav-link active"  id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="1contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">..ssdd.</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">..werwr.</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">.werwerwer..</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="1contact-tab">.werwerwer..</div>
</div>
</div>
Jasan Kaur
  • 1
  • which part exactly do you need to center? just the whole `.abc` div? – lucasreta Feb 22 '21 at 12:54
  • Welcome to SO. Please try searching before posting a new question, I found many examples searching for your exact title. If you did already research and try those and they didn't help, update your question to explain what happened why they didn't work, etc. https://stackoverflow.com/questions/7165423/twitter-bootstrap-center-pills, https://stackoverflow.com/questions/12434645/center-pills-in-bootstrap, https://stackoverflow.com/questions/48832139/centering-bootstrap-4-pills-to-align-over-each-other-on-small-screens, and many more. – Don't Panic Feb 23 '21 at 15:58
  • Does this answer your question? [Twitter Bootstrap: Center Pills](https://stackoverflow.com/questions/7165423/twitter-bootstrap-center-pills) – Don't Panic Feb 23 '21 at 15:58

1 Answers1

0

You could add justify-content-center w-100 classes to your #myTab element, it will make your pills centered relative to your #myTab element which will be as width as your content

Pof
  • 829
  • 5
  • 20