Bootstrap Carousel Nav and Alignment help

Hello world, I’m looking for a little help with a project. I’ve added a bootstrap carousel to a page but I would like to centre it. I also have issues with the navigation arrows being bigger than the slideshow itself and appearing in the jumbotron when I open it on a laptop screen (it seems to look a little better on mobile). Finally, I was hoping to bring everything under the jumbotron closer as there’s a noticeable gap between it and the “About us” section. Help on any or all of these problems would be very much appreciated! Thanks! Link --> https://codepen.io/MarcelPenn/pen/WEdBQb

Oops! https://codepen.io/MarcelPenn/pen/WEdBQb

Hey. I would highly suggest using background-images on the “item” div instead of using images ('cause they are not filling the container, and some of them are of different height).

You’ll just need to remove your images and add the url as background-image to the divs themselves, like so:

<div class="item" style="background-image:url(your_image_url)"> // You can do this in CSS as well, of course

Then, in your css, you’ll style the .item div like this:

.item {
  height:60vh; /* Change this as you wish */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

As for your other issues:

  • The carousel is not in the middle 'cause you gave its container div a “col-md-8” class, change it to “col-xs-12” and it should be fine.
  • The navigations arrows <a> tags are not properly closed.
  • The jumbotron adds a margin to its bottom, just set it to 0 if you want to have things closer to it.

Also, remove the head and body tags, they are not needed. You can give a background color to the body in CSS like this:

body {
  background-color:black;
}

And consider wrapping your first row in a container, otherwise it’ll overflow horizontally (notice the horizontal scrollbar).

2 Likes

Woah, thanks a lot! I’ll give these a try. Appreciate you taking the time to help!