CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Black User
Black User

Reputation: 405

Prevent text wrapping to next line

I am newbie in Twitter Bootstrap. It is a very simple question.

Here is the image:

Paragraph

And here is my Code: 

<div class="col-md-8 col-xs-6 col-sm-6  placeholders">
  <p id="people-things" class="text-center"><a href="#">PEOPLE-THINGS RECOMENDATION</a></p>
</div>

Problem: I want to put the Recomendation text in one line other then going in next line.

Infos: I had tried every grid in but still couldn't sort it out.

Upvotes: 4

Views: 4407

Answers (2)

Mik
Mik

Reputation: 1

The solution above works but bootstrap grid classes should be ideally used by itself and you should not need any custom styles on top of it.
Try rearranging your grid structure such that apply <col-sm-6> before <col-xs-6>. That will allow more space in the grid cell to fit the text. Also you might not need three levels of grid nesting. You could use: <col-md-8><col-sm-8> and see if that works.

Upvotes: 0

Viktor Maksimov
Viktor Maksimov

Reputation: 1465

You have to make smaller font-size on .people-things or add this CSS:

.people-things { white-space: nowrap; }

Which is making .people-things to show on one line.

Upvotes: 13

Related Questions