2 replies [Last post]
lyn1279
lyn1279's picture
Offline
newbie
Last seen: 7 years 27 weeks ago
Timezone: GMT-7
Joined: 2014-02-04
Posts: 4
Points: 7

Can't figure out how to style bootstrap carousel so the div has no margin above and below the images. When using firebug, I see the div space for the control buttons, but for the life of me can't style to remove the space above the images. Ultimately, I'd like the space between the carousel images and the footer removed. Your insight is greatly appreciated!

www.rmintegrativemedicine.com/temp

Thanks,

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 6 years 1 week ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Well first of all, there

Well first of all, there seems to be some buttons hidden behind your blue background, this is the code I found:

<p>
 
    <a class="left carousel-control" data-slide="prev" href="#carousel-example-generic"></a>
    <br></br>
    <a class="right carousel-control" data-slide="next" href="#carousel-example-generic"></a>
 
</p>

If you are not going to use these buttons but would like to auto switch images every now and then, then perhaps delete this piece of code, and you caroussel will go lower already Smile

Also above your carrousel is a little paragraph coding without any content:

<p>
 
    <!--
 
     row 4 
 
    -->
 
</p>

This is also a paragraph line just below your caroussel:

<p>
 
    <!--
 
     Controls 
 
    -->
    <br></br>
    <a class="left carousel-control" data-slide="prev" href="#carousel-example-generic"></a>
 
</p>

Anyway, these are the codes that give you this much space between the top and the bottom of your caroussel.
Hope this gives you a good view on how to work on Smile

Check Maximum Webdesign for your online solutions

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Bootstrap: blech

Start by ridding yourself of the empty p elements and the br elements used for spacing.

You also have {top: -20px;} on .carousel which is presumably to counteract something else. I didn't dig too deep, as you're using the steaming pile known a bootstrap with its many idiocies.

The big gap below the merry-go-round seems to be due to the container being declared a larger height than its content. I have no clue why the bootstrap stylesheet declares so many elements to be {display: table;}.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.