Some Elements not Centering with Bootstrap

Question

I am working on an item that will be used in one of the pages of the website that I am building. I have built the item successfully but I wanted it to be centered in the page and I'm only able to center the image, the rest of the text doesn't move at all.

HTML code:

        <article class="col-sm text-center">

            <a href="https://www.google.com/">
                <img style="border-radius: 5px;" width="400" height="561" src="https://i.imgur.com/kE1WrzV.png" alt="Image" loading="lazy" />
            </a>

            <div style="margin-top: 2%;" class="container-fluid">
                <div class="row center-block">
                    <h6 class="style-anime-title"><a class="style-anime-a" href="{{ request.path }}{{obj.mNameEN}}">This is a test (Some more test)</a></h6>
                </div>

                <div class="row center-block" style="max-width:80%;">                           
                    
                    <div>    
                        <a href="/category/{{ cat.mCategoryName }}" class="style-anime-option style-anime-a">Category 1</a>
                        <i style="color: #7d7d7d;" class="style-bullets fa fa-circle"></i>
                        <a href="/category/{{ cat.mCategoryName }}" class="style-anime-option style-anime-a">Category 2</a>
                        <i style="color: #7d7d7d;" class="style-bullets fa fa-circle"></i>
                        <a href="/category/{{ cat.mCategoryName }}" class="style-anime-option style-anime-a">Category 3</a>
                        <i style="color: #7d7d7d;" class="style-bullets fa fa-circle"></i>
                        <a href="/category" class="style-anime-option style-anime-a">...</a>
                </div>

                    <div>
                        <i style="color: #7d7d7d;" class="style-bullets fa fa-circle"></i><span class="style-anime-option">12 items</span>
                    </div>
                                                                               
                </div>

            </div>

        </article>

    </div>

CSS:

.style-anime-title {
    font-family: Montserrat !important;
    text-align: center !important;
}

.style-anime-a {
    text-decoration: none !important;
    color: #3E3E3E !important;
    transition: all .3s !important;
}

.style-anime-option {
    color: #7d7d7d !important;
}

.style-bullets {
    font-size: 4px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 5px;
    margin-right: 5px;
}

you can see here i just fixed this problem https://jsitor.com/iHS0Ntyu5 — Zubair Saif, Aug 08 '21 at 14:12
@ZubairSaif It took me some time to figure out what you did to fix my issue. I finally found out that the problem had to do with the bootstrap css file I was using. I switched the href to the one in the editor you provided and while it may have fixed it. Everything else was problem in the process. The one I was using was [this one](https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css) — RaulRohjans, Aug 08 '21 at 18:35
I just simply add here one class mx-auto and removed your style attribute from html — Zubair Saif, Aug 08 '21 at 18:46
and problem not with your bootstrap file the actual problem with html structure — Zubair Saif, Aug 08 '21 at 18:52
@ZubairSaif But even with your structure change, it still wasn't right on I put the code on my web application. It only worked when I used the same bootstrap address as the jsitor editor. I already adapter your answer to something that works for me. Thank you! — RaulRohjans, Aug 08 '21 at 18:59
can you please post your code somewhere so i can review it help you which actual problem facing or maybe your giving wrong file path into your html page maybe — Zubair Saif, Aug 08 '21 at 19:01
@ZubairSaif I posted an answer to this thread with the solution I found that works for me. My problem is fixed. — RaulRohjans, Aug 08 '21 at 19:17

score 1 · Answer 1 · answered Aug 08 '21 at 14:06

1

Some element display inline-block so you would use text-center in the parent container.

NOTE: In Bootstrap 4, center-block is now mx-auto, representing margin: 0 auto; for centering display:block elements. Bootstrap 4 now has a d-block class too so an inline element can be made display:block like this..

answered Aug 08 '21 at 14:06

Meysam Pourmonfared Azimi

129
8

Hi, please check this question, its deprecated https://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html#:~:text=The%20element%20was%20deprecated,text%2Dalign%20property%20to%20center%20. – Meysam Pourmonfared Azimi Aug 08 '21 at 14:23

score 1 · Answer 2 · answered Aug 08 '21 at 18:57

I fixed the issue with the following code:

HTML:

<article class="col-sm text-center">

    <a href="https://www.google.com/">
        <img style="border-radius: 5px;" width="400" height="561" src="https://i.imgur.com/kE1WrzV.png" alt="Image" loading="lazy" />
            </a>

        <div style="margin-top: 2%;" class="container-fluid">
            <div class="row">
                <h6 class="style-anime-title"><a class="style-anime-a" href="{{ request.path }}{{obj.mNameEN}}">This is
                        a test (Some more test)</a></h6>
            </div>

            <div class="row">

                <div class="col-sm">
                    <div>
                        <a href="/category/{{ cat.mCategoryName }}" class="style-anime-option style-anime-a">Category 1</a>
                        <i style="color: #7d7d7d;" class="style-bullets fa fa-circle"></i>
                        <a href="/category/{{ cat.mCategoryName }}" class="style-anime-option style-anime-a">Category 2</a>
                        <i style="color: #7d7d7d;" class="style-bullets fa fa-circle"></i>
                        <a href="/category/{{ cat.mCategoryName }}" class="style-anime-option style-anime-a">Category 3</a>
                        <i style="color: #7d7d7d;" class="style-bullets fa fa-circle"></i>
                        <a href="/category" class="style-anime-option style-anime-a">...</a>
                    </div>

                    <div>
                        <span class="style-anime-option">12 items</span>
                    </div>
                </div>
            </div>

        </div>

</article>

CSS:

.style-anime-title {
    font-family: Montserrat !important;
    text-align: center !important;
    margin: auto !important;
}

Some Elements not Centering with Bootstrap

2 Answers2