CODEWITHSUNDEEP
twitter-bootstrap
Hi_TecH
Hi_TecH

Reputation: 427

Center align table bootstrap 4.5

I need help solving a boostrap issue. I don't know what else to write, StackOverflow swears at a lot of code and little text, so sorry for this nonsensical text. The question is under the code.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container emp-profile">
  <form action="{{route('user_edit')}}" class="user_edit_form" method="POST">
    <div class="row">
      <div class="col-md-12">
        <div class="profile-head">
          <ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Info</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">My orders</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-md-12">
        <div class="tab-content profile-tab" id="myTabContent">
          <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <table class="table table-borderless align-middle">
              <tbody>
                <tr>
                  <td>
                    <td>
                      <td scope="row"><a class="" href="#"><i class="fas fa-edit"></i><i class="fas fa-times"></i></a></td>
                </tr>
                <tr>
                  <th scope="row">Name</th>
                  <td class="userdata">Name</td>
                </tr>
                <tr>
                  <th scope="row">E-Mail</th>
                  <td class="userdata">E-Mail</td>
                </tr>
                <tr>
                  <th scope="row">Phone</th>
                  <td class="userdata">5555555</td>
                </tr>
                <tr>
                  <td></td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <table class="table">
              <thead>
                <tr>
                  <th scope="col">Name</th>
                  <th scope="col">Qty/th>
                    <th scope="col">Price</th>
                </tr>
              </thead>
              <tbody>
                @foreach($orders as $order) @foreach($order->cart->items as $item)
                <tr>
                  <th scope="row">
                    <a href="/{{$item['code_cat']}}/{{$item['url_cat']}}/{{$item['prod_url']}}"><img class="basketimg mr-1" src="/img/products/{{$item['img']}}"><span class="basket-prod-name">{{$item['name']}}</span></a>
                  </th>
                  <td>
                    <div class="prodcount">{{$item['qty']}}</div>
                  </td>
                  <td>{{$item['cost']}}$</td>
                </tr>
                @endforeach @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

There is a page with 2 tabs. On one orders, on the second user data. Orders are aligned normally, across the entire width, but for some reason the data is on the left. Somehow it turned out to be centered, but crooked. Does anyone have any idea how to do it right?

Orders are not exactly centered, but ok.My orders.

But the user data is on the left.Users' data.

Upvotes: 1

Views: 524

Answers (2)

Hi_TecH
Hi_TecH

Reputation: 427

I was able to do this, but still, it is not perfectly centered. If anyone has any suggestions, write. I just added empty table cells.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
    <div class="container emp-profile">
       <form action="{{route('user_edit')}}" class="user_edit_form" method="POST" enctype="multipart/form-data">
          <div class="row">
             <div class="col-md-12">
                <div class="profile-head">
                   <ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
                      <li class="nav-item">
                         <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Info</a>
                      </li>
                      <li class="nav-item">
                         <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">My orders</a>
                      </li>
                   </ul>
                </div>
             </div>
          </div>
          <div class="row justify-content-center">
             <div class="col-md-12">
                <div class="tab-content profile-tab" id="myTabContent">
                   <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                      <div class="row justify-content-center">
                         <div class="col-10">
                            <table class="table usertable">
                               <tbody>
                                  <tr>
                                     <th></th>
                                     <td></td>
                                     <td></td>
                                     <td><a class="" href="#"><i class="fas fa-edit"></i><i style="display:none;" class="fas fa-times"></i></a></td>
                                  </tr>
                                  <tr>
                                     <th></th>
                                     <th scope="col">Name</th>
                                     <td><span class="userdata">{{ Auth::user()->name }}</span><input style="display:none;" class="useredit" name="name" placeholder="{{ Auth::user()->name }}"></td>
                                     <td></td>
                                  </tr>
                                  <tr>
                                     <th></th>
                                     <th scope="col">E-Mail</th>
                                     <td><span class="userdata">{{ Auth::user()->email }}</span><input style="display:none;" class="useredit" name="email" placeholder="{{ Auth::user()->email }}"></td>
                                     <td></td>
                                  </tr>
                                  <tr>
                                     <th></th>
                                     <th scope="col">Phone</th>
                                     <td><span class="userdata">{{ Auth::user()->phone }}</span><input style="display:none;" class="useredit" name="phone" placeholder="{{ Auth::user()->phone }}"></td>
                                     <td></td>
                                  </tr>
                                  <tr>
                                     <th></th>
                                     <td></td>
                                     <td><input style="display:none;" class="useredit btn btn-primary" type="submit" value="Save"></td>
                                     <td></td>
                                  </tr>
                               </tbody>
                            </table>
                         </div>
                      </div>
                   </div>
                   <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                      <div class="row">
                         <div class="col-12">
                            <table class="table">
                               <thead>
                                  <tr>
                                     <th scope="col">Name</th>
                                     <th scope="col">Qty</th>
                                     <th scope="col">Cost</th>
                                  </tr>
                               </thead>
                               <tbody>
                                  @foreach($orders as $order)
                                  @foreach($order->cart->items as $item)
                                  <tr>
                                     <th scope="row"><a href="/{{$item['code_cat']}}/{{$item['url_cat']}}/{{$item['prod_url']}}"><img class="basketimg mr-1" src="/img/products/{{$item['img']}}"><span class="basket-prod-name">{{$item['name']}}</span></a></th>
                                     <td>
                                        <div class="prodcount">{{$item['qty']}}</div>
                                     </td>
                                     <td>{{$item['cost']}}AZN</td>
                                  </tr>
                                  @endforeach
                                  @endforeach
                               </tbody>
                            </table>
                         </div>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </form>
    </div>
    <script>
       $(document).ready(function(){
         $('.fas.fa-edit').click(function(e){
           e.preventDefault();
         $('.useredit, .fas.fa-times').show();
         $('.fas.fa-edit, .userdata').hide();
       });
         $('.fas.fa-times').click(function(e){
           e.preventDefault();
         $('.useredit, .fas.fa-times').hide();
         $('.fas.fa-edit, .userdata').show();
       });
         $("input[name=userimg]").change(function() {
           $(".user_edit_form").submit();
         });
       });
       
    </script>

Upvotes: 0

codeandcloud
codeandcloud

Reputation: 55200

The text will be aligned left, mostly. To make it align right, you will have to use the style. text-align: center;. Bootstrap has a utility class text-center for align it to center. To make the home tab align center, add that class to the following line like this.

<div class="tab-pane fade show active text-center" 
     id="home" role="tabpanel" aria-labelledby="home-tab">

Upvotes: 1

Related Questions