Solved

Container fixed and footer fullwidth in Bootstrap 3

Posted on 2014-03-29
2
2,771 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 53

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

Technology Partners: 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

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

738 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