CODEWITHSUNDEEP
htmltwitter-bootstrapbootstrap-4
feyZ1g
feyZ1g

Reputation: 62

How to create responsive HTML on mobile with bootstrap?

I am using Bootstrap v4.3; my desktop view is like this:

enter image description here

But it looks like this in the mobile view, but I want it to look like the black rectangle. enter image description here

<td>
    <table style="border-style: solid;" class="table-bordered">
        <thead>
            <center>
                <h4>STACKOVERFLOW</h4>
            </center>
            <tr>
                <td colspan="2" class="p-2 mb-2 bg-warning text-dark" style="font-family:'Tahoma'" align="center">
                    <h4><small>ACTUAL MONTH PERFORMANCE</small></h4></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td align="center" class="p-1 mb-2 text-dark" style="background-color: #e8e5e1; font-family:'Tahoma'">TODAY</th>
                    <td align="center" class="p-1 mb-2 text-dark" style="background-color: #e8e5e1; font-family:'Tahoma'">STATUS</td>
            </tr>
            <tr>
                <td align="center" class="p-2 mb-2 text-dark" style=" font-family:'Tahoma'">%88.89</td>
                <td align="center" class="p-2 mb-2 text-dark" style=" font-family:'Tahoma'"><img src="X.gif" height="40" width="40"></td>
            </tr>
        </tbody>
    </table>
</td>

Upvotes: 0

Views: 43

Answers (2)

user9453520
user9453520

Reputation:

put your content in a row and then give each box this class:

<div class="col-md-3 col-sm-12">

   <!-- content here -->

</div>

this will make each box's width 25% in the medium sized screens but it converts to 100% of the parent if the screen gets smaller.

Upvotes: 0

Armin
Armin

Reputation: 369

Bootstrap divides screen into 12 equal pieces, so you can do this

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">...</div>

Which means col-lg-3 will create 4 equal items per row coll-md-3 will do same col-sm-6 will create 2 equal items per row and col-xs-12 will create 1 item per row

Upvotes: 1

Related Questions