css issues with html template while running in django server - html

i have bought a social media template from themforest for my django application
the html template is perfect without running any server but after integrating and running the server there are some issues with the UI
i have tried checking out all the static files but everything seems to be good
newsfeed.html
<footer id="footer">
<div class="container">
<div class="row">
<div class="footer-wrapper">
<div class="col-md-3 col-sm-3">
<img src="{% static 'images/logo-black.png' %}" alt="" class="footer-logo" />
<ul class="list-inline social-icons">
<li><i class="icon ion-social-facebook"></i></li>
<li><i class="icon ion-social-twitter"></i></li>
<li><i class="icon ion-social-googleplus"></i></li>
<li><i class="icon ion-social-pinterest"></i></li>
<li><i class="icon ion-social-linkedin"></i></li>
</ul>
</div>
<div class="col-md-2 col-sm-2">
<h5>For individuals</h5>
<ul class="footer-links">
<li>Signup</li>
<li>login</li>
<li>Explore</li>
<li>Finder app</li>
<li>Features</li>
<li>Language settings</li>
</ul>
</div>
<div class="col-md-2 col-sm-2">
<h5>For businesses</h5>
<ul class="footer-links">
<li>Business signup</li>
<li>Business login</li>
<li>Benefits</li>
<li>Resources</li>
<li>Advertise</li>
<li>Setup</li>
</ul>
</div>
<div class="col-md-2 col-sm-2">
<h5>About</h5>
<ul class="footer-links">
<li>About us</li>
<li>Contact us</li>
<li>Privacy Policy</li>
<li>Terms</li>
<li>Help</li>
</ul>
</div>
<div class="col-md-3 col-sm-3">
<h5>Contact Us</h5>
<ul class="contact">
<li><i class="icon ion-ios-telephone-outline"></i>+1 (234) 222 0754</li>
<li><i class="icon ion-ios-email-outline"></i>info#thunder-team.com</li>
<li><i class="icon ion-ios-location-outline"></i>228 Park Ave S NY, USA</li>
</ul>
</div>
</div>
</div>
</div>
<div class="copyright">
<p>Thunder Team © 2016. All rights reserved</p>
</div>
</footer>
http://mythemestore.com/friend-finder/newsfeed.html this is how it looks without integrating django server
and this is how it looks after integrating it with django server
i havent added any css code related to this template beacuase the css code is more than 1000 lines
but if you want me to add it ,ill just edit and update the question

Open the chrome developer console and reload the page. Check if you have some kind of error or warning related to css.
I guess this may be the issue.
css-not-loading-wrong-mime-type-django

When you are working with a theme you have to include all the required styles in your template. You can see that the styles are missing. Furthermore, do not worry about 1000 lines of css. It is not much after minifying and compression.

Related

Random <a></a> appeared in HTML code after site went live

Basically my problem is what my question is saying. Before some time we had build
a site using Django and it's build in DB. The site had some problems but we fixed the and we got it live. After that we saw a major mistake in the footer where all the three sections where out
of place. This was do to a random in the HTML code after we incpect element:
This is how the footer is implemented in every page.
</body>
{% include "main/footer.html" %}
</html>
Footer code in server
<div class="content">
<section>
<img class="footer-logo" src="{% static 'material/imgs/logo_banner_inverted.svg' %}" alt="" srcset="">
<!-- <p><i class="fa fa-folder"> </i>dummy#gmail.com</p> -->
</section>
<section class="inline">
<h4 >Our Social Media</h4>
<ul class="">
<li class="no-bottom"><i class="fa fa-facebook"> </i>Facebook</li>
<li class="no-bottom"><i class="fa fa-instagram"> </i>Instagram</li>
<li class="no-bottom"><i class="fa fa-linkedin "> </i>Linkedin</li>
</ul>
</section>
<section>
<h4 >Menu</h4>
<ul>
<li><i class=""> </i>Home</li>
<li><i class=""> </i>About us</li>
<li><i class=""> </i>Contact</li>
</ul>
</section>
</div>
Footer code presented in live site
<a>
</a><div class="content"><a>
<section>
<img class="footer-logo" src="/static/material/imgs/logo_banner_inverted.svg" alt="" srcset="">
<!-- <p><i class="fa fa-folder"> </i>dummy#gmail.com</p> -->
</section>
</a><section class="inline"><a>
<h4>Our Social Media</h4>
</a><ul class=""><a>
</a><li class="no-bottom"><a></a><i class="fa fa-facebook"> </i>Facebook</li>
<li class="no-bottom"><i class="fa fa-instagram"> </i>Instagram</li>
<li class="no-bottom"><i class="fa fa-linkedin "> </i>Linkedin</li>
</ul>
</section>
<section>
<h4>Menu</h4>
<ul>
<li><i class=""> </i>Home</li>
<li><i class=""> </i>About us</li>
<li><i class=""> </i>Contact</li>
</ul>
</section>
I am not an expert and I did some research and it just seams like a bug.
It was indeed a bug. It seems that the problem wasn't even at footer but in the page
that was generated in. In the text of the page we had this code <a class="hover-link a-link" href="some-link"> Link for text </a>.
Somehow that caused the unexpected bug (if someone knows how that happened I would be happy to learn).
Our solution was to just change it like that <h><a class="hover-link a-link" href="some-link"> Link for text </a></h>

