Click here to Skip to main content
15,904,638 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Hi Team

My table for order summary is not stretching from the right instead there is an empty space. How do i achieve this in bootstrap?

What I have tried:

<!-- Bootstrap navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <a class="navbar-brand" href="#">Your Brand</a>
    <div class="ml-auto">
        <div class="navbar-nav">
            <a href="basket.php" class="nav-item nav-link">class="fa fa-shopping-cart"><span id="cart-count" class="badge badge-pill badge-danger"><?php echo count($_SESSION['cart']) ?></span></a>
        </div>
    </div>
</nav>

<!-- Bootstrap card with table -->
<div class="card mt-5 col-lg-9">
    <div class="card-header">
        Shopping Cart
    </div>
    <div class="card-body">
        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th>Product Id</th>
                    <th>Product Name</th>
                    <th>Quantity</th>
                    <th>Discount</th>
                    <th>Unit Price</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                <?php while ($row = mysqli_fetch_assoc($result)) { ?>
                    <tr>
                        <td><?php echo $row['productId'] ?></td>
                        <td><?php echo $row['product_name'] ?></td>
                        <td><?php echo $row['quantity'] ?></td>
                        <td><?php echo $row['discount'] ?></td>
                        <td><?php echo $row['unit_price'] ?></td>
                        <td><?php echo $row['total'] ?></td>
                    </tr>
                <?php } ?>
            </tbody>
        </table>
    </div>
</div>


<!--Order summary form here -->

<div class="card col-lg-3">
    <div class="card-header">
        <h5 class="card-title">Order summary</h5>
    </div>
    <div class="card-body">
        <p class="text-muted">Shipping and additional costs are calculated based on the values you have entered.</p>
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Shipping</th>
                        <th>Subtotal</th>
                        <th>Tax</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td id="orderId"></td>
                        <td id="shipping"></td>
                        <td id="subtotal"></td>
                        <td id="tax"></td>
                        <td id="total"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">Coupon code</h5>
            </div>
            <div class="card-body">
                <p class="text-muted">If you have a coupon code, please enter it in the box below.</p>
                <form>
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <button type="button" class="btn btn-primary">class="fa fa-gift"></button>
                    </div>
                    <!-- /input-group-->
                </form>
            </div>
        </div>
    </div>
</div>
HTML

Posted
Updated 26-Apr-23 2:42am

1 solution

You have two tables in that HTML. One is wrapped in a col-lg-9 container; the other is wrapped in a col-lg-3 container.

As soon as your screen reaches 992px wide, the col-lg-9 container will be limited to 75% of its parent's width; the col-lg-3 container will be limited to 25% of its parent's width.

If you want the tables to expand to the full width of the screen, remove those two classes.

Grid system · Bootstrap v4.6[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900