Results 1 to 2 of 2

Thread: Bootstrap full carousel unwanted margins

  1. #1
    Junior Member
    Join Date
    Jul 2015
    Posts
    1

    Bootstrap full carousel unwanted margins

    Hi,

    I can't figure out why I can't get rid of the white margins on my carousel. I would like to have the carousel's pictures fill the whole space from left to right.

    Could you tell me how to correct my code please?


    HTML:

    <!DOCTYPE html>

    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
    <title>Page Title</title>


    <!-- Bootstrap -->
    <link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script type='text/javascript' src='js/jquery.js'></script>
    </head>






    <body>
    <div id='nav'>
    <div id='nav_wrapper'></div>
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact us</a></li>
    <li><a href="#">Social</a>
    <ul>
    <li><a href="#">Youtube</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Facebook</a></li>

    </ul>
    </li>
    </ul>
    </div>






    <div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0"class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
    <div class="item active">
    <img id="beach"src="images/beach.jpg">
    </div>

    <div class="item">
    <img src="images/mountain.jpg">
    </div>

    <div class="item">
    <img src="images/island.jpg">
    </div>

    </div>

    </div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
    </a>
    </div>
    </div>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="Bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>

    CSS:
    body {
    padding:0;
    margin:0;
    overflow-y:scroll;
    font-family: arial;
    font-size: 18px;
    }

    #nav{
    background-color: #222;
    margin :0 auto;
    }
    #nav_wrapper{
    width:960px;
    text-align:left;

    }
    #nav ul {
    list-style-type: none;
    padding: 0;
    margin:0 auto;
    position: relative;
    width:620px;

    }

    #nav ul li{
    display:inline-block;
    }
    #nav ul li:hover{
    background-color:#333;
    }

    #nav ul li a,visited{
    color:#ccc;
    display:block;
    width:150px;
    padding:15px;
    text-decoration: none;
    }

    #nav ul li a{
    color:#ccc;
    text-decoration: none;
    text-align: center;
    }

    #nav ul li:hover ul{
    display:block;
    }

    #nav ul ul{
    display:none;
    position:absolute;
    background-color: #333;
    border:5px solid #222;
    border-top:0;
    margin-left:-5px;
    width:160px;
    padding:15px;

    }
    #nav ul ul li{
    display:block;

    }
    #nav ul ul li a,visited{
    color:#ccc;
    text-align:center;
    margin-left:-15px;
    }

    #nav ul ul li a:hover {
    color:#099;

    }

    /* Carousel*/
    .carousel .item{
    width:100%; /*slider width */
    }

    .carousel .item img {
    width: 100%; /*img width*/

    }

    .container{
    width:100%;


    }

  2. #2
    Usually you just have to add
    Code:
    margin:0;
    to get rid of any unwanted margins in your code

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •