Paul Smith free asked 4 years ago


Expected behavior Hi, I'm trying to get my 3 columns to align side by side but for some reason, they are stacked on top of each other.

Actual behavior

Resources (screenshots, code snippets etc.) Tools

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque voluptatum corrupti obcaecati eveniet distinctio doloribus vero similique placeat consequuntur esse!

FIND OUT MORE!

                        <!---------------SECOND ICON---------------->
                        <ul class="row">
                            <li class="col-md-4 pt-5 pr-5">
                                <article>
                                    <i class="fas fa-tools"></i>
                                    <h6 class="heading">Tools</h6>
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque voluptatum
                                        corrupti obcaecati eveniet
                                        distinctio doloribus vero similique placeat consequuntur esse!</p>
                                    <footer class="mt-4">
                                        <a href="#" class="btn btn-danger">FIND OUT MORE!</a>
                                    </footer>
                                </article>
                            </li>
                        </ul>

                        <!---------------THIRD ICON---------------->
                        <ul class="row">
                            <li class="col-md-4 pt-5 pr-5">
                                <article>
                                    <i class="fas fa-tools"></i>
                                    <h6 class="heading">Tools</h6>
                                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque voluptatum
                                        corrupti obcaecati eveniet
                                        distinctio doloribus verosimiliqueplaceat consequuntur esse!</p>
                                    <footer class="mt-4">
                                        <a href="#" class="btn btn-danger">FIND OUT MORE!</a>
                                    </footer>
                                </article>
                            </li>
                        </ul>
                        <!--SERVICES END-->

Tomek Makowski staff answered 4 years ago


Hi

Here is a solution

https://mdbootstrap.com/snippets/jquery/tomekmakowski/2309703

To do this you have to put col-4 next each other. Furthermore row element make your container flex and always 100% width and that's why you couldn't get your column align side by side

Regards



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: Desktop
  • Browser: Chrome
  • OS: OS X Catalina
  • Provided sample code: No
  • Provided link: No