How can I center my content in my web page?

Question

Am sort of new to bootstrap. I am using a container (although I really don't have anything with multiple columns right now) with three rows. All of my content seems to float left currently. Would like to show it all in the center of the viewport. From what I understand container-fluid class is supposed to utilize the entire viewport area. What do I need to do to center all my content while still making it responsive. Html is below. Thanks

Jason

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<!-- Body -->
<div class="container-fluid">
  <div class="row">
    <div class="col1">
      <h1>XXXX XXXXX</h1>
    </div>
  </div>
  <div class="row">
    <div class="col1">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Meet Jason</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Our Philosophy</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Curiculum</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="col1">
      <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active" data-bs-interval="10000">
            <img src="images/_A0D7832.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item" data-bs-interval="10000">
            <img src="images/_A0D7906.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item" data-bs-interval="10000">
            <img src="images/_A0D7942.jpg" class="d-block w-100" alt="...">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col1">
      <p>Hello Worldsssssss!</p>
    </div>
  </div>
</div>

please be more specific. What do you mean with center the content? vertical center, horizontal center? all content or just the navbar? — tacoshy, Nov 04 '21 at 04:25

score 0 · Answer 1 · answered Nov 04 '21 at 04:31

0

very basic knowledge, Just, use this css .container-fluid{text-align: center;} ul.nav{justify-content: center;}

answered Nov 04 '21 at 04:31

Developer Tanbir

346
2
13

score 0 · Answer 2 · answered Nov 04 '21 at 04:36

0

you can use bootstrap class "text-center"

Example class="container-fluid text-center"

answered Nov 04 '21 at 04:36

Aman Garg

116
3

score 0 · Answer 3 · answered Nov 04 '21 at 05:39

If you just want the content to always be in a column (no floats) then you could get rid of the row & col classes completely & use .text-center on the container & .justify-content-center on the .nav element which uses flexbox.

<!-- Body -->
<div class="container-fluid text-center">
    <h1>XXXX XXXXX</h1>
    <ul class="nav justify-content-center">
        <li class="nav-item">
            <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="#">Meet Jason</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="#">Our Philosophy</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="#">Curiculum</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="#">Contact Us</a>
        </li>
    </ul>
    <div id="carouselExampleInterval" class="carousel slide w-75 mx-auto" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active" data-bs-interval="10000">
                <img src="images/_A0D7832.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item" data-bs-interval="10000">
                <img src="images/_A0D7906.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item" data-bs-interval="10000">
                <img src="images/_A0D7942.jpg" class="d-block w-100" alt="...">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
    <p>Hello Worldsssssss!</p>
</div>

Here's an example: https://www.codeply.com/p/1Dl4krzCHg with row & col markup removed & the carousel squeezed to 75% width with auto margins.

How can I center my content in my web page?

3 Answers3