Keep Text From Wrapping in Bootstrap 3 Responsive Design

css twitter-bootstrap twitter-bootstrap-3 font-awesome word-wrap
kylebellamy picture kylebellamy · Jan 16, 2015 · Viewed 73.5k times · Source

I have a viewer with a control bar consisting of divs in a row. The other items have the FA icon already over the text for it so there is no issue with screen size but in order to differentiate two of the buttons that have higher level control to switch the content in the viewer. They are laid out as shown below:

<i class="fa fa-toggle-right lg"></i> <span style="font-size:18px;">Next

When this is shown on a small screen like an iPhone, the icon moves over the text and I'd like it to stay next to it instead. The reason being that the other button then lines up with the icon below it which is bad looking UI.

Previous<i class="fa fa-toggle-left lg"></i>

Any options as to how to keep them from wrapping?

Answer

ckuijjer picture ckuijjer · Jan 16, 2015

Surround it with a <span class="text-nowrap">. The class .text-nowrap is one of Bootstrap's text alignment helper classes and consists of:

.text-nowrap {
    white-space: nowrap;
}

which makes the icon and text stay on the same line.

Related questions

Bootstrap 3 Placing Icon inside input field

I am working in Bootstrap 3 and am trying to get a calendar icon inside the right hand side of the input box. My html looks like this: <div class="col-md-12"> <div class='right-inner-addon col-md-2 date datepicker' data-date-format="…

Read More
Center a column using Twitter Bootstrap 3

How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3? I want a div, with a class .centered to be centered within the container. I may use a row if there are multiple …

Read More
vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link: The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using …

Read More