Topic: My Colums not Side by Side
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-->
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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