how do I design this footer with bootstrap and responsible?

I'm trying to get this design out, but it just didn't work out. Where do I make mistakes? how can I do that? Can you please help me.
I couldn't write much as CSS. I haven't even gotten the footer part right in the Middle yet.
this is my codes:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<footer>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-2 footer-left ml-auto">
<p class="more-info-title">more info</p>
<ul class="footer-left-info ">
<li>about us</li>
<li>delivery info</li>
<li>FAQs</li>
<li>terms and conditions</li>
<li>privacy policy</li>
<li>rydale jobs</li>
<li>sitemap</li>
</ul>
</div>
<div class="col-lg-2 footer-center mx-auto">
dave smith
</div>
<div class="col-lg-2 footer-right mx-auto">
<p class="find-us-title">find us</p>
<ul class="footer-right-info">
<li>
<a href="#">
<i class="fas fa-map-marker-alt"></i> rydale stockists
</a>
</li>
<li>
<a href="#">
<i class="fas fa-phone-alt"></i> shows & events
</a>
</li>
<li>
<a href="#">
<i class="far fa-envelope"></i> 01377 337160
</a>
</li>
<li>
<a href="#">
<i class="fas fa-map-marker-alt"></i> contact us
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
Use the order-N to reorganize the columsn on smartphone, for example
<footer>
<div class="container">
<div class="row no-gutters">
<div class="col-6 col-lg-3 order-2 order-lg-1 text-center">
<p><br><br>LEFT<br><br></p>
</div>
<div class="col-12 col-lg-6 order-1 order-lg-1 text-center">
<p><br><br>MIDDLE<br><br></p>
</div>
<div class="col-6 col-lg-3 order-2 order-lg-1 text-center">
<p><br><br>RIGHT<br><br></p>
</div>
</div>
</div>
</footer>

Materialize side nav bar opening on one page - not working on page two

