Solved

Container fixed and footer fullwidth in Bootstrap 3

Posted on 2014-03-29
2
2,762 Views
Last Modified: 2014-03-30
Hello, I'm using Bootstrap 3.1.1 and I need to make the row marked in orange fixed and fullwidth, and the rows marked in green fullwidth. How can I do this?

I would also like to use the rows in green as footer. Should I use <footer> tags?

This is the site http://blue-ware.net/ap/

Thanks in advance.
0
Comment
Question by:ivanblue
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 250 total points
ID: 39965178
to position the orange box, apply the following rules to it:

position: fixed;
right: 0;
left: 0;
z-index: 1020;
top: 70px;

Open in new window


then, adjust the padding top of the body tag:
body {
  padding-top: 270px;
  padding-bottom: 30px;
}

Open in new window


You don't have to do anything to the "footer". You can wrap it in a footer tag if you want to be "semantically correct", but it doesn't matter except for maybe certain accessibility cases, screen readers, etc...
0
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
ID: 39965324
You can just make both areas a container class but make sure they are either above or below the main content.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question