<div> on same blocks but with spacing - html

Question

I have a footer I am working on called <footer class="site-footer">, inside this footer there is a container <div class="container"> and inside this container, 3 divisions. col-sm-12 col-md-6 and col-xs-6 col-md-3 (2 of col-xs-6 col-md-3).
What I am doing here is making these 3 divisions on the same block. but with spacing.
I used :
.row{
display: flex;
}
row class is the class that contains these 3 divisions.
The picture below shows what I am asking, I need to make distance between the About, Hot Offers and Links sections. On the other hand the social profiles below should be on the right.
The full code of the footer is:
.row {
display: flex;
}
<!-- Bootstrap 4.1.3 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Site footer -->
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<h6>About</h6>
<p class="text-justify">Paragraph about us.</p>
</div>
<div class="col-xs-6 col-md-3">
<h6>Hot Offers</h6>
<ul class="footer-links">
<li> Offer 1 </li>
<li> Offer 2 </li>
<li> Offer 3 </li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
<h6>Quick Links</h6>
<ul class="footer-links">
<li>About Us</li>
<li>Contact Us</li>
<li>Refund Policy</li>
<li>Sitemap</li>
</ul>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<p class="copyright-text">Copyright © 2021 All Rights Reserved by
-.
</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<ul class="social-icons">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
<li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</footer>

Answer 1

If you want to add space between your blocks you can add padding on your element (your 4 columns).
With Bootstrap you can add (for example) the class "px-2" to each of your column. Like :
<div class="col-xs-12 col-md-3 px-2">
This will add 0.5 inner space on right and left of your column.
Using spacing with Bootstrap : https://getbootstrap.com/docs/4.0/utilities/spacing/
If you don't use Bootstrap, just add padding style property to your element, like :
.column{
padding: 0 0.5rem // will add margin on right and left
}
Also, if you want to add your social profils on the same row, on the right, you have to put you DIV element on the same DIV with class "row", like below.
With the class "col-md-3" on each DIV, the columns will be displayed on the same row from medium screens to extra large screen.
Bootstrap grid system : https://getbootstrap.com/docs/4.0/layout/grid/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Site footer -->
<footer class="site-footer">
<div class="container">
<!-- One row with the 4 columns -->
<div class="row">
<div class="col-xs-12 col-md-3 px-2">
<!-- "About" content -->
<h6>About</h6>
<p class="text-justify">Paragraph about us.</p>
</div>
<div class="col-xs-6 col-md-3 px-2">
<!-- "Hot Offers" content -->
<h6>Hot Offers</h6>
<ul class="footer-links">
<li> Offer 1 </li>
<li> Offer 2 </li>
<li> Offer 3 </li>
</ul>
</div>
<div class="col-xs-6 col-md-3 px-2">
<h6>Quick Links</h6>
<ul class="footer-links">
<li>About Us</li>
<li>Contact Us</li>
<li>Refund Policy</li>
<li>Sitemap</li>
</ul>
</div>
<div class="col-xs-6 col-md-3 px-2">
<h6>Social profiles</h6>
<ul class="social-icons">
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i>FB</a></li>
<li><a class="twitter" href="#"><i class="fa fa-twitter"></i>Twitter</a></li>
<li><a class="linkedin" href="#"><i class="fa fa-linkedin"></i>LinkedIn</a></li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
<p class="copyright-text">Copyright © 2021 All Rights Reserved by
-.
</p>
</div>
</div>
</div>
</footer>
Finally, about your comment on your answer "if I use bootstrap everything works out but some of the text went bold, etc", you can only import bootstrap-grid.css or bootstrap-grid.min.css.
It only includes grid system and flex utilities without all styles on elements.