how to make header footer and content div

I want to make a header , footer , content  div   using bootstrap.

link:   http://getbootstrap.com/2.3.2/


can you please tell  what would be the code with bootstrap  for this ?

(I want a fixed header & footer)
cofactorAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Scott Fell, EE MVEConnect With a Mentor DeveloperCommented:
If you don't use it as a background image you can make the image responsive http://getbootstrap.com/css/#overview-responsive-images otherwise, you may need to use media quires and keep your images at 100% where possible.

In the bootstrap docs you will see http://getbootstrap.com/css/#overview
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

For each of these, you can create custom css and use multiple size images.

@media (max-width: @screen-xs-max) { 
    background: url("/PaymentServices/images/header_xs.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    background: url("/PaymentServices/images/header_sm.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);

 }
@media (min-width: @screen-lg-min) { 
    background: url("/PaymentServices/images/header_large.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
 }

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
Why are you using the old version of bootstrap?

If you look at the instructions http://getbootstrap.com/2.3.2/components.html#navs there is a fixed top and fixed bottom.
<div class="navbar navbar-fixed-top">
  ...
</div>

Open in new window

fixed footer
<div class="navbar navbar-fixed-bottom">
  ...
</div>

Open in new window

Putting it all together, you will want to make sure there is space between the body and fixed top. Example working http://jsbin.com/ekOTEKUt/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
 
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />

<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
  .mainbody{margin-top:30px;}
  </style>
</head>
<body>
   <div class="navbar navbar-fixed-top topnav">I am fixed at the top</div> 
<div class="container mainbody">
  
  <div class="row-fluid">
    <div class="span2">
      <!--Sidebar content-->
      this is the side
    </div>
    <div class="span10">
      <!--Body content-->
      this is the body
    </div>
  </div>
</div> 
    <div class="navbar navbar-fixed-bottom">I am fixed at the bottom</div>  
</body>
</html>

Open in new window

As  long as  you are starting fresh, use the new version which is http://getbootstrap.com/
0
 
cofactorAuthor Commented:
I want to  put a banner header jpg  and a footer jpg  .  I don't see a place to put that  in your code.

What changes do I require here ?

I have downloaded the latest version.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Scott Fell, EE MVEDeveloperCommented:
>I don't see a place to put that  in your code.

Try where you see, "I'm fixed at the top" (class = "navbar-fixed-top topnav") or "I'm fixed at the bottom" (class="navbar-fixed-bottom").  Replacing the text with your images.
0
 
Scott Fell, EE MVEDeveloperCommented:
You will notice in bootstrap3, fixed at the top and bottom has the same class http://getbootstrap.com/components/#navbar-fixed-top.  One of the main differences is the grid.  http://getbootstrap.com/css/#grid-example-mixed-complete

The hardest part is wrapping your head around coding 3 or 4 different versions of a page at the same time.
0
 
cofactorAuthor Commented:
>>>Replacing the text with your images.

Do you mean I should put an image in place of text ?

ummm.......but  you know I  already have a common.css file where I  have a class  for header banner. I just want to reuse this class

.HeaderBg {
       background: url("/PaymentServices/images/header.png") repeat-x top left;
       height: 40px;
}


Is it not possible to  use this class   along with  bootstrap css  to set a header background image  ?  If so , what changes I may require in your code ?
0
 
Scott Fell, EE MVEDeveloperCommented:
Just place a new div with the class HeaderBg in place of the text I have.
0
 
cofactorAuthor Commented:
>>>>Just place a new div with the class HeaderBg in place of the text I have.


this worked.....but image did not stretch to the  entire header.

Is there any workaround ?
0
 
cofactorAuthor Commented:
I am using this css..

background: url("/PaymentServices/images/header.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);

should I make it a repeat to stretch image  out ?

Could you please tell what is the proper code here ?
0
 
cofactorAuthor Commented:
No reply.

any comments ?
0
All Courses

From novice to tech pro — start learning today.