CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mrugesh
Mrugesh

Reputation: 4517

how to remove extra padding covered with carousel controls

My code is as shown below:

index.html

html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
}

.container {
  width: 100vw;
  height: 100vh;
  background-color: #fc2;
}


/*.container .carousel slide .carousel-inner .item active {
  width: 100vw;
  height: 100vh;
}*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<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 src="../test/images/slider1.png" alt="Los Angeles" style="
                        height:100vh;width:100vw;background-color:red;">
      </div>

      <div class="item">
        <img src="../test/images/slider-2.png" alt="Chicago" style="
                        height:100vh;width:100vw;background-color:green;">
      </div>

      <div class="item">
        <img src="../test/images/slider-3.png" alt="New york" style="
                        height:100vh;width:100vw;background-color:yellow;">
      </div>
    </div>
  </div>
</div>

Here , I have tried to even give margin:0,padding:0, but still there is some margin on left and right side ,so should I remove or add anything to make it work? I have even tried to remove margin from every component using * . But still it did not give me the same effect.

Upvotes: 0

Views: 2755

Answers (2)

Pierre Burton
Pierre Burton

Reputation: 2084

As you're using Bootstrap, the .container class has padding-left: 15px & padding-right: 15px styles.

container has padding

Just set padding: 0 to your .container class and it's all done.

However, be careful that in the screenshot below, you can see that bootstrap is loaded after your css. So if you just add padding: 0 to your .container class it will be overrided by bootstrap's.

Try changing the order of stylesheets loading in your <head> so yours is loaded last.

Or just put a style attribute with padding: 0 directly to your container <div>, but that's not best practice.

Result:

No more padding

Upvotes: 2

user7935964
user7935964

Reputation:

Take a look at your CSS, you have paddings in your .container class located at https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css, precisely

.container{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

Just workaround those lines by overriding them if you really need to use Bootstrap.

Another solution is to use a local instance of that CSS code but customized by you, so just save the CSS file, remove those lines and use that CSS locally.

Upvotes: 1

Related Questions