Bootstrap 4 container-fluid

HTML & CSS
1

I have a section in a bootstrap like this:

    <section class="jarallax call-to-action call-to-action-ontwerp d-flex" data-jarallax='{"speed": 0.4}'>
		<div class="container my-auto">
			<div class="row">
				<div class="col-lg-8 text-left wow fadeInLeft" data-wow-delay="0.3s">
					<h3>Heading</h3>
					<p>Content</p>
                    <a class="cta-btn js-scroll-trigger" href="#contact">Neem nu contact op</a>
				</div>
			</div>
		</div>   
    </section>

The content within this div is vertically centered and the content is aligned left as expected , however when I try to use container-fluid instead of container the h3 tag and the anchor tag are suddenly horizontally centered as well. I tried to use the text-left class, but notting seems to work. What am I doing wrong?

2

The code above does not show that happening.

Please post a working example like so:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style></style>
</head>

<body>
<section class="jarallax call-to-action call-to-action-ontwerp d-flex" data-jarallax='{"speed": 0.4}'>
  <div class="container-fluid my-auto">
    <div class="row">
      <div class="col-lg-8 text-left wow fadeInLeft" data-wow-delay="0.3s">
        <h3>Heading</h3>
        <p>Content</p>
        <a class="cta-btn js-scroll-trigger" href="#contact">Neem nu contact op</a> </div>
    </div>
  </div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.