CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap-3
julian fuchs
julian fuchs

Reputation: 11

Bootstrap carousel isn't full width

i am just building an website and i am curently struggeling with the Bootstraps Carousel it is not filling the whole width of my screen.... Does anyone know how to fix this Thanks for your answers (BTW. there are some things in the code who arn't used yet)

body
{
background-color: black;
}
#Haupt
{
  color: yellow;
    align-content: center;
}

.header1
{

}
h1
{
}
/* The navigation bar */
.navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
	
    width: 100%; /* Full width */
}

/* Links inside the navbar */
.navbar a {
    
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Main content */
.main {
    margin-top: 30px; /* Add a top margin to avoid content overlay */
}
h1:hover
{
    background-color: dimgray;
}

 .tales {
  width: 100%;
}
.carousel-inner{
  width:100%;
  max-height: 200px !important;
}
   
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {margin:0;}
	
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px; /* Used in this example to enable scrolling */
}

</style>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
</head>
<body>

<div class="navbar">
  <a  href="#home">Home</a>
  <a  href="#news">News</a>
  <a  href="#contact">Contact</a>
  <a  href="#about">About</a>
	
</div>

	
	
	
<div class="container">
  <h2>Carousel Example</h2>  
  <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="Bild1.jpg" alt="Pic1" width = "100%">
      </div>

      <div class="item">
        <img src="Bild2.jpg" alt="Pic2" width = "100%">
      </div>
    
      <div class="item">
        <img src="Bild3.jpg" alt="Pic3" width = "100%">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

	
	
	
</body>
</html>

Upvotes: 1

Views: 578

Answers (2)

user8142279
user8142279

Reputation:

Please add the following class next to as

.screen-width{ min-height: 768px !important; min-width: 1366px !important; }

You can update the Height and Width based on your need. thank you.

Upvotes: 0

phpguest
phpguest

Reputation: 804

Replace .container with .container-fluid

Upvotes: 1

Related Questions