Text appears in two lines when browser width gets smaller - html

Question

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">One comment</p>
</div>
</div>
Screenshot of issue:
JSFiddle Demo

Answer 1

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">One comment</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).

Answer 2

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">One comment</p>
</div>
</div>
Check it out in action -- https://jsfiddle.net/aLuv47bt/
Cheers.

Answer 3

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">One comment</p>
</div>
</div>

Answer 4

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">One comment</p>
</div>
</div>
Check with demo
https://jsfiddle.net/x9g2th82/4/