The center alignment feature of Bootstrap's justify-content-center does not function properly when used with the flex

I am trying to center align all the contents inside a container with the class "row", but the justify-content-center property doesn't seem to be working. Can you tell me if the justify-content property works on a row?

<div class="container my-5">
   <div class="row justify-content-center">
    <hr class="col-4 border-2 border-top border-danger">
    <p class="col-4" >Skills and Abilities</p>
    <hr class="col-4 border-2 border-top border-danger">
   </div>
</div>

Any assistance on this matter would be greatly appreciated.

Answer №1

Give this a shot

<div class="container row my-5">
   <div class="d-flex justify-content-center">
     <hr class="col-4  border-2 border-top border-danger" />
     <p class="col-4" >Talents and Skills</p>
     <hr class="col-4  border-2 border-top border-danger" />
   </div>
 </div>

If it still isn't working, consider switching

<hr class="col-4  border-2 border-top border-danger" />

with

<div class="col-4  border-2 border-top border-danger" />

Answer №2

It is recommended to use div tags instead of hr tags. However, in your code, you can simply add the text-center class to the p tag.

 <div class="container my-5">
  <div class="row jusitfy-content-center">
    <hr class="col-4 border-2 mt-2 border-top border-danger" />
    <p class="col-4 text-center">Skills and Abilities</p>
    <hr class="col-4 border-2 mt-2 border-top border-danger" />
  </div>
</div>

This is the final output

If you want to achieve the same result, it is not recommended to follow your current approach. You can try the following:

 <div class="position-relative">
  <hr class="border border-danger" />
  <p class="position-absolute top-50 start-50 translate-middle bg-white fw-bold 
    text-black-50 px-4">
    Skills and Abilities
  </p>
</div>

Answer №3

To achieve this, you have the option to utilize either Flexbox or CSS Grid. This approach offers more versatility compared to simply placing a colored box behind the text.

Below is the HTML code snippet:

<h2>Title</h2>
<h2>Title number two</h2>
<h2>Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</h2>

