Items in Bootstrap row are not aligning in the center

Utilizing the Bootstrap 5 row property for responsiveness on my website, I encountered an issue where two divs placed next to each other did not align at the center of the webpage as expected. There was an unusual gap on the right that I couldn't eliminate. These elements are enclosed in a container class. Any suggestions? See code snippet below and an image attached displaying the issue when inspected.

<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>
htmlcsstwitter-bootstrapbootstrap-4flexbox

Answer №1

As stated in the feedback provided.

To organize your content, consider adding a class to the beginning of your page such as: section.

For instance:

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

Answer №2

The previous answer mentioned some semantic issues, prompting me to provide an alternative solution. It is advisable to nest the Bootstrap row within a container and apply justify-content-center to the row to take advantage of its default display: flex; property.

<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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to display the retrieved list data using v-for loop from axios get request

I recently started using Vue.js and decided to create a simple HTML website with Vue.js to display data from myphpadmin using axios. Everything was working smoothly until I encountered an issue where I couldn't display the JSON message on my screen. n ...

javascripthtmlvue.jsaxios

How can I create an input field that only reveals something when a specific code is entered?

I am currently developing a website using HTML, and I would like to create an admin section that requires a password input in order to access. After consulting resources on w3schools, I attempted the following code: <button onclick="checkPassword()" i ...

javascripthtml

What is the proper way to insert a line break within a string in HTML code?

Trying to simplify my code, I've turned to using Nunjucks to pass a group of strings to a function that will then display them. This is what it looks like: {% macro DisplayStrings(strings) %} {% for item in strings %} <div>{{ item.strin ...

javascripthtmlnunjucks

Drop-down menu options failing to appear within the drop-down menu

I am facing an issue where the dropdown menu is visible but the items inside it are not appearing. <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data ...

htmlcssbootstrap-5

How can JavaScript be used to rearrange the placement of DOM elements?

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="boxes"> <div class="red" style="width: 300px; height: 300px; color: red"></div> <div class="blue ...

javascripthtmlcss

Ensuring User Input Integrity with JavaScript Prompt Validation

I need help with validating input from a Javascript prompt() in an external js file using HTML code. I know how to call the Javascript function and write the validation logic, but I'm unsure how to handle the prompt and user input in HTML. Do I need ...

javascripthtml

Is there a way to automatically compile LESS files whenever I save a document?

After installing Less using npm with the command $ npm install -g less I currently compile my source files to .css by running $ lessc styles.less styles.css Is there a method through the command line to automatically compile the document when saving it ...

cssnode.jsnpmless

The height of the first item in the navigation menu seems oddly disproportionate

I've been struggling for nearly an hour to make my navigation menu visually appealing. I'm utilizing Twitter Bootstrap's flat CSS menu. Oddly, the first item in the menu appears taller than all the other items in the list - you can see it h ...

htmlcsstwitter-bootstrap

Enhance Your Website with Interactive Tooltips Using Twitter Bootstrap

In Twitter bootstrap, the default trigger for tooltips is hover. If I want to make the tooltip display on focus instead, I can add data-trigger="focus". But how do I make it so the tooltip displays both on hover and on focus? ...

javascripttwitter-bootstraptooltip

Utilizing media queries and JQuery to display a variety of menus based on screen

I have created a hamburger menu specifically for smaller screens, and it is functioning properly on small screens. However, I am facing an issue where if the menu is not open before resizing the screen to a larger size, the menu does not show at all. When ...

jqueryhtmlcss

What techniques can I use to generate a 3D visual effect by shifting the background image layer as the user scrolls (creating a Parallax effect

I have combined two images in the heading; one on top of the other. My goal is to create a subtle vertical movement in the background image as the user scrolls, giving the illusion of depth. Both images share the same width, but the background image is tal ...

javascripthtmlcss3dparallax

Is it possible to make the dashboard reach 100% height?

I am struggling with designing a dashboard that needs to take up 100% of the height of any monitor. Despite reading multiple posts on Stackoverflow and trying different options like hv 100% and height: 100%, I still can't get it to work. I am using Bo ...

htmlcssheightbootstrap-4

React Native: Enhance the background with a vibrant stripe of color

I am trying to incorporate a strip of grey in the middle of my white background, but I am encountering an issue where I am unable to input any text inside it. Below is the code snippet I am working with: container: { flex: 1, justifyContent: "cent ...

javascriptcssreactjsreact-nativebackground-color

How to position an empty Div next to images

I am currently working on a project to familiarize myself with Japanese Hiagana. I plan to incorporate more images and eventually sound into the post. To reduce the number of images used, I attempted to replace empty .pngs with a div element. However, I am ...

css

What is the best way to rotate a cube when it is clicked on?

My current project involves rotating a cube by clicking on buttons either on the cube itself or floating next to it. At the moment, I have them floating for easier testing purposes, but placing them directly on the cube is not an issue. The main issue I&a ...

javascripthtmlcssrotationcube

Executing a webservice method in an html page using javascript without the need to refresh the page

Is it possible to call a webservice from an index.html page using JavaScript? My webservice is located at "localhost/ws/service.asmx" and the specific web method I want to call is called HelloWorld. The index.html page contains an HTML submit button whic ...

javascriptjqueryhtmlweb-services

Responsive design element order rearrangement

My code example is as follows: <div class="info-container"> <span class="item1">item1</span> <a class="item2" href="#">item2</a> <a class="item3" href="#">item3</a> </div> I want to rearran ...

javascriptjqueryhtmlcssangularjs

Is there a way to use an Angular expression inside an HTML document to determine if a variable is a boolean type?

I'm working with an element in my HTML where I need to determine the type of a variable, specifically whether it's a boolean or not. <button process-indicator="{{typeof(button.processIndicator) === 'boolean' ? 'modalProcess&apo ...

javascripthtmlangularjs

Randomizing jQuery for duplicated HTML/jQuery elements

I'm facing a challenge with my jQuery and HTML scripts. I have a dropdown menu where a randomly generated number is displayed in the supplies field (voorraad) based on the selected option. However, when I clone this field using the add button, the fun ...

javascriptjqueryhtml

The ng-repeat function in AngularJs does not display the data despite receiving a successful 200 response

As part of my academic assignment, I am exploring Angularjs for the first time to display data on a webpage. Despite receiving a successful http response code 200 in the Chrome console indicating that the data is retrieved, I am facing issues with displayi ...

javascripthtmlangularjshttpangularjs-ng-repeat