CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4flexbox
adrman47
adrman47

Reputation: 59

Bootstrap row not centering items

I am using Bootstrap 5 row property to make my website responsive. However, when I try to add 2 divs next to each other, they don't seem to align at the very center of the webpage, instead, there is quite an unused gap at the right that I can't get rid of. For this section I am using class="container". enter image description hereAny tips? Code below. I also added an image of how it looks when I inspect.

<h1> (SPH) </h1>
                <div class="row">
                    <div class="box col-lg-6">
                        <h3> Who We Are </h3>
                        <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus fuga repellendus minima maiores beatae unde odit eius in sint optio. Ipsum optio neque beatae quod necessitatibus dolor iste quae voluptatibus. </p>
                    </div>
                    <div class="box col-lg-6">
                        <h3> What We Do </h3>
                        <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam saepe illum dolores corporis suscipit enim at non temporibus perspiciatis corrupti dicta pariatur, veritatis beatae error doloremque voluptates. Eius, eveniet accusantium. </p>
                    </div>
                </div>

Upvotes: 1

Views: 381

Answers (2)

Kameron
Kameron

Reputation: 10846

The other answer has a few semantic issues so I'd figured I post one. Essentially, you should nest your Bootstrap row into a container. Then you can add justify-content-center on the row because it has a display: flex; by default.

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>


<div class="container">
<h1 class="text-center"> (SPH) </h1>
  <div class="row justify-content-center">
    <div class="box col-lg-6">
      <h3> Who We Are </h3>
      <p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus fuga repellendus minima maiores beatae unde odit eius in sint optio. Ipsum optio neque beatae quod necessitatibus dolor iste quae voluptatibus. </p>
    </div>
    <div class="box col-lg-6">
      <h3> What We Do </h3>
      <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam saepe illum dolores corporis suscipit enim at non temporibus perspiciatis corrupti dicta pariatur, veritatis beatae error doloremque voluptates. Eius, eveniet accusantium. </p>
    </div>
  </div>
</div>

Upvotes: 1

Fiad
Fiad

Reputation: 803

As mentioned in the comments.

You can use a class at the top of your page like : container.

Example:

<div class= container justify-content-center> /your code here/ </div>

Upvotes: 1

Related Questions