I have searched every thread in the forums, and not be able to resolve my issue. I mostly believe this is because I am new to coding and perhaps don't understand it properly yet.
please help page two below is the one with this issue. The side nav does not work it does not open on the page with the code below. and also it does not close when you click back on the page.
<body>
<!-- Header -->
<header class="main-header-inner">
<div class="navbar-fixed">
<nav class="transparent">
<div class="container">
<div class="nav-wrapper">
<img src="img/logo2.png">
<a href="#" data-activates="mobile-nav" class="button-collapse">
<i class="fa fa-bars"></i></a>
<ul class="right hide-on-med-and-down">
<li>
<a class="grey-text text-lighten-3" href="index.html">Home</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
</li>
<li>
<a class="grey-text text-lighten-3 " href="index.html">About us</a>
</li>
<li>
<a href="https://be.linkedin.com/">
<i class="fab fa-linkedin fa-1x grey-text text-lighten-3"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div>
<ul class="side-nav" id="mobile-nav">
<h4 class="black-text text-darken-4 center">Lueur Tech</h4>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-home black-text text-darken-4"></i> Home</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="solutions.html">
<i class="fas fa-lightbulb fa-1x black-text text-lighten-3"></i> Solutions</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-info-circle fa-1x black-text text-lighten-3"></i> About us</a>
</li>
</ul>
</div>
index page where there is no issue but I have crossed checked both codes and can't find anything different. The only issue I have is that it remains open unless you click a link and I would like it to close if you click back on the page.
<body>
<!-- Header -->
<header class="main-header">
<div class="navbar-fixed">
<nav class="transparent">
<div class="container">
<div class="nav-wrapper">
<img src="img/logo2.png">
<a href="#" data-activates="mobile-nav" class="button-collapse">
<i class="fa fa-bars"></i>
</a>
<ul class="right hide-on-med-and-down">
<li>
<a class="grey-text text-lighten-3" href="index.html">Home</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
</li>
<li>
<a class="grey-text text-lighten-3 " href="#About">About us</a>
</li>
<li>
<a href="https://be.linkedin.com/">
<i class="fab fa-linkedin fa-1x grey-text text-lighten-3"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div>
<ul class="side-nav" id="mobile-nav">
<h4 class="black-text text-darken-4 center">Lueur Tech</h4>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-home black-text text-darken-4"></i> Home</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="solutions.html">
<i class="fas fa-lightbulb fa-1x black-text text-lighten-3"></i> Solutions</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="#About">
<i class="fa fa-info-circle fa-1x black-text text-lighten-3"></i> About us</a>
</li>
</ul>
</div>
thank you for your help.
UPDATE: sideNav works in codepen.io/Bjorn_Ironside1986/pen/VRbyvL but doesn't work in codepen.io/Bjorn_Ironside1986/pen/OqmOdR
these 2 are required to see codepen working
<!--Import jQuery before materialize.js-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
I think it's because you never close your header tag.
You need some javascript to initialize the sidenav - in the code below, i just added the options for the side nave to open from the left... Click on the Menu button on the left.
Hope it works for you.
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {
edge: 'left'
});
});
<!--Import jQuery before materialize.js-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- Header -->
<header class="main-header-inner">
<div class="navbar-fixed">
<nav class="transparent">
<div class="container">
<div class="nav-wrapper">
<img src="img/logo2.png">
<a href="#" data-activates="mobile-nav" class="button-collapse">
<i class="fa fa-bars"></i></a>
<ul class="right hide-on-med-and-down">
<li>
<a class="grey-text text-lighten-3" href="index.html">Home</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
</li>
<li>
<a class="grey-text text-lighten-3 " href="index.html">About us</a>
</li>
<li>
<a href="https://be.linkedin.com/">
<i class="fab fa-linkedin fa-1x grey-text text-lighten-3"></i></a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="images/office.jpg">
</div>
<img class="circle" src="images/yuna.jpg">
<span class="white-text name">John Doe</span>
<span class="white-text email">jdandturk#gmail.com</span>
</div>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-home black-text text-darken-4"></i> Home</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="solutions.html">
<i class="fas fa-lightbulb fa-1x black-text text-lighten-3"></i> Solutions</a>
</li>
<li>
<div class="divider"></div>
</li>
<li>
<a href="index.html">
<i class="fa fa-info-circle fa-1x black-text text-lighten-3"></i> About us</a>
</li>
</ul>
<a href="#" data-target="slide-out" class="sidenav-trigger">
<h4 class="black-text text-darken-4 center">Lueur Tech</h4>
</a>
</div>
<!-- Showcase -->
<div class="showcase container">
<div class="row">
<div class="col s12 m10 offset-m1 center">
<h1>The Digital World</h1>
<h5>Solutions</h5>
</div>
</div>
</div>
</header>
<!-- Section: Solutions About -->
<section class="section section-solutions-about">
<div class="container">
<div class="row">
<div class="col s12 m5">
<h2>What We Do...</h2>
<p>Solutions are ways of solving problems, when you consider world issues today, everything boils down to Langauge, Maths, Technology and Science! If you consider what these represent, in one view that could be taken if we break them down it is merely
code in some form, structed together to create innovation.</p>
</div>
<div class="col s12 m6 offset-m1">
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s4">
Web Devlopment
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section: Features -->
<section class="section section-features grey lighten-3">
<div class="container center">
<h4>
<span class="deep-purple-text text-darken-1 center">Powerful</span> & Innovative</h4>
<h6 class="grey-text text-darken-2 center">We aim to assist you, and provide quality of service to help you scale your business, capture new clients and retain existing customers with our desings!</h6>
<br>
<br>
<!-- Row 1 -->
<div class="row">
<div class="col s12 m4">
<h5>
<i class="fa fa-user"></i> User Friendly Applications
</h5>
<p>As a business the focus is on the client and the user to generate interest or purchase of services and products. We focus on functionality and accessability at the forefront of every desgin to ensure the user maintains interest. We ask you to
provide the information needed to explain your product or service which will allow the user to make an informed choice.</p>
</div>
<div class="col s12 m4">
<h5>
<i class="fa fa-database"></i> Security of user and client Data
</h5>
<p>In today's society information is the new form of gold. We can advise you on policys such as EU GDPR and UK data protection laws. Depedning on your wesbites structure we will inform you of any products which may be of benfit to prevent cyber crime.
</p>
</div>
<div class="col s12 m4">
<h5>
<i class="fa fa-chart-line"></i> Data Analytics
</h5>
<p>
Data helps devlope a business it can show growing trends or point out possible issues. With this information a business can takes steps to proctect both themsleves and their client but also it can assist them in devloping growth and expanding into new
sectors. We can advise on tools which can be helpful to your business in relation gathering data from users.</p>
</div>
</div>
<!-- Row 2 -->
<div class="row">
<div class="col s12 m4">
<h5>
<i class="fa fa-github"></i> Problem Solving
</h5>
<p>
Programing is not for everyone, that is why their are expereinced devlopers who offer services such a repair or managing sites. We can offer sulutions to problems with your site should the need arise. In some circumstances we may offer to manage your
site for a fee, this can be discussed further dpending your needs.
</p>
</div>
<div class="col s12 m4">
<h5>
<i class="fa fa-plus"></i> Add-ons
</h5>
<p>Our main service is devlopment, we dont offer hosting services or provide domain names. We can put you in touch with some providers, depending on your business services. We dont offer graphic design. We source images which are free of royalty
and are licenced for commecial use to prevent any legal or copyright issues. But sometimes we have to use images from sources such as adobe stock therefore these are not free and will be added to the final invoice. </p>
</div>
<div class="col s12 m4">
<h5>
<i class="fas fa-desktop"></i> Website Design
</h5>
<p> We can offer a range of services in relation to desgin and devlopment. We can do "Landing Page" Mulitiple Page Design, One page design with different sections and E-commerce sites with a database. We can also build custome designs, all our projects
take time depending on complexity and nature of the project.</p>
</div>
</div>
<div class="center">
<h5>
<span class="deep-purple-text text-lighten-1">Have a question? </span> Contact our sales team
</h5>
<p>sales#lueurtech.co.uk</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="page-footer black lighten-1">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">About Us</h5>
<p class="grey-text text-lighten-4">Our company name "Lueur" is a french word which translates to "Glow" the more common use of the word is "lueur d'espoir" which means "Glimmer of Hope" it is in this meaning that our business looks to offer small business the chance to glow. We
take into consideration that everyone just wants to succeed in life and in business so our mission of course is to make a stable business but the main prespective is to give hope and help people grow!</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li>
<a class="grey-text text-lighten-3 " href="index.html">Home</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="solutions.html">Solutions</a>
</li>
<li>
<a class="grey-text text-lighten-3" href="index.html">About us</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright deep-purple darken-1">
<div class="container">
<div> Lueur Tech © 2018</div><i class="fab fa-cc-paypal fa-3x grey-text text-lighten-3"></i>
<a href="https://be.linkedin.com/">
<i class="fab fa-linkedin fa-3x grey-text text-lighten-3"></i></a>
<p class="grey-text text-lighten-4 right " href="#!"> Terms | Legal | Privacy</p>
</div>
</footer>

Logo and Navbar links on same line

I'm trying to get the logo and the nav bar links on the same line. The logo will appear by itself when it resizes to mobile.
This is the current:
Currently on two lines.
This is the html behind it:
<!-- header Area Start-->
<div class="header-area">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3 col-12">
<div class="logo">
<a href="index-2.html">
<img src="assets/img/logo.png" alt="">
</a>
</div>
</div>
<div class="col-lg-10 text-right col-md-9 col-12">
<div class="responsive_menu"></div>
<div class="mainmenu-area">
<ul id="nav">
<li>Home <i class="fa fa-angle-down"></i>
<ul class="drop-menu">
<li>Rocket Home </li>
<li>Gradient Home </li>
</ul>
</li>
<li>Domain</li>
<li>Hosting <i class="fa fa-angle-down"></i>
<ul class="drop-menu">
<li>Hosting </li>
<li>Team </li>
<li>About us</li>
<li>Testimonial</li>
<li>FAQ</li>
</ul>
</li>
<li>Pages <i class="fa fa-angle-down"></i>
<ul class="drop-menu">
<li>Team </li>
<li>About us</li>
<li>Testimonial</li>
<li>FAQ</li>
<li>Service</li>
<li>Blog Details</li>
<li>404 Page</li>
<li>Coming Soon</li>
</ul>
</li>
<li>Blog</li>
<li>Support</li>
</ul>
</div>
<div class="search">
<span class="search-trigger"><i class="fa fa-search"></i></span>
<div class="search-box">
<form action="#">
<input type="text" name="s" placeholder="Search..">
<div class="submit-btn">
<input type="submit" value="Go">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- header Area end-->
Any suggestions on what I can do to make them all on one line?
Maximum size of the column in bootstrap is 12. Bootstrap adds padding and margin by default, so try using col-lg-8 and see what happens.
<div class="header-area">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3">
<div class="logo">
<a href="index-2.html">
<img src="assets/img/logo.png" alt="">
</a>
</div>
</div>
<div class="col-lg-8 text-right col-md-9">
<div class="responsive_menu"></div>
<div class="mainmenu-area">

