Need help with the footer_suffix in Bootstrap Container

[Guest]

Version 2.3.4.1 CE

I am using the Bootstrap Container (as opposed to container-fluid) as I like the way it centers the website onscreen, rather than have it full screen.

Trying to figure out why my footer is extending the full-width of the screen.  Looks like this:

So, aside from a color entry, I added a couple of lines in my user.css regarding height and margin, like this:

.footer-extra {
	background-color: #2e4963;
	color: #ffffff;
	height: 60px;
    margin: 0px 46px 25px 46px;
}

Now my footer looks a whole lot better, lining up with the rest of the page, except for these annoying little gray lines (borders?) that are appearing outside the footer as my scribbled arrows indicate:

I'm guessing it has something to do with the containers but, I don't know how to fix that or where to look.

I'd like to clean that up.  Thanks for any help!

- Andrea

[♥Tsimi]

try to add this to your user.css

.footer {
  border:none;
}

Regarding keeping the footer same width as the body.
It will require a small core code change.

Open your ../includes/template_bottom.php file and look for this following code
 

    </div> <!-- row -->

  </div> <!-- bodyWrapper //-->

  <?php require('includes/footer.php'); ?>

Now change that to this
 

  <?php require('includes/footer.php'); ?>

      </div> <!-- row -->

  </div> <!-- bodyWrapper //-->

We just wrapped the footer area inside the bodyWrapper class. Meaning when you choose either container or container-fluid the footer will adjust same as the body area does.

However I personally think it looks a bit odd. Because you will most likely have a full width header and a narrow body and footer which does kinda look unbalanced but then again this is entirely subjective.
I would at least go with full width header footer and narrow body if I'd have to as it was intended with the stock BS setup.

[Guest]

Thank You @Tsimi

I tried border: 0px and had no luck.

This makes me think twice about abandoning my navigation bar...same problem.  Thanks!  You make everything so easy!

- Andrea

[MrPhil]

Most browsers have some sort of tool to examine elements (e.g., in Firefox, right-click and select "inspect element"). Often they have a feature to let you point exactly at the screen element to display the HTML and CSS for. This should let you quickly find the class, id (better yet, as it should be unique to a page), or the tag hierarchy needed to specify as the selector in your user.css file.

border: 0px and border: none I don't think are quite the same thing.