Twitter Bootstrap Question posted in

Twitter bootstrap – 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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search