bootstrap justify-content-center doesn't work with row flex-CodePudding

I have a container, I want to center align all the contents inside the row class, but When I provide justify-content-center, It doesn't have any effect on my div, does justify-content works on row ?

    <div >
   <div >
    <hr >
    <p  >Skills and Abilities</p>
    <hr >
   </div>
    </div>

any help would be really appreciated.

CodePudding user response：

Try this

 <div >
   <div >
     <hr  />
     <p  >Skills and Abilities</p>
     <hr  />
   </div>
 </div>

If still not work try to change

<hr  />

<div  />

CodePudding user response：

Ideally you should use div tags intended of hr tags. But as per your code just add text-center class in p tag.

 <div >
  <div >
    <hr  />
    <p >Skills and Abilities</p>
    <hr  />
  </div>
</div>

This is the final output

And if you want to achieve the above result. Then your approach is not recommend, you can try this:

 <div >
  <hr  />
  <p >
    Skills and Abilities
  </p>
</div>

CodePudding user response：

You can use either Flexbox or CSS Grid for this. It will be more flexible than adding a colored box behind the text.

Here's the HTML:

<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's 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 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;
}

CodePudding user response：

Simply add d-flex to your container

Link Flex Boostrap : https://getbootstrap.com/docs/4.0/utilities/flex/

<div >
   <div >
    <hr >
    <p  >Skills and Abilities</p>
    <hr >
   </div>
 </div>