Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap layout outside of container

I'd like to use Twitter Bootstrap for one project which has a bit of a crazy layout.

The logo's background should start from the edge of the window, but the text in the logo should start where the .container begins. Crazy, huh!

I'm not sure how to explain this so I drew it! enter image description here

What I've done so far is this:

<div class="container">
  <header>
    <div id="logo" class="pull-left col-sm-3 bg-theme">
      <div class="typography">
        Dope
        <br/>
        Text
      </div>
    </div>
    <div class="col-sm-9">
      <nav class="pull-right"> nav should be here </nav>
    </div>
  </header>
  <!-- header -->
</div>


#logo {
  position: relative;
  height: 100px;
  background: #ffd800;
}

.typography {
  position: absolute;
  right: 0px;
  top: 20px;
  line-height: 50px;
  font-size: 50px;
  font-weight: bold;
}

I created a demo@jsFiddle.

How should I structure my HTML, or what can I do with the CSS to achieve this effect.

CSS only solutions if possible.

Edit: Those kind of title element might appear on the page again, so solutions which are based on the fact that the element will be at the top of the page are not what I'm after.

like image 702
Ivanka Todorova Avatar asked Sep 04 '15 17:09

Ivanka Todorova


People also ask

How to use containers in Bootstrap 4 layout?

Bootstrap 4 layout requires to add all your website content part inside the containers. To make your content responsive according to screen sizes, you have to use container classes within which you can add rows and columns. In this tutorial, you will learn all types of containers in Bootstrap 4 to wrap your content inside it.

How do you scale a container in Bootstrap?

For example, .container-sm is 100% wide to start until the sm breakpoint is reached, where it will scale up with md , lg, xl, and xxl . Use .container-fluid for a full width container, spanning the entire width of the viewport. As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire.

What is container-fluid in Bootstrap?

Use .container-fluid for a full width container, spanning the entire width of the viewport. As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire.

How do I create a full width container in CSS?

Use the .container-fluid class to create a full width container, that will always span the entire width of the screen ( width is always 100% ): By default, containers have 15px left and right padding, with no top or bottom padding. Therefore, we often use spacing utilities, such as extra padding and margins to make them look even better.


2 Answers

First of all you have to take into account Grid System Rules:

Some Bootstrap grid system rules:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
  • Use rows to create horizontal groups of columns
  • Content should be placed within columns, and only columns may be immediate children of rows
  • Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
    negative margin on .rows
  • Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
    three .col-sm-4

So following the above rules you can achieve what you want like this:

Here a working JSFiddle fork from yours

#logo {
    position: relative;
    height: 100px;
    background: #ffd800;
}
.container {
    height: 500px;
}
.typography {
    line-height: 35px;
    font-size: 35px;
    font-weight: bold;
    padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fluid">
    <header>
        <div class="row">
            <div id="logo" class="pull-left col-xs-5 bg-theme">
                <div class="row">
                    <div class="col-xs-offset-5 col-xs-7 typography">Dope
                        <br/>Text</div>
                </div>
            </div>
            <div class="col-xs-7">
                <nav class="pull-right">nav should be here</nav>
            </div>
        </div>
    </header>
    <div class="row">
        <div class="container col-xs-offset-2 col-xs-8">
            <p>Here you can put the content</p>
            <p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>
        </div>
    </div>
</div>

You can change the # in col-xs-X as you wish to obtain your desire layout but always trying to follow the above rules.

like image 60
Yandy_Viera Avatar answered Sep 23 '22 07:09

Yandy_Viera


I recommend making the following changes.

  1. Start by making a .container-fluid
  2. Then move your .container into your .container-fluid
  3. lastly, move your header above your .container, but inside your .container-fluid

Once complete it should look something like.

<div class="container-fluid">
  <header class="col-md-12>
    <div id="logo" class="pull-left col-sm-3 bg-theme">
      <div class="typography">
        Dope
        <br/>
        Text
      </div>
    </div>
    <div class="col-sm-9">
      <nav class="pull-right"> nav should be here </nav>
    </div>
  </header>
  <!-- Header -->
  <div class="container">
    <!-- Other content -->
  </div>
</div>
like image 20
Austin Kregel Avatar answered Sep 23 '22 07:09

Austin Kregel