Home > OS >  Bootstap Carousel Sizing
Bootstap Carousel Sizing

Time:08-28

I am trying to make a carousel using Bootstrap, I was using an example but it uses the entire window and any further div's are not shown, how do I fix this so the div's can be shown correctly, please?

Whilst researching I came across this example but I can't figure out what they have done to fix this.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">

    <link href="header_style.css" rel="stylesheet">
  </head>

  <body>
    <!-- Carousel Start -->
    <div >
        <div id="header-carousel"  data-bs-ride="carousel">
            <div >
                <div >
                    <img  src="licensed/p1.jpeg" alt="Image">
                    <div >
                        <div >
                            <div >
                                <div >
                                    <h1 >Let's Change The World With Humanity</h1>
                                    <p >Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet</p>
                                    <a  href="">
                                        Learn More
                                        <div >
                                            <i ></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div >
                    <img  src="licensed/p2.jpeg" alt="Image">
                    <div >
                        <div >
                            <div >
                                <div >
                                    <h1 >Let's Save More Lifes With Our Helping Hand</h1>
                                    <p >Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet</p>
                                    <a  href="">
                                        Learn More
                                        <div >
                                            <i ></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button  type="button" data-bs-target="#header-carousel"
                data-bs-slide="prev">
                <span  aria-hidden="true"></span>
                <span >Previous</span>
            </button>
            <button  type="button" data-bs-target="#header-carousel"
                data-bs-slide="next">
                <span  aria-hidden="true"></span>
                <span >Next</span>
            </button>
        </div>
    </div>
    <!-- Carousel End -->

    <div">
        <p>Test #1</p>
    </div>
    <div">
        <p>Test #1</p>
    </div>
    <div">
        <p>Test #1</p>
    </div>

  </body>
</html>

CodePudding user response:

you can make it more responsive using height: 100vh which is equal to vh-100 in bootstrap. (add this class with the width class of before w-100)

and for making the image more responsive for all dimensions, just use object-fit: cover

now is responsive for mobile and pc

also solve the div error ❌<div"> -> ✅<div>

.carousel-item img {
  height: 100vh; /* vh-100 class */
  width: 100%; /* w-100 class */
  object-fit: cover; /* make image not stretch */
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet" />
  <title>Test</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Icon Font Stylesheet -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet" />

  <link href="header_style.css" rel="stylesheet" />
</head>

<body>
  <!-- Carousel Start -->
  <div >
    <div id="header-carousel"  data-bs-ride="carousel">
      <div >
        <div >
          <img src="https://picsum.photos/5000" alt="Image" />
          <div >
            <div >
              <div >
                <div >
                  <h1 >
                    Let's Change The World With Humanity
                  </h1>
                  <p >
                    Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet
                  </p>
                  <a  href="">
                      Learn More
                      <div
                        
                      >
                        <i ></i>
                      </div>
                    </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div >
          <img src="https://picsum.photos/5000" alt="Image" />
          <div >
            <div >
              <div >
                <div >
                  <h1 >
                    Let's Save More Lifes With Our Helping Hand
                  </h1>
                  <p >
                    Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet
                  </p>
                  <a  href="">
                      Learn More
                      <div
                        
                      >
                        <i ></i>
                      </div>
                    </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <button  type="button" data-bs-target="#header-carousel" data-bs-slide="prev">
          <span  aria-hidden="true"></span>
          <span >Previous</span>
        </button>
      <button  type="button" data-bs-target="#header-carousel" data-bs-slide="next">
          <span  aria-hidden="true"></span>
          <span >Next</span>
        </button>
    </div>
  </div>
  <!-- Carousel End -->

  <div>
    <p>Test #1</p>
  </div>
  <div>
    <p>Test #1</p>
  </div>
  <div>
    <p>Test #1</p>
  </div>
</body>

</html>

CodePudding user response:

Add width:100% and height for carousel-item

 .carousel-item {
        height: 500px;
        width: 100%;
    }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet"/>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div >
        <div id="header-carousel"  data-bs-ride="carousel">
            <div >
                <div >
                    <img  src="https://via.placeholder.com/150" alt="Image">
                    <div >
                        <div >
                            <div >
                                <div >
                                    <h1 >Let's Change The World With Humanity</h1>
                                    <p >Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet</p>
                                    <a  href="">
                                        Learn More
                                        <div >
                                            <i ></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div >
                    <img  src="https://via.placeholder.com/150" alt="Image">
                    <div >
                        <div >
                            <div >
                                <div >
                                    <h1 >Let's Save More Lifes With Our Helping Hand</h1>
                                    <p >Aliqu diam amet diam et eos. Clita erat ipsum et lorem sed stet lorem sit clita duo justo erat amet</p>
                                    <a  href="">
                                        Learn More
                                        <div >
                                            <i ></i>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button  type="button" data-bs-target="#header-carousel"
                data-bs-slide="prev">
                <span  aria-hidden="true"></span>
                <span >Previous</span>
            </button>
            <button  type="button" data-bs-target="#header-carousel"
                data-bs-slide="next">
                <span  aria-hidden="true"></span>
                <span >Next</span>
            </button>
        </div>
    </div>
    <!-- Carousel End -->

    <div>
        <p>Test #1</p>
    </div>
    <div>
        <p>Test #1</p>
    </div>
    <div>
        <p>Test #1</p>
    </div>

  • Related