How do I achieve a bottom just like the header?

Curriculum Help HTML-CSS
#1

I am using this free bootstrap template - https://startbootstrap.com/templates/modern-business/

The problem is that I do not know how to tweak the css to make the bottom like the header.

I tried to use the services page and I notice there is a

and I tried to insert the below

`

            <div class="col-lg-12">
                   <div class="jumbotron">                 
                    <div class="media">
                        <div class="pull-left">
                            <span class="fa-stack fa-2x">
                                <i class="fa fa-circle fa-stack-2x text-primary"></i>
                                <i class="fa fa-paper-plane fa-stack-1x fa-inverse"></i>
                            </span> 
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">Customer Service is our Priority</h4>
                            <h5>We love to hear from you, especially if youhave benefited from our services.</h5>  
                            <h5>Shoot us an email to : contact@DomainName.com.  We will get back to you ASAP</h5>
                        </div>
                    </div>`

But, this part just won’t stretch across like the header.

Could someone help me on what part of the css I should change in order to achieve this look?

Million thanks.

#2

Hard to tell without seeing it in action. Have to guess a lot. This code is old. It would be easier to use the new HTML5 elements. If

header {
  width:100%;
  position:absolute;
  top:0;
  left:0;
}
/* Gives you a sticky header at the top of the page, then... */
footer {
  width:100%;
  position:absolute;
  bottom:0;
}

should give you a permanent footer. However if the height of the content reaches the footer then you should give it a margin-bottom equal to the height of the footer so that the content is not blocked by the footer being on top of it. Sometimes (depending on your HTML) you may have to add an empty div after the content with height equal to the height of the footer.

So you’re looking for something like that in the CSS

#3

Hi tlc35us,

Shouldn’t the header come from this ?

navbar navbar-inverse navbar-fixed-top

Cos I tried to add in the footer it doesn’t stretch across the browser at all…

#4

Jumbotron is bootstraps super big header for displaying large banner images. It may or may not contain the primary nav menu. It may or may not contain a mega-menu. if you gave the page footer a width of 100% and it does not go all the way across the page then it is being contained by a narrower element or being overwritten by something else.

#5

Hello tlc35us,

Thanks for your sharing.
However, I have since plug in yet another bootstrap with a bottom that stretches across.

The only thing that bugs me is the color. I prefer something darker.
Now, even though I have change it to below:
.bg-light { background-color: #adbac5 !important; }

I still can’t make it change.

The footer class is like this <footer class="footer bg-light">

#6

it’s being overwritten either later on or because of selector scoring. I test the page with dev tools, TBH, to figure it out.

#7

What do you mean by selector scoring ? This footer is the new plug in I used so it will not be over-written right ?