Breaking News: Grepper is joining You.com. Read the official announcement!

bootstrap 5 modal table

Shadow answered on February 3, 2023 Popularity 5/10 Helpfulness 7/10

answer bootstrap 5 modal table

related bootstrap 5 modal table

bootstrap 5 modal table

Comment

<div class="container">
  <div class="height d-flex justify-content-center align-items-center">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    User details
    </button>
  </div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header float-right">
        <h5>User details</h5>
        <div class="text-right">
          <i data-dismiss="modal" aria-label="Close" class="fa fa-close"></i>
        </div>
      </div>
      <div class="modal-body">
        <div>
          <table class="table table-bordered">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">1</th>
                <td>Samso</td>
                <td>Natto</td>
                <td>@samso</td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>Tinor</td>
                <td>Horton</td>
                <td>@tinor_har</td>
              </tr>
              <tr>
                <th scope="row">3</th>
                <td>Mythor</td>
                <td>Bully</td>
                <td>@myth_tobo</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Popularity 5/10 Helpfulness 7/10 Language whatever

Source: Grepper

Tags: bootstrap-5 whatever

Link to this answer
Share Copy Link

Contributed on Feb 03 2023

Shadow

0 Answers Avg Quality 2/10

Closely Related Answers

bootstrap 5 modal table

Comment

<div class="modal fade " id="order_products_{{$order->id}}" tabindex="-1" aria-labelledby="order_products_{{$order->id}}Label" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">@lang('template::all.order_id_products', ['orderId' => $order->id])</h5>
      </div>
      <div class="modal-body p-2 m-2">
        <div class="table-responsive">
          <table class="table table-sm">
            <thead>
              <tr>
                <th scope="col" width="7px" class="text-center">#</th>
                <th scope="col" width="60px"></th>
                <th scope="col">@lang('template::all.product_name')</th>
                <th scope="col" class="text-center">@lang('template::all.quantity')</th>
                <th scope="col" class="text-center" width="130px;">@lang('template::all.profile.my_monthly_payment')</th>
                <th scope="col" class="text-center">@lang('template::all.total_price')</th>
              </tr>
            </thead>
            <tbody>
              @foreach($order->products as $product)
              <tr>
                <th scope="row" class="align-middle text-center">{{$product->id}}</th>
                <td><img src="{{$product->image}}" alt="" width="50" height="50"></td>
                <td class="align-middle">{{AdminService::trans($product->name)}}</td>
                <td class="align-middle text-center">{{$product->quantity}}</td>
                <td class="align-middle text-center"> {{AdminService::pricePrint($product->intend_price , true, true)}}</td>
                <td class="align-middle text-center">{{AdminService::pricePrint($product->total_price_intend, true, true)}}</td>
              </tr>
              @endforeach
              <tr>
                <td colspan="4" class="fw-bold">@lang('template::all.total')</td>
                <td class="text-center fw-bold">{{AdminService::pricePrint($order->intend_price, true, true)}}</td>
                <td class="text-center fw-bold">{{AdminService::pricePrint($order->total_price_intend, true, true)}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer" style="display: block;">
        <button type="button" class="btn btn-primary" id="order_products_{{$order->id}}Button">@lang('template::all.close')</button>
      </div>
    </div>
  </div>
</div>

Popularity 5/10 Helpfulness 7/10 Language html

Source: Grepper

Tags: html bootstrap-5

Link to this answer
Share Copy Link

Contributed on Feb 03 2023

Shadow

0 Answers Avg Quality 2/10

bootstrap 5 modal table

Contents

More Related Answers

bootstrap 5 modal table

Closely Related Answers

bootstrap 5 modal table

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.