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?
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
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.
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">