/* Sample CSS */
body {
    background: linear-gradient(#A0BAF7, #4CACC1);
    min-height: 100vh;
}
h2 {
    margin: 30px 0;
    font: 700 2em/1.4 'Avenir', sans-serif;
    color: #FFF;
}

Here is the Flexbox solution: https://codepen.io/trys/pen/vjRXLW/

h2 {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}
h2:before,
h2:after {
    content: '';
    border-top: 2px solid;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
}
h2:after {
    margin: 0 0 0 20px;
}

And here is the CSS Grid solution: https://codepen.io/trys/pen/vjRzPa

h2 {
    display: grid;
    width: 100%;
    align-items: center;
    text-align: center;
    grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
    grid-gap: 20px;
}
h2:before,
h2:after {
    content: '';
    border-top: 2px solid;
}

Answer №4

Just include d-flex in your container

Flex Bootstrap link: https://getbootstrap.com/docs/4.0/utilities/flex/

<div class="container my-5">
   <div class="row d-flex justify-content-center">
    <hr class="col-4  border-2 border-top border-danger">
    <p class="col-4" >Skills and Abilities</p>
    <hr class="col-4  border-2 border-top border-danger">
   </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

Delete the HTML line break

I need some help figuring out how to eliminate the line break in HTML. Essentially, I want to display two "Hello World" lines next to each other instead of stacked on top of each other. <p>Hello World</p> <p>Hello World</p> ...

Unable to relocate CSS Loader Container

Can someone help me with adjusting the placement of my container? I'm struggling to maintain the styles while getting rid of the position: absolute; on the .dot class. Every attempt I make is resulting in the dots moving erratically! To clarify, I w ...

What could be the reason for my CSS selector with :target not functioning properly?

I tried to implement the instructions I found online for using :target, but it's not working as expected. My goal is to change the background color and font color of #div1 when the first link is clicked, and to change the border of #div2 when the seco ...

Tips for displaying just the image name without the entire image file path

When I try to upload an image, the path displayed is "C:\fakepath\promotion1.JPG". This fake path is causing the image not to upload to my project media folder. How can I solve this issue? Instead of the complete path, I only want to capture the ...

The CSS overflow scroller trims the excess background color

Attempting to build a website, I encountered an issue with displaying a scroll bar. Despite using the CSS property overflow: auto, I faced another problem. Let me illustrate the issue through a simple example. I have an outer div with the style overflow: ...

What are some ways I can decrease the background width and shrink the div width?

I am hoping to maintain the current box size and borders, but I want to add a touch of color. Specifically, I would like to have a red line running through the center of the box without coloring the entire background. Although I know one way to achieve thi ...

Storing a string in an array in PHP: A step-by-step guide

I'm facing an issue with storing a string in an array, as it seems to not save the changes in the array properly: <?php session_start(); $username = $_POST["username"]; $password = $_POST["password"]; $users = array(); $passe ...

Eliminate the see-through effect from a logo positioned in a fading container

I created a div with image fading functionality using JavaScript and placed a static SVG logo on top of it. The issue I'm facing is that the logo appears somewhat transparent, allowing the image in the div to show through. Despite adjusting the z-inde ...

Button halts the playback of numerous audio tracks simultaneously

I'm in the process of creating a Launchpad, where each row consists of 8 buttons/audio tracks and a stop button. My goal is for each stop button to halt all audio playing on that specific row when pressed—for instance, pressing Stop Button 1 would c ...

Step-by-step guide to positioning an iframe with 'transform:scale' on the left side

Recently, I encountered an issue with an iframe in my project. Initially, without any 'transform:scale' css applied, it displayed on the top-left side of the div as expected. However, after adding -webkit-transform:scale(0.6,1); margin-left:0.0e ...

Transform JavaScript code into HTML using jQuery.`

I have a piece of HTML and JavaScript code. The JavaScript code is currently in jQuery, but I want to convert it to vanilla JavaScript: // Vanilla JavaScript code document.querySelectorAll('.hello[type="checkbox"]').forEach(item => { item ...

Maintain button activation status even upon reloading the page (utilizing PHP and HTML)

Is it possible to maintain the active state of a button even after reloading the page without using custom CSS, only Bootstrap? I am using PHP and the buttons function as a switch for ON or OFF in an if condition. HTML <div style="margin-top: 20px ...

The process of manipulating the content of an HTML textarea using Selenium with Python

http://neomx.iwedding.co.kr/roundcube I attempted to change the content of a textarea, specifically the tracking number. My goal was to replace "9400111206213835724810" with "487289527385922090". However, I encountered an error message stating "ElementNot ...

Exploring the potential of Django to efficiently implement multiple listviews on a single webpage

Recently started working with Python and Django, but I may have bitten off more than I can chew. If anyone has the time to help educate me, I would greatly appreciate it. My main model deals with "work orders," each of which is linked to subsets of data. I ...

"Customizable rectangular container with jagged edges created with Scalable Vector Graphics

Currently, I am undertaking a small project that involves creating a box with rough edges around some text. To achieve this effect, I am utilizing an SVG with unique edges similar to the design found at this link: (except mine is in SVG format). My goal ...

AngularJS: Users must click submit button twice for it to function properly

It's puzzling that I have to click the submit button on my form twice before it triggers the save function below. My HTML is written in Pug format. Below is a snippet of my HTML template: <form ng-submit="save()"> <div class="form-group" ...

Error: AngularJS: Invalid Argument Error. The argument 'ClientCtrl' is not defined as a function, it is currently undefined

As a newcomer to AngularJS, I am facing an issue while trying to add a controller to my website. Strangely, the other two controllers are functioning perfectly fine, but this particular one is not being recognized. Here is my app.js file: var app = angul ...

Executing raml2html within an ANT automation script

I have a collection of RAML files stored in a specific folder, and I'm in the process of configuring an ANT script to "generate" them into HTML documentation utilizing the raml2html package which is highlighted on the raml.org website. While my expe ...

What is the proper way to incorporate isset($_POST['id'.$var]) into a loop structure?

I am currently working on a project where I need to create multiple fields for users to comment on. In order to achieve this, I have implemented a while loop that generates the following HTML code for the text inputs: <form name = "replyform" method = ...

Display a distinct button on the webpage if the logged-in user has not clicked on it yet

Seeking a solution to emphasize buttons that the User has not visited in the event of changes to the content of the views that appear when these buttons are clicked. The answer must utilize the ASP.net MVC CSS framework. <head> <style type="text/ ...