Hello there,
i have a problem i am working with cols in Boostrap now but the DIV cols are not aligning perfectly like in the PSD design.
It should look like this:
http://www.balkaneros.nl/look.png
How it looks now:
http://www.balkaneros.nl/mine.png
@ralphm or @PaulOB or maybe some great member who can help me with this issue?
I really hope somebody can help me here!
My HTML:
<!doctype HTML>
<html>
<head>
<!-- Website Title -->
<title>Draw Factory</title>
<!-- Meta Info -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Draw Factory custom and unique design">
<meta name="keywords" content="HTML5, CSS3, JQuery, WordPress, Design">
<meta name="author" content="Alveos BV.">
<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css"><!-- bootstrap -->
<link rel="stylesheet" href="css/font-awesome.min.css"><!-- font awesome -->
<link rel="stylesheet" href="css/style.css"><!-- custom style -->
</head>
<body>
<!-- =========== wpa-contact =========== -->
<div class="wpa-contact">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-1">
<ul>
<h4>Contact</h4>
<div class="wpa-contact-fix">
<form role="wpa-contactformulier">
<div class="form-group">
<input type="naam" class="form-control field-control" id="wpa-naam" placeholder="Naam">
</div>
<div class="form-group">
<input type="email" class="form-control field-control" id="wpa-email" placeholder="Email">
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Uw bericht"></textarea>
</div>
<button type="submit" class="btn btn-default">Verzenden</button>
</form>
</div><!-- end: wpa-contact-fix -->
</ul>
</div><!-- end col -->
<div class="col-lg-3 col-lg-push-1 col-md-3 col-sm-1">
<ul>
<h4>Adres</h4>
<div class="wpa-contact-fix">
<p>Draw Factory</p>
<p>Weglaanstraat 2</p>
<p>1234 AB Rotterdam</p>
</div>
</ul>
</div><!-- end col -->
<div class="col-lg-5 col-md-5 col-sm-1">
<ul>
<h4>Onze projecten</h4>
<div class="wpa-contact-fix">
<img src="images/nederland.png" alt="Nederland" class="img-responsive">
</div>
</ul>
</div><!-- end col -->
</div><!-- end: row -->
</div><!-- end: container -->
</div><!-- end: wpa-contact -->
<!-- =========== wpa-bottom =========== -->
<div class="wpa-bottom">
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-1">
<nav>
<ul>
<h4>Woordenboek</h4>
<div class="wpa-bottom-fix">
<li><a href="#">Diensten</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Klanten</a></li>
</div><!-- end: wpa-bottom-navigation -->
</ul>
</nav>
</div><!-- end: col -->
<div class="col-lg-5 col-md-5 col-sm-1">
<nav>
<ul>
<h4>Service</h4>
<div class="wpa-bottom-fix">
<li><a href="#">FAQ</a></li>
<li><a href="#">Werkwijze</a></li>
<li><a href="#">Up-to-date</a></li>
</div><!-- end: wpa-bottom-navigation -->
</ul>
</nav>
</div><!-- end: col -->
<div class="col-lg-2 col-md-2 col-sm-1">
<h4>Social media</h4>
<div class="wpa-bottom-fix">
<span class="icon">
<i class="fa fa-facebook-square"></i>
<a href="#facebook">Facebook</a>
</span>
<span class="icon">
<i class="fa fa-twitter-square"></i>
<a href="#twitter">Twitter</a>
</span>
<span class="icon">
<i class="fa fa-linkedin-square"></i>
<a href="#linkedin">Linkedin</a>
</span>
<span class="icon">
<i class="fa fa-youtube-play"></i>
<a href="#youtube">Youtube</a>
</span>
</div><!-- end: wpa-bottom-navigation -->
</div><!-- end: col -->
</div><!-- end row -->
</div><!-- end: container -->
</div>
<!-- ========== end: wpa-bottom ========== -->
<!-- =========== wpa-footer =========== -->
<div class="wpa-footer">
<div class="container">
<div class="row">
<footer>
<div class="col-lg-10 col-md-10 col-sm-1">
<nav>
<ul>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Naar boven</a></li>
</ul>
</nav>
</div><!-- end: col -->
<div class="col-lg-2 col-md-2 col-sm-1">
<span>© Draw Factory</span>
</div><!-- end: col -->
</footer>
</div><!-- end: row -->
</div><!-- end: container -->
</div>
<!-- =========== end: wpa-footer =========== -->
<!-- Essential JQuery -->
<script src="js/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
