CODEWITHSUNDEEP
htmlcssnode.jstwitter-bootstrap
ImTalkingCode
ImTalkingCode

Reputation: 385

Bootstrap grid formatting - different devices

I am not the best html/css coder and I have this html which works fine on a desktop, but looks very poor on a phone.

<div class="col-md-6">
  <div class="col-md-9">
    <div class="row"><strong>Estimated # of Monthly XXXXXXXXs:</strong></div>
    <div class="row"><strong>Estimated Monthly Revenue Increase!!:</strong></div>
    <div class="row"><strong>Estimated Monthly XXXXXXXXXs Costs:</strong>  </div>
    <div class="row"><strong>Using XXXXXXXXX gives you:</strong></div>
    <div class="row"></div>
    <div id="qrow"></div>
  </div>
  <div class="col-md-3"><strong>
    <div id="howl">0</div></strong>
    <div class="row"></div><strong>
    <div id="howt">$0.00</div></strong>
    <div class="row"></div><strong>
    <div id="howa">$0.00</div></strong>
    <div class="row"></div><strong>
    <div id="howri">$0.00</div></strong>
    <div class="row"></div>
    <div id="qint"></div>
  </div>
</div>

On a desktop, it comes out as:

Estimated # of Monthly Leads:         0
Estimated Monthly Revenue Increase:   $0.00
Estimated Monthly XXXXXXXX Costs:     $0.00
Using XXXXXXXXX gives you:            $0.00

But on a phone it displays as:

Estimated # of Monthly 
Leads:         
Estimated Monthly Revenue
Increase:   
Estimated Monthly XXXXXXXX
Costs:     
Using XXXXXXXXX gives you:            
0
$0.00
$0.00
$0.00

I could just use a single grid but I like that both columns are aligned. So how do I keep the same nice desktop formatting on a phone?

Upvotes: 0

Views: 165

Answers (2)

CodeZombie
CodeZombie

Reputation: 2087

If you are using bootstrap 3 then make use of col-xs-3 to align the way you want in the phone. Please follow the below code.

<div class="col-xs-6 col-md-6">
  <div class="col-xs-9 col-md-9">
    <div class="row"><strong>Estimated # of Monthly XXXXXXXXs:</strong></div>
    <div class="row"><strong>Estimated Monthly Revenue Increase!!:</strong></div>
    <div class="row"><strong>Estimated Monthly XXXXXXXXXs Costs:</strong>  </div>
    <div class="row"><strong>Using ActiveLEAD gives you:</strong></div>
    <div class="row"></div>
    <div id="qrow"></div>
  </div>
  <div class="col-xs-3 col-md-3"><strong>
    <div id="howl">0</div></strong>
    <div class="row"></div><strong>
    <div id="howt">$0.00</div></strong>
    <div class="row"></div><strong>
    <div id="howa">$0.00</div></strong>
    <div class="row"></div><strong>
    <div id="howri">$0.00</div></strong>
    <div class="row"></div>
    <div id="qint"></div>
  </div>
</div>

Upvotes: 1

Sarvan Kumar
Sarvan Kumar

Reputation: 934

Use this fiddle..

<div class="col-md-6 col-sm-12 col-xs-12">
  <div class="col-md-9 col-sm-9 col-xs-9">
    <div class="row">
      <strong>Estimated # of Monthly XXXXXXXXs:</strong>
    </div>
    <div class="row">
      <strong>Estimated Monthly Revenue Increase!!:</strong>
    </div>
    <div class="row">
      <strong>Estimated Monthly XXXXXXXXXs Costs:</strong>
    </div>
    <div class="row">
      <strong>Using ActiveLEAD gives you:</strong>
    </div>
    <div class="row"></div>
    <div id="qrow"></div>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-3"><strong>
    <div id="howl">0</div></strong>
    <div class="row"></div><strong>
    <div id="howt">$0.00</div></strong>
    <div class="row"></div><strong>
    <div id="howa">$0.00</div></strong>
    <div class="row"></div><strong>
    <div id="howri">$0.00</div></strong>
    <div class="row"></div>
    <div id="qint"></div>
  </div>
</div>

Upvotes: 1

Related Questions