CODEWITHSUNDEEP
csstwitter-bootstrap
Juan
Juan

Reputation: 532

Bootstrap3 row span

I would like to make a layout where my logo is at the left, and my title and menu are on the right of the logo. When the screen is too small then it should be logo, title and then menu. (On either side there is a col-lg-2)

My attempt was: 

<header class="row">
        <div id="logo"class="col-xs-12 col-sm-2 
                         col-md-2 col-md-offset-2 col-lg-2 col-lg-offset-2">
        </div>
        <div id="title_menu" class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            <div id="title">
                Title
            </div>
            <nav id="navigation_bar" >
                Menu
            </nav>
        </div>      
    </header>
    <div class="row">       
        <div id="something" class="col-xs-12 col-sm-12
                  col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
            something
        </div>

header {
    background: #0090e5 !important;
}

#logo   {
    height:250px;
}
#title_menu {
  height:50px;
}

But on an IPhone the title and menu disappear and seem to be behind the element in the row underneath. I am using the height, because I want everything to be align with the bottom of the row.

Upvotes: 1

Views: 96

Answers (1)

APAD1
APAD1

Reputation: 13666

I'm not sure exactly what you're going for, but there appears to be quite a bit of redundancy in your classes. One thing you should know about Bootstrap is that you only need to specify the number of columns on each size if the number of columns is changing. For instance, if you want a div to take up 2 columns on small, medium and large, you only need to define small, every size above small will automatically use the same number of columns. Similarly, you don't need to specify col-xs-12 because that is already assumed. So you could simplify it to this(notice how I'm only defining the number of columns for sm and everything else is taken care of automatically):

<div class="container">
  <header class="row">
    <div id="logo" class="col-sm-2">
      <img src="http://placehold.it/50x50">
    </div>
    <div id="title_menu" class="col-sm-5">
      <div id="title">
        Title
      </div>
    </div>
    <div class="col-sm-5">
      <nav id="navigation_bar">
        <ul>
          <li><a href="#">Menu Item 1</a></li>
          <li><a href="#">Menu Item 2</a></li>
          <li><a href="#">Menu Item 3</a></li>
          <li><a href="#">Menu Item 4</a></li>
        </ul>
      </nav>
    </div>      
  </header>
</div>

This will display the logo, title and menu all on the same line from small up and it will show the logo, title and menu stacked on mobile(xs).

Bootply example

Upvotes: 2

Related Questions