How to leave the four in a row?

Asked

Viewed 56 times

0

<div class="container py-4">
    <div class="row">
        <div class="col-md-10 my-4 mx-auto">
            <h2 class="text-center display-4">Bootstrap 4 Pricing Tables</h2>

            <hr>
            <div class="row no-gutters my-3">
                <div class="col-md-4 pl-2">
                    <div class="list-group text-center my-3">
                        <div href="#" class="list-group-item text-white bg-dark">
                            <h4 class="text-center my-1">Managed</h4>
                        </div>
                        <div class="list-group-item text-uppercase font-weight-bold">
                            Contact Us
                        </div>
                        <a href="#" class="list-group-item">
                            Upto 10 TB HDD Storage
                        </a>
                        <a href="#" class="list-group-item">
                            Consultation
                        </a>
                        <a href="#" class="list-group-item">
                            Custom Servers
                        </a>
                        <a href="#" class="list-group-item">
                            24/7 Support
                        </a>
                        <div class="list-group-item">
                            <button class="btn btn-secondary btn-lg btn-block text-truncate">Contact Us</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 pl-2">
                    <div class="list-group text-center my-3">
                        <div href="#" class="list-group-item text-white bg-dark">
                            <h4 class="text-center my-1">Managed</h4>
                        </div>
                        <div class="list-group-item text-uppercase font-weight-bold">
                            Contact Us
                        </div>
                        <a href="#" class="list-group-item">
                            Upto 10 TB HDD Storage
                        </a>
                        <a href="#" class="list-group-item">
                            Consultation
                        </a>
                        <a href="#" class="list-group-item">
                            Custom Servers
                        </a>
                        <a href="#" class="list-group-item">
                            24/7 Support
                        </a>
                        <div class="list-group-item">
                            <button class="btn btn-secondary btn-lg btn-block text-truncate">Contact Us</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 pl-2">
                    <div class="list-group text-center my-3">
                        <div href="#" class="list-group-item text-white bg-dark">
                            <h4 class="text-center my-1">Managed</h4>
                        </div>
                        <div class="list-group-item text-uppercase font-weight-bold">
                            Contact Us
                        </div>
                        <a href="#" class="list-group-item">
                            Upto 10 TB HDD Storage
                        </a>
                        <a href="#" class="list-group-item">
                            Consultation
                        </a>
                        <a href="#" class="list-group-item">
                            Custom Servers
                        </a>
                        <a href="#" class="list-group-item">
                            24/7 Support
                        </a>
                        <div class="list-group-item">
                            <button class="btn btn-secondary btn-lg btn-block text-truncate">Contact Us</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 pl-2">
                    <div class="list-group text-center my-3">
                        <div href="#" class="list-group-item text-white bg-dark">
                            <h4 class="text-center my-1">Managed</h4>
                        </div>
                        <div class="list-group-item text-uppercase font-weight-bold">
                            Contact Us
                        </div>
                        <a href="#" class="list-group-item">
                            Upto 10 TB HDD Storage
                        </a>
                        <a href="#" class="list-group-item">
                            Consultation
                        </a>
                        <a href="#" class="list-group-item">
                            Custom Servers
                        </a>
                        <a href="#" class="list-group-item">
                            24/7 Support
                        </a>
                        <div class="list-group-item">
                            <button class="btn btn-secondary btn-lg btn-block text-truncate">Contact Us</button>
                        </div>
                    </div>
                </div>
            </div>

            <hr>

        </div>
    </div>
</div>

inserir a descrição da imagem aqui

html bootstrap bootstrap-4
  • 1

    Felipe, you’ve made it clear that it’s bootstrap when you tag. You don’t have to put it in the title. Not to mention that the title starting with lowercase does not follow the cultured standard of writing, and whenever possible it should adhere to it (except if the author of the content is deliberately fleeing for stylistic textual issues, but is not your case with the title)

2 answers

1


An Row in Bootstrap is worth 12

If you want 4 column, your col-md-4 pl-2 should be col-md-3 pl-2 because you have 4 elements adding the col-md-4 16, which results in two lines Row 1 = 12 and Row 2 = 4

<div class="container py-4">
    <div class="row">
        <div class="col-md-10 my-4 mx-auto">
            <h2 class="text-center display-4">Bootstrap 4 Pricing Tables</h2>

            <hr>
            <div class="row no-gutters my-3">
                <div class="col-md-3 pl-2">
                    <div class="list-group text-center my-3">
                        <div href="#" class="list-group-item text-white bg-dark">
                            <h4 class="text-center my-1">Managed</h4>
                        </div>
                        <div class="list-group-item text-uppercase font-weight-bold">
                            Contact Us
                        </div>
                        <a href="#" class="list-group-item">
                            Upto 10 TB HDD Storage
                        </a>
                        <a href="#" class="list-group-item">
                            Consultation
                        </a>
                        <a href="#" class="list-group-item">
                            Custom Servers
                        </a>
                        <a href="#" class="list-group-item">
                            24/7 Support
                        </a>
                        <div class="list-group-item">
                            <button class="btn btn-secondary btn-lg btn-block text-truncate">Contact Us</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 pl-2">
                    <div class="list-group text-center my-3">
                        <div href="#" class="list-group-item text-white bg-dark">
                            <h4 class="text-center my-1">Managed</h4>
                        </div>
                        <div class="list-group-item text-uppercase font-weight-bold">
                            Contact Us
                        </div>
                        <a href="#" class="list-group-item">
                            Upto 10 TB HDD Storage
                        </a>
                        <a href="#" class="list-group-item">
                            Consultation
                        </a>
                        <a href="#" class="list-group-item">
                            Custom Servers
                        </a>
                        <a href="#" class="list-group-item">
                            24/7 Support
                        </a>
                        <div class="list-group-item">
                            <button class="btn btn-secondary btn-lg btn-block text-truncate">Contact Us</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 pl-2">
                    <div class="list-group text-center my-3">
                        <div href="#" class="list-group-item text-white bg-dark">
                            <h4 class="text-center my-1">Managed</h4>
                        </div>
                        <div class="list-group-item text-uppercase font-weight-bold">
                            Contact Us
                        </div>
                        <a href="#" class="list-group-item">
                            Upto 10 TB HDD Storage
                        </a>
                        <a href="#" class="list-group-item">
                            Consultation
                        </a>
                        <a href="#" class="list-group-item">
                            Custom Servers
                        </a>
                        <a href="#" class="list-group-item">
                            24/7 Support
                        </a>
                        <div class="list-group-item">
                            <button class="btn btn-secondary btn-lg btn-block text-truncate">Contact Us</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 pl-2">
                    <div class="list-group text-center my-3">
                        <div href="#" class="list-group-item text-white bg-dark">
                            <h4 class="text-center my-1">Managed</h4>
                        </div>
                        <div class="list-group-item text-uppercase font-weight-bold">
                            Contact Us
                        </div>
                        <a href="#" class="list-group-item">
                            Upto 10 TB HDD Storage
                        </a>
                        <a href="#" class="list-group-item">
                            Consultation
                        </a>
                        <a href="#" class="list-group-item">
                            Custom Servers
                        </a>
                        <a href="#" class="list-group-item">
                            24/7 Support
                        </a>
                        <div class="list-group-item">
                            <button class="btn btn-secondary btn-lg btn-block text-truncate">Contact Us</button>
                        </div>
                    </div>
                </div>
            </div>

            <hr>

        </div>
    </div>
</div>

0

Exchange the classes of each div’s inner account:

It’s like this:

<div class="col-md-4 pl-2">

Change to:

<div class="col-md-3 pl-2">

Read more on the bootstrap Grid System

  • 1

    An executable print or snippet would be appreciated. Executable snippet would be especially appreciated

  • @Jeffersonquesado not yet learned how to use the executable snippet, if you can give a link where explains how.

  • @Guilhermecostamilam This is an https://butecoopensource.github.io/stack-overflow-intro-snippets-javascript-css-e-html-executable/, but it is self-explanatory. Similar to codepen, jsfiddle etc..

Browser other questions tagged html bootstrap bootstrap-4

You are not signed in. Login or sign up in order to post.