CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
maham.shahid
maham.shahid

Reputation: 301

Text wrapping to next line on screen resize

I have a UI where I display an icon with some text(on the right side) in the same row on a tile. The problem here is that when I resize the screen, the text gets wrapped to the next line and even if I decrease text size, it still does not align next to the icon. Can anyone help me out? Here's a visual representation. This is when screen is full size:Original

And then this is what happens when it is resized:

Resized

How do I bring the text next to the icon like in the original size (full size)?

Here's the code for displaying the icon and text:

 <div class="row">
    <div class="col-md-2 resize" data-toggle="tooltip" title="Date of Birth">
      <i class="i class="fa fa-calendar fa-2x icon-white" style="margin-top:17%;"></i>
    </div>

    <div class="col-md-10">
      <h4 class="icon-white m-h4" id="dob">16-Jul-2014</h4>
    </div>    
</div>

Upvotes: 0

Views: 1294

Answers (2)

Devin
Devin

Reputation: 7720

change the cols to a single line, like col-md-12. Then apply the icon as a background.

Alternatively, use

<div class="col-md-2 col-xs-2">

and so on. Depending on your layout, you may need to adjust the cutting points, so the first approach is always better and desirable

Upvotes: 0

user3943079
user3943079

Reputation:

change col-md to col-xs 

<div class="row">
    <div class="col-xs-2 resize" data-toggle="tooltip" title="Date of Birth">
      <i class="fa fa-calendar fa-2x icon-white" style="margin-top:17%;"></i>
    </div>

    <div class="col-xs-10">
      <h4 class="icon-white m-h4" id="dob">16-Jul-2014</h4>
    </div>    
</div>

Upvotes: 2

Related Questions