CODEWITHSUNDEEP
htmltwitter-bootstrapcssstyles
user4756836
user4756836

Reputation: 1337

Text appears in two lines when browser width gets smaller

My issue is that the text starts to appear in two lines when browser width gets a little smaller.

I am using the bootstrap grid system... so shouldn't the text be adjusted within the grid?

I tried changing:

<div class="row">

To

<div class="row col-sm-12">

but same result.

My code snippet:

<div class="row">
  <div class="col-sm-8">
    <p>Posted by admin on this this date</p>
  </div>
  <div class="col-sm-4">
    <p class="text-right"><a href="#">One comment</a></p>
  </div>
</div>

Screenshot of issue:

enter image description here

JSFiddle Demo

Upvotes: 0

Views: 61

Answers (4)

Rizki Pratama
Rizki Pratama

Reputation: 571

Change sm to xs.

So now your code look like this:

<div class="row">
    <div class="col-xs-8">
        <p>Posted by admin on this this date</p>
    </div>
    <div class="col-xs-4">
        <p class="text-right"><a href="#">One comment</a></p>
    </div>
</div>


You have to read the Bootstrap CSS documentation first. It is clearly stated that .col-sm- column prefix will work starting from the width of Small Devices Tablets (≥768px).

Upvotes: 1

Riz
Riz

Reputation: 26

Change col-sm tp col-xs to make it in one line. Here is the code.

<div class="row">
  <div class="col-xs-8">
    <p>Posted by admin on this this date</p>
  </div>
  <div class="col-xs-4">
    <p class="text-right"><a href="#">One comment</a></p>
  </div>
</div>

Upvotes: 1

Josh Malan
Josh Malan

Reputation: 61

Like Rizki said. You need to change col-sm-4 and col-sm-8 to this

<div class="row">
  <div class="col-xs-8">
    <p>
      Posted by admin on this this date</p>
  </div>
  <div class="col-xs-4">
    <p class="align-right"><a href="#">One comment</a></p>
  </div>
</div>

Check it out in action -- https://jsfiddle.net/aLuv47bt/

Cheers.

Upvotes: 1

Jishnu V S
Jishnu V S

Reputation: 8409

simple fix this with white-space:nowrap 

p {
 white-space:nowrap;
}


p {
  white-space:nowrap;
  }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
  <div class="col-sm-8">
    <p>
      Posted by admin on this this date</p>
  </div>
  <div class="col-sm-4">
    <p class="text-right"><a href="#">One comment</a></p>
  </div>
</div>

Check with demo

https://jsfiddle.net/x9g2th82/4/

Upvotes: 0

Related Questions