Displaying 5 Columns in one row on footer - Bootstrap - html

Question

Hi I am trying to display 5 responsive rows in one line in footer but it seems like its not working exactly the way I want it.
Here is my code
<footer>
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="col-md-2 customer">
<h3>Customer Service</h3>
<p>Unit 36/65 Marigold St,Revesby
NSW 2212 <br>
P | [phone]
<br>
F | [phone]
<br>
E | info#trevell.com.au</p>
</div>
<div class="col-md-2 col-md-offset-1 company">
<h3>The Company</h3>
<ul>
<li>Our Profile</li>
<li>Home Designs</li>
<li>Showcase</li>
<li>Commercial</li>
<li>Career</li>
<li>Blog</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="col-md-2 dc">
<h3>Our Display Center</h3>
<ul>
<li>Freemans Ridge Estate</li>
<li>Homeworld Camden South</li>
<li>Brooks Beach Estate Horsley</li>
</ul>
</div>
<div class="col-md-2 lp">
<h3>House & Land Packages</h3>
<ul>
<li>House & Land Packages</li>
<li>Display Home for Sale</li>
</ul>
</div>
<div class="col-md-2 nl">
<h3>Newsletter</h3>
<p>Be the first to know about Trevelle Special offers</p>
<i class="fa fa-envelope fa-2x"></i>
</div>
</div>
</div>
</div>
</footer>
I even tried to replace col-md-2 with col-md-3 but the last columns moves to next line. Here is attached image I am trying to make exact like this Image

Answer 1

Follow this example
CSS:
#media(min-width:768px){
div.col-sm-7.seven-three{width:60%!important;}
div.col-sm-5.five-two{width:40%!important;}
}
HTML:
<div class="col-sm-12">
<div class="row">
<div class="col-sm-7 seven-three">
<div class="row">
<div class="col-sm-4" style="background-color:#000;">Column 1</div>
<div class="col-sm-4" style="background-color:#333;">Column 2</div>
<div class="col-sm-4" style="background-color:#444;">Column 3</div>
</div>
</div>
<div class="col-sm-5 five-two">
<div class="row">
<div class="col-sm-6" style="background-color:#555;">Column 4</div>
<div class="col-sm-6" style="background-color:#666;">Column 5</div>
</div>
</div>
</div>
</div>
Here's JSFiddle

Answer 2

Try this
<footer>
<div class="container">
<div class="row">
<div class="col-md-2 customer">
<h3>Customer Service</h3>
<p>Unit 36/65 Marigold St,Revesby
NSW 2212 <br>
P | [phone]
<br>
F | [phone]
<br>
E | info#trevell.com.au</p>
</div>
<div class="col-md-2 company">
<h3>The Company</h3>
<ul>
<li>Our Profile</li>
<li>Home Designs</li>
<li>Showcase</li>
<li>Commercial</li>
<li>Career</li>
<li>Blog</li>
<li>Terms & Conditions</li>
</ul>
</div>
<div class="col-md-3 dc">
<h3>Our Display Center</h3>
<ul>
<li>Freemans Ridge Estate</li>
<li>Homeworld Camden South</li>
<li>Brooks Beach Estate Horsley</li>
</ul>
</div>
<div class="col-md-3 lp">
<h3>House & Land Packages</h3>
<ul>
<li>House & Land Packages</li>
<li>Display Home for Sale</li>
</ul>
</div>
<div class="col-md-2 nl">
<h3>Newsletter</h3>
<p>Be the first to know about Trevelle Special offers</p>
<i class="fa fa-envelope fa-2x"></i>
</div>
</div>
</div>
</footer>
you shouldn't use nesting col under a row, and keep all children of row plus to 12

Answer 3

<footer class="container">
<div class="col-md-12 row">
<div class="col-md-3">
<div class="comp-name">
<h2>Company Name</h2><br>
<p>Halimun Street 25
Jakarta, Indonesia
12850</p><br>
YourDomin.com
</div>
</div>
<div class="col-md-6">
<div class="container">
<div class="row">
<div class="col-md-4 menu-list">
<ul>
<li>Sitemap</li>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Menu</li>
<li>Store</li>
<li>Contact</li>
</ul>
</div>
<div class="col-md-4 lorem">
<ul>
<li>Lorem Ipsum</li>
<li>Neque</li>
<li>Suspendisse</li>
<li>Dictum</li>
<li>Porttitor</li>
<li>Tincidunt</li>
<li>Enim lobortis</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li>Lorem Ipsum</li>
<li>Neque</li>
<li>Suspendisse</li>
<li>Dictum</li>
<li>Porttitor</li>
<li>Tincidunt</li>
<li>Enim lobortis</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<img src="assets/images/footer_logo.png" alt=""><br>
<p class="text-muted">Copyright © <?php print date("Y"); ?> Freepik
Company S.L. All rights reserved.</p><br>
<p>
<i class="fa-brands fa-facebook-square"></i>
<i class="fa-brands fa-instagram-square"></i>
<i class="fa-brands fa-twitter-square"></i>
</p>
</div>
</div>
</footer>