CODEWITHSUNDEEP
csstwitter-bootstrap
AnthonyGalli.com
AnthonyGalli.com

Reputation: 2866

How to make header align with bootstrap columns?

How can we make the layouts/header align with the col-md-9 & col-md-3 so that the "P" in Personal Control Center is perfectly aligned with the panel below it and the downward arrow is perfectly aligned with the right edge of the sidebar?

I was able to do it via padding in the first picture, but I'd like it to align perfectly regardless of screen size. As you can see as I decreased the width of the browser the it becomes less aligned.

enter image description here enter image description here

*In the last case the downward arrow should align with right edge of panel.

enter image description here

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Personal Control Center</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">        <!-- Tells app to be mobile responsive -->
</head>
<body>
  <%= render 'layouts/header' %>
    <% flash.each do |name, msg| %>
      <%= content_tag(:div, msg, class: "alert alert-info") %>
    <% end %>
  <div class="container-fluid">
    <div class="container">
      <div class="col-md-9">
        <%= yield %>
      </div>
      <div class="col-md-3">
        <% if current_user.present? %>
        <%= render 'layouts/sidebar' %>
        <% end %>
      </div>
    </div>
  </div>
</body>
</html>

bootstrap_customization.css.scss

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

$body-bg:                         #2c3e50;
$font-family-sans-serif:          'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$navbar-height:                   45px;
$navbar-default-bg:               white;
$navbar-default-brand-color:      #A73A31;
$brand-primary:                   #000;
$jumbotron-bg:                    #FFFFFF;

@import 'bootstrap-sprockets';
@import 'bootstrap';

/* link */
.navbar-default .navbar-nav > li > a {
    color: #2E2E2E;
}

.panel-default > .panel-heading {
  background-color: #2E2E2E;
  color: white;
  border: none;
}

.panel {
  border: none;
}

#sidebarheadingtop {
  padding-top: .1em;
  border: none;
  border-radius: 0px;
  background-color: #2E2E2E;
  color: #ecf0f1;
  padding-bottom: 3px;
}

#sidebarheading {
  padding-top: .1em;
  border-radius: 0px;
  border: none;
  background-color: #2E2E2E;
  color: #ecf0f1;
  padding-bottom: 3px;
}

#sidebarsectiontop {
  margin-top: 0px;
  margin-bottom: 0px;
  border-bottom-right-radius: 0em 0em;
  border-bottom-left-radius: 0em 0em;
  border-style: none;
}

#sidebarsection {
  margin-top: 0px;
  margin-bottom: 0px;
  border-radius: 0px;
  border-style: none;
}

#sidebarsectionbottom {
  margin-top: 0px;
  margin-bottom: 0px;
  border-top-radius: 0px;
  border-style: none;
}

.nav-container {
  margin: 0 auto;
  padding-left: 8em;
  padding-right: 8em;
}

.container {
  margin: 0 auto;
  padding-left: 3em;
  padding-right: 3em;
}

.center {
     text-align: center;
}

.navbar-brand {
     font-weight: bold;
}

a {
  &:hover {
    color: #666;
    text-decoration: none;
  }
}

If I change the application code to this:

    <div class="container-fluid">
        <div class="container">
            <%= render 'layouts/header' %>
                <% flash.each do |name, msg| %>
                <%= content_tag(:div, msg, class: "alert alert-info") %>
            <% end %>
        <!-- Rest of the code here -->
        </div>
    </div>

I get this:

enter image description here

Thank you for your time!

Upvotes: 0

Views: 919

Answers (1)

Chun
Chun

Reputation: 2270

Taking a blindly guess, I think wrapping this:

<%= render 'layouts/header' %>
    <% flash.each do |name, msg| %>
    <%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>

inside of your .container like this would do the job:

<div class="container-fluid">
    <div class="container">
        <%= render 'layouts/header' %>
            <% flash.each do |name, msg| %>
            <%= content_tag(:div, msg, class: "alert alert-info") %>
        <% end %>
    <!-- Rest of the code here -->
    </div>
</div>

==== update ====

Find .container width and give this same width for your header wrapper and a margin: 0 auto;. Your header must have a wrapper already but I'm gonna create one here for you to understand:

<body>
    <div class="headerWrapper">
        <%= render 'layouts/header' %>
            <% flash.each do |name, msg| %>
            <%= content_tag(:div, msg, class: "alert alert-info") %>
        <% end %>
    </div>
    <div class="container-fluid">
        <div class="container">
            <div class="col-md-9">
            <%= yield %>
        </div>
    <div class="col-md-3">
        <% if current_user.present? %>
        <%= render 'layouts/sidebar' %>
        <% end %>
    </div>
    </div>
  </div>
</body>

This goes to your CSS file:

.headerWrapper {
    width: 1200px; /* this is just a width size example, the value that goes here is the same of your body width */
    margin: 0 auto;
}

Here's an online example

Upvotes: 1

Related Questions