Bootstrap wont get 4 DIVs in one row

So guys my questions says I am trying to make 4 DIV's being in the same line/row however.
Product Company (middle) Languages DIV4
text... text... text... text...
text... text... text... text...
it should look something like that... .I hope you do understand what i mean!
so this is my code: `
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Product</h2>
<li> Templates</li>
<li> Pricing</li>
</div>
<div class="col-md-4">
<h2>Company</h2>
<li>About Us</li>
<li>Contact us</li>
<li>Terms of Servise</li>
<li>Privacy policy</li>
</div>
<div class="col-md-4">
<h2>Language</h2>
<li>Englisch</li>
<li>German</li>
<li>Srpski</li>
</div>
<div class="col-md-4">
<li>facebook</li>
<li>kaaa</li>
<li>kaaa</li>
</div>
</div>
</div>
First make sure that your markup is valid. E.g. for your li tags the ul tag was missing.
If you want to display 4 divs, you need the class col-md-3 instead of col-md-4. Bootstrap is using a grid system with a default column count of 12. If you need 4 columns you have to use 12/4 = 3 meaning col-md-3.
The md stands for medium. So for small devices, the columns break and are displayed on top of each other. Watch the following example in fullscreen, to see the columns standing next to each other.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-3">
<h2>Product</h2>
<ul>
<li> Templates</li>
<li> Pricing</li>
</ul>
</div>
<div class="col-md-3">
<h2>Company</h2>
<ul>
<li>About Us</li>
<li>Contact us</li>
<li>Terms of Servise</li>
<li>Privacy policy</li>
</ul>
</div>
<div class="col-md-3">
<h2>Language</h2>
<ul>
<li>Englisch</li>
<li>German</li>
<li>Srpski</li>
</ul>
</div>
<div class="col-md-3">
<ul>
<li>facebook</li>
<li>kaaa</li>
<li>kaaa</li>
</ul>
</div>
</div>
</div>
Could be a screen size issue and also sytax issue
Bootstrap only allows 12 columns per row, so each column needs "width" of 3, col-md-3
Then since the size is set to md the columns widths are set up for a medium size screen
With col-xs-3 it will make the columns as small as they can go without overflowing to the next row
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-3">
<h2>Product</h2>
<ul>
<li> Templates
</li>
<li> Pricing
</li>
</ul>
</div>
<div class="col-md-3 col-xs-3">
<h2>Company</h2>
<ul>
<li>About Us
</li>
<li>Contact us
</li>
<li>Terms of Servise
</li>
<li>Privacy policy
</li>
</ul>
</div>
<div class="col-md-3 col-xs-3">
<h2>Language</h2>
<ul>
<li>Englisch
</li>
<li>German
</li>
<li>Srpski
</li>
</ul>
</div>
<div class="col-md-3 col-xs-3">
<h2>Share</h2>
<ul>
<li>facebook
</li>
<li>kaaa
</li>
<li>kaaa
</li>
</ul>
</div>
</div>
</div>
check this snippet
.row {
display: flex;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Product</h2>
<ul>
<li> Templates
</li>
<li> Pricing
</li>
</ul>
</div>
<div class="col-md-4">
<h2>Company</h2>
<ul>
<li>About Us
</li>
<li>Contact us
</li>
<li>Terms of Servise
</li>
<li>Privacy policy
</li>
</ul>
</div>
<div class="col-md-4">
<h2>Language</h2>
<ul>
<li>Englisch
</li>
<li>German
</li>
<li>Srpski
</li>
</ul>
</div>
<div class="col-md-4">
<h2>div4</h2>
<ul>
<li>facebook
</li>
<li>kaaa
</li>
<li>kaaa
</li>
</ul>
</div>
</div>
</div>
Hope this helps