bootstrap table is not responsive


I have a table which fills data from database. Though i had use the bootstrap when i kept on decreasing the width of the browser, from one point onward the table is going outside the container. How can i make this responsive ? Following are the attached images

 <table  class="table table-responsive table-bordered">

                <th>Spare Id</th>
                <th>Part Number</th>
                <th>Spare Image</th>


                    <input   type="text" class="form-control" id="search" placeholder="Search Spare">

            <tbody id="tableModel">
            foreach($spares as $spare){

                <td ><?php echo $spare->id;?></td>
                <td ><?php echo $spare->partNumber;?></td>
                <td ><?php echo $spare->quantity;?></td>
                <td ><?php echo 'Rs.'. $spare->price;?></td>
                <td ><?php echo $spare->warranty;?></td>

                <td><?php echo '<img  class="img-responsive"  src="data:image/jpeg;base64,'.base64_encode( $spare->image ).'"/>';?></td>

                    <a class=" btn btn-success btn-sm" data-toggle="modal" data-target="#modalEdit" onclick="EditBrand('<?php echo $brand->brandName;?>','<?php echo $brand->id;?>')" >Edit </a>

                    <a onclick="DeleteBrand(<?php echo $brand->id;?>)" style="" class=" btn btn-danger btn-sm"  >Delete </a>



            <?php }?>


This is when the normal width

When i kept on decreasing the size


If you use bootstrap. Wrap your table in a div with table-responsive class.

 <div class="table-responsive">
    <table class="table">

That should work if bootstrap is correctly integrated. Please show your code. Many more people would help you.

You can find this specific information here:

Answered By – Nope

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published