Bootstrap pull-right and mobile devices

Question

I have <h1> and inside it <div class="pull-right"> which contains buttons at the same horizontal line with title of the site.

<div class="row">
    <div class="col-md-12">
        <h1>
            Title
            <div class="pull-right">
                <a href="#" class="btn btn-default">...</a>
                <a href="#" class="btn btn-default">...</a>
                <a href="#" class="btn btn-default">...</a>
            </div>
        </h1>
    </div>
</div>

Would it be possible to get the buttons below the title when using mobile devices? For example:

Example 1

Here you have very similar question. http://stackoverflow.com/questions/19404861/bootstrap-3-pull-right-for-col-lg-only — hywak, Jul 14 '15 at 11:48

Peyman Mohamadpour · Accepted Answer · 2015-07-14T12:02:02.407

1

Don't do that because those buttons are not part of your title and this would have some SEO drawbacks (Search engines algorithms use contents of <h1> element as your first level heading on your page ). instead do this:

@media screen and (min-width: 1100px){ 
  .pull-right{
    display:inline-block;
  }
}

<div class="row">
    <div class="col-md-12">
        <h1>Title</h1><!--
        --><div class="pull-right">
            <a href="#" class="btn btn-default">...</a>
            <a href="#" class="btn btn-default">...</a>
            <a href="#" class="btn btn-default">...</a>
        </div>
    </div>
</div>

This way you have your desired output on mobile devices (Screen width lower than 1100px ) and inline state on devices width screen width higher than that

edited Jul 14 '15 at 12:02

answered Jul 14 '15 at 11:49

Peyman Mohamadpour

17,954
24
89
100

Thanks for info about search engines. And this is what I was looking for! – lingo Jul 14 '15 at 12:01
ur welcome. try to consider SEO in ur design from now on – Peyman Mohamadpour Jul 14 '15 at 12:10

score 1 · Answer 2 · answered Jul 14 '15 at 11:55

Firstly, you can't nest a div inside an h1. Secondly, why not use the grid system properly?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-xs-12 col-md-6">
    <h1>Title</h1>
  </div>
  <div class="col-xs-12 col-md-6">
    <div class="pull-right">
      <a href="#" class="btn btn-default">...</a>
      <a href="#" class="btn btn-default">...</a>
      <a href="#" class="btn btn-default">...</a>
    </div>
  </div>
</div>
</div>

score 0 · Answer 3 · answered Jul 14 '15 at 11:50

0

You could wrap your heading inside a col-sm-12 col-md-5 .

THis would ensure that on small devices, the heading row takes the entire width, thush shifting the buttons below the title div.

For more information, see this : Responsive Grids: Bootstrap

answered Jul 14 '15 at 11:50

code

2,115
1
22
46

score 0 · Answer 4 · answered Jul 14 '15 at 11:51

0

Standart bootstrap disable pull-classes on mobile-view. You need manually add to your css next code:

@media(max-width:769px) {
  .pull-right {
     float:right!important;
  }
  .pull-left {
     float:left!important;
  }
}

answered Jul 14 '15 at 11:51

Dmitriy Borisov

598
4
8

Bootstrap pull-right and mobile devices

4 Answers4