CODEWITHSUNDEEP
twitter-bootstrap
b85411
b85411

Reputation: 10000

Bootstrap - new line on small devices

I'm using Bootstrap and I have this line:

<p>{{ user.email }} <span class="pull-right">{{ user.role }}</span></p>

How can I make it so that the span goes on a new line if the device size is "xs"?

Upvotes: 0

Views: 1251

Answers (2)

Simon
Simon

Reputation: 1

I solved the problem with an break element, that is only active on xs-devices...

<p>{{ user.email }} <br class="d-xs-inline d-sm-none" /> <span class="pull-right">{{ user.role }}</span></p>

Upvotes: 0

vanburen
vanburen

Reputation: 21663

You'll probably have to use a custom class for this as the pull-right class will interfere since it's set to !important by default.

Or you can override it by using !important on another class.

See working examples in Snippet at Full Page.

body, html {
  margin-top: 50px;
}
.new-class {
  float: right;
}
@media (max-width: 767px) {
  .new-class {
    display: block;
    float: none;
  }
  .newer-class {
    display: block;
    float: none !important;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="alert alert-info">
    <p>email <span class="new-class">role</span>

    </p>
  </div>
</div>
<hr>
<div class="container">
  <div class="alert alert-danger">
    <p>email <span class="newer-class pull-right">role</span>

    </p>
  </div>
</div>

Upvotes: 1

Related Questions