Bootstrap 4 margin:auto and text-center doesnt center my paragraph

Question

I want to center a paragraph in my project but i couldn't

I tried margin:0px auto; and text-center features but they didn't work

<div class="row text-center">
   <p>
Daha fazla bilgi edinmek için veya sorularınız için aşağıdaki iletişim formunu kullanarak bize ulaşabilirsiniz.<br>
Mutlaka 24 saat içinde size geri dönüş sağlanacaktır.
  </p>

</div>

And Css Code:

.takim-content p {

    font-family: 'Roboto Slab', serif;
    font-size:16px;
    color:#777;
    margin:50px auto;   

}

Screenshot:

I used container div for these circles and col-sm-6 class

As well, I want to bring closer these circles and I tried padding-left and padding-right with same values but it is causing wrong result for responsive display

Answer 1

Your text is aligned center, you can see because the second line isn't left justified. The issue is that the paragraph or div holding the text isn't the correct width. There are a few solutions depending on what your desired visual is.

Depending on where your width is coming from, you should be able to set the width of the div and p to 100%:

div {
  width: 100%;
}

or

p {
  width: 100%;
}

If you want to center the elements, it looks like you already have margin: 50px auto; on the p . Try setting it on the div instead:

div {
  margin: 0 auto;
}

Note: Be sure to add these fixes to unique classes or id's so that you don't add them to every instance of a div , p , or bootstrap class like row .

Answer 2

这对我有用

<div class="row justify-content-md-center"> your paragraph </div>

Answer 3

只需在具有类行的 div 中添加 justify-content-center

Answer 4

To solve your first problem just use justify-content-center

<div class="row justify-content-center">
   <p>
Daha fazla bilgi edinmek için veya sorularınız için aşağıdaki iletişim formunu kullanarak bize ulaşabilirsiniz.<br>
Mutlaka 24 saat içinde size geri dönüş sağlanacaktır.
  </p>
</div>

Ref: https://getbootstrap.com/docs/4.3/utilities/flex/

To solve your second problem. You can use float-right for first circle and float-left for second circle.

<div class="row">
   <div class="col-md-6"><span class="circle float-right"></span></div>
   <div class="col-md-6"><span class="circle float-left"></span></div>
</div>