I try to arrange 3 sections columns equally by assigning either col-lg-4 or col-lg-3 for each of them with Bootsstrap 4.
With col-lg-4 or any responsive combination that takes total of 12 columns, I get no margin between the columns.
With col-lg-3 the margins become too wide.
The same problem arises with both "container" and "container-fluid" class.
I tried also to adjust the margins manually, replacing mx-auto with Bootstrap4 margin set at m-3, but it does not solve the problem because in that case all the columns move to the left, leaving empty space on the right side of the screen.
The problem arises the moment I try to put margins. Otherwise, if there are no margins I can set col-lg-4 without a problem. I will get for instance 3 nice columns. But once I put margins, it becomes wrong. I followed the recommendation on https://getbootstrap.com/docs/4.0/utilities/spacing/ but still it does not help.
* {
box-sizing: border-box;
}
body {
font-size: 16px;
color: black;
background-color: #eeeeee;
font-family: 'Oxygen', sans-serif;
}
.navbar {
background-color: rgb(178, 238, 13);
border-radius: 0;
border: 0;
margin: 0;
padding: 0;
}
#collapsibleNavbar {
background-color: rgb(229, 243, 192);
text-align: center;
}
.navbar-nav li a {
color: black;
border-style: solid;
border-width: 1px;
}
.navbar-brand {
color: black;
padding: 15px;
}
h5{
margin-bottom: 15px;
padding-top: 7px;
}
h2{
font-size: 175%;
margin-bottom: 30px;
margin-top: 20px;
}
.paraf{
background-color: #e6ee9c;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module 3</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light">
<a id="get-back" class="navbar-brand" href="#">Food, LLC</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="d-lg-none d-md-none navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#chicken">Chicken</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#beef">Beef</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sushi">Sushi</a>
</li>
</ul>
</div>
</nav>
</header>
<h2 class="text-center"> Our Menu </h2>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 col-12 paraf mx-auto">
<h5 class="text-center" id="chicken">Chicken</h5>
<p>Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi,
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros.
Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi,
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros. <br> (End of Chicken section) Back to Top</p></div>
<div class="col-lg-4 col-md-6 col-sm-12 col-12 paraf mx-auto">
<h5 class="text-center" id="beef">Beef</h5>
<p>Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi,
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros.
Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi,
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros.<br>(End of Beef section) Back to Top</p></div>
<div class="col-lg-4 col-md-12 col-sm-12 col-12 paraf mx-auto">
<h5 class="text-center" id="sushi">Sushi</h5>
<p>Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi,
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros.
Lorem ipsum dolor sit amet, consectetur felis ut venenatis tortor, nulla fringilla commodo eget ullamcorper
viverra nulla. Quis donec ultricies, in non eget ultricies ut wisi pede. Eget faucibus ligula lacinia, ligula risus quasi,
vestibulum amet mattis mi sit egestas, a velit integer, feugiat lectus et. Ullamcorper ut lobortis est, consequat magnis,
donec lorem posuere sit ridiculus lacinia augue, morbi magna velit pellentesque a vestibulum arcu, in facilisi ultricies
dolor eu dolor quis. Nec eu libero, fermentum sagittis augue wisi wisi adipiscing. Est risus dapibus cursus, praesent
vivamus mattis est, ac euismod quis. Primis diam enim tortor fermentum, varius pede officia pellentesque nibh quam
blandit, accumsan vestibulum interdum vivamus, iaculis wisi lacus sodales facilisi. Molestie accusantium, sed nisl
ratione eu euismod nulla ac, morbi aliquet. Lacus egestas. Purus sem fusce et id nibh mauris, luctus magnis diam morbi
enim, nunc iste, laoreet commodo in tortor lobortis. Congue suspendisse pellentesque eget, nibh pulvinar dolor donec
hac, quis diam at vehicula suspendisse. Eget commodo libero, tortor integer, nec integer, mauris eget iaculis nec
imperdiet dolor eros.<br>(End of Sushi section) Back to Top</p></div>
</div>
</div>
</body>
</html>
Can you suggest how to fix this and get margins between the columns.
You can use the col-lg-4 while using padding so it would look like they're separated and come out as:
<div class="col-lg-4 px-1 (other classes...)">
</div>
<div class="col-lg-4 px-1 (other classes...)">
</div>
<div class="col-lg-4 px-1 (other classes...)">
</div>
Just add mt-2 and mb-2 in your class col-md-3.
<div class="col-lg-4">
<div class="col-lg-12">
your content 1
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12">
your content 2
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12">
your content 3
</div>
</div>
so just add col-lg-12 in col-lg-4
Related
I'm trying to create a carousel slider with css, atm works fine on chrome/firefox/IE, it looks something like this:
Now I want the slider displays full on the screen since it's inside a container, so I added a trick to acomplish that:
margin-left:-2000px;
margin-right:-2000px;
padding-left:2000px;
padding-right:2000px;
background-color: #e2e7fe;
And ended looking something like that:
That works fine on chrome, but on firefox and IE can't fully scroll the content. Is there a better solution that applying negative margins and paddings or fix that issue somehow?
EDIT: I need the slider inside the container since this is an example from my real website where I have more sliders inside the web and not just one on top
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
body {
overflow-x: hidden;
background-color: #f0f0e8;
}
.container {
background-color: #e2e7fe;
}
.slider {
white-space: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
margin-left:-2000px;
margin-right:-2000px;
padding-left:2000px;
padding-right:2000px;
background-color: #e2e7fe;
}
.slide {
display: inline-block;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<ul class="slider">
<li class="slide"><img src="https://picsum.photos/id/1068/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/189/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/996/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/603/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/933/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/32/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/21/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/22/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/23/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/24/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/25/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/26/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/27/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/28/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/29/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/30/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/31/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/39/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/33/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/34/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/35/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/36/200/200"></li>
<li class="slide"><img src="https://picsum.photos/id/37/200/200"></li>
<li class="slide"><img src="http://picsum.photos/id/38/200/200"></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<h1>Some content</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet purus gravida quis blandit turpis cursus in hac habitasse. Risus at ultrices mi tempus imperdiet nulla malesuada. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in. Vel pharetra vel turpis nunc eget lorem. Nulla pellentesque dignissim enim sit amet venenatis urna. Tincidunt eget nullam non nisi est sit amet facilisis. Ullamcorper sit amet risus nullam eget felis. Faucibus a pellentesque sit amet. Consectetur lorem donec massa sapien faucibus. Vitae suscipit tellus mauris a diam maecenas sed enim ut. Id velit ut tortor pretium viverra suspendisse potenti. Mi sit amet mauris commodo quis imperdiet. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. A lacus vestibulum sed arcu. Sed libero enim sed faucibus turpis in eu mi. Aenean et tortor at risus viverra. Varius morbi enim nunc faucibus a pellentesque. Egestas sed sed risus pretium quam vulputate dignissim suspendisse.
</p>
<p>
Malesuada fames ac turpis egestas maecenas pharetra convallis. Sed cras ornare arcu dui vivamus arcu felis bibendum ut. Enim facilisis gravida neque convallis a cras semper auctor neque. Eu scelerisque felis imperdiet proin. Mi sit amet mauris commodo quis imperdiet massa. Neque sodales ut etiam sit amet nisl purus in mollis. Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus. Sem fringilla ut morbi tincidunt augue interdum. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Sociis natoque penatibus et magnis. Dignissim convallis aenean et tortor at risus viverra. Feugiat in fermentum posuere urna. Faucibus scelerisque eleifend donec pretium vulputate sapien. Dolor purus non enim praesent elementum. Erat nam at lectus urna duis convallis convallis. Platea dictumst quisque sagittis purus. Ligula ullamcorper malesuada proin libero nunc consequat. Tortor condimentum lacinia quis vel eros donec ac odio tempor.
</p>
<p>
Tristique senectus et netus et malesuada fames ac. Congue nisi vitae suscipit tellus. Interdum consectetur libero id faucibus nisl tincidunt. Mauris vitae ultricies leo integer. Eros in cursus turpis massa tincidunt dui ut ornare lectus. In aliquam sem fringilla ut morbi tincidunt augue interdum velit. Pretium viverra suspendisse potenti nullam ac. Eu nisl nunc mi ipsum faucibus vitae aliquet. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Enim ut sem viverra aliquet eget sit. Dolor sit amet consectetur adipiscing. Amet nulla facilisi morbi tempus. Vulputate dignissim suspendisse in est ante in. Lectus urna duis convallis convallis tellus id. Vitae semper quis lectus nulla at volutpat diam ut. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Pretium quam vulputate dignissim suspendisse in est ante. Ac placerat vestibulum lectus mauris. Feugiat pretium nibh ipsum consequat nisl vel pretium lectus quam.
</p>
<p>
Dui id ornare arcu odio. Sed id semper risus in. Amet consectetur adipiscing elit ut aliquam purus sit amet luctus. Est ullamcorper eget nulla facilisi etiam dignissim. Nibh praesent tristique magna sit amet. Turpis egestas pretium aenean pharetra. Maecenas accumsan lacus vel facilisis volutpat. A cras semper auctor neque vitae tempus quam. Ultricies mi eget mauris pharetra et ultrices neque. Enim praesent elementum facilisis leo vel fringilla. Dolor magna eget est lorem ipsum. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Ut tristique et egestas quis. Id cursus metus aliquam eleifend mi in. Rhoncus dolor purus non enim praesent elementum facilisis leo. Sed lectus vestibulum mattis ullamcorper. Senectus et netus et malesuada fames ac turpis. Vestibulum sed arcu non odio euismod. Sagittis id consectetur purus ut faucibus pulvinar elementum.
</p>
<p>
Eget mauris pharetra et ultrices neque ornare. Non sodales neque sodales ut etiam sit amet nisl. Enim ut tellus elementum sagittis vitae et leo duis ut. Augue lacus viverra vitae congue eu consequat. Purus semper eget duis at tellus at. Sed egestas egestas fringilla phasellus faucibus. Libero volutpat sed cras ornare. Venenatis lectus magna fringilla urna porttitor rhoncus. Dolor magna eget est lorem. Sed blandit libero volutpat sed cras ornare. Id cursus metus aliquam eleifend mi in nulla posuere.
</p>
<p>
Velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Ante in nibh mauris cursus mattis molestie. Sed elementum tempus egestas sed. Donec adipiscing tristique risus nec feugiat in fermentum posuere. Vitae semper quis lectus nulla at volutpat. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Sed libero enim sed faucibus turpis in. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Senectus et netus et malesuada fames ac. Dui vivamus arcu felis bibendum ut tristique et. Gravida quis blandit turpis cursus in hac habitasse platea. Viverra accumsan in nisl nisi. Vel risus commodo viverra maecenas accumsan lacus vel. Scelerisque eleifend donec pretium vulputate sapien.
</p>
<p>
Turpis egestas sed tempus urna. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Magna ac placerat vestibulum lectus mauris. Lorem ipsum dolor sit amet consectetur adipiscing elit. Consequat id porta nibh venenatis cras sed. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Diam quam nulla porttitor massa id neque. Justo eget magna fermentum iaculis eu non diam. Fermentum iaculis eu non diam phasellus. Aliquam ultrices sagittis orci a scelerisque purus semper. Sit amet nisl purus in mollis nunc sed id. Id aliquet risus feugiat in ante metus dictum at tempor. Quisque id diam vel quam elementum pulvinar etiam. Aliquet eget sit amet tellus cras adipiscing enim eu turpis. Venenatis a condimentum vitae sapien. Viverra adipiscing at in tellus integer feugiat scelerisque.
</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Since you don't want to take out the carousel slider div to be out of the container class. There is a fix for that too. I have used viewport width(vw) for it and then calculate it in the right way that the carousel will fit on full screen.
CSS:-
.slider {
white-space: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
margin: 0;
padding: 0;
background-color: #e2e7fe;
width: calc(100vw);
position: relative;
left: 34.5em;
transform: translateX(-50%);
}
But please note that my fix will work only in large screens only (lg) termed in bootstrap. For medium(md), small(sm), and extra small(xs) screens, you have to calculate by yourself with same calculation I used for lg. Just you have to set media query for different resolutions for left position.
Working Fiddle:- https://jsfiddle.net/szreLuwn/2/
Hope, it fulfills your requirement.
Thanks
This question already has answers here:
Bootstrap 4 how to have margin between columns without going over space
(2 answers)
Closed 3 years ago.
I have been building a webpage for a class and we are using Bootstrap 4.
Thing is, every time I add a margin to one of my elements with the .col-*-4 class it pushes down my third element and I have no idea how to fix this.
I have tried using flexbox, but that just completely messes up the layout of my section. I have tried using absolute positioning but it is just a complete hassle and I have no idea how to fix this. I don't know if I have the wrong keywords because I can't find anyone who has had this exact problem.
I have already tried to use the flexbox portion of bootstrap, but it completely screws up the layout that I intend to have, and I have tried using absolute positioning but it's a hassle to deal with and I know that there is a simpler way. I just can't figure it out.
/*Main Content*/
#menuTitle {
padding: 25px;
font-size: 2.5em;
font-weight: bold;
color: #000;
}
#chickenHeading,
#beefHeading,
#sushiHeading {
padding: 10px;
width: 200px;
}
#chicken,
#beef,
#sushi {
border-radius: 6px;
position: relative;
overflow: hidden;
}
#chickenBacktoTop,
#beefBacktoTop,
#sushiBacktoTop {
position: absolute;
bottom: 0;
right: 0;
border-radius: 6px;
}
h1 {
font-weight: 800;
}
p {
color: #A9A9;
}
/*Extra Large, Large, and Medium Devices*/
#media (min-width: 768px) {
#chicken,
#beef,
#sushi {
margin: 15px;
}
}
/*Extra Small and Small Devices*/
#media (max-width: 767px) {
#chicken,
#beef,
#sushi {
margin: 10px auto;
height: 650px;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!--Main Content-->
<div class='container-fluid mx-auto'>
<div id='menuTitle' class='text-center'>Our Menu</div>
<div class='row d-flex mx-auto'>
<!--Chicken Section-->
<section id='chicken' class='bg-dark col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<h3 id='chickenHeading' class='d-flex mx-auto justify-content-center'>Chicken</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit vestibulum.
Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper nisi. Etiam
iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit condimentum.
Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum neque arcu,
nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis nulla nunc quis
dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl, sagittis ut est
quis, viverra venenatis tortor.
</p>
<a id='chickenBacktoTop' class='btn btn-primary d-block d-md-none' href='#header-nav'>Back to Top</a>
</section>
<!--Beef Section-->
<section id='beef' class='bg-dark col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<h3 id='beefHeading' class='d-flex mx-auto justify-content-center'>Beef</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit vestibulum.
Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper nisi. Etiam
iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit condimentum.
Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum neque arcu,
nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis nulla nunc quis
dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl, sagittis ut est
quis, viverra venenatis tortor.
</p>
<a id='beefBacktoTop' class='btn btn-primary d-block d-md-none' href='#header-nav'>Back to Top</a>
</section>
<!--Sushi Section-->
<section id='sushi' class='bg-dark col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<h3 id='sushiHeading' class='d-flex mx-auto justify-content-center'>Sushi</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit vestibulum.
Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper nisi. Etiam
iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit condimentum.
Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum neque arcu,
nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis nulla nunc quis
dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl, sagittis ut est
quis, viverra venenatis tortor.
</p>
<a id='sushiBacktoTop' class='btn btn-primary d-block' href='#header-nav'>Back to Top</a>
</section>
</div>
</div>
Margins increase column width, which causes them not to fit on the same line and to wrap.
However, Bootstrap columns have gutters (padding) by default.
Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
Bootstrap 4.0 Layout Grid - How It Works
I recommend wrapping the contents of each column in a containing <div> and styling that element as desired (e.g. padding, background color, etc).
For example:
<section class='col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<div id='chicken' class='bg-dark'>
...
</div>
</section>
Here's a demonstration:
/*Main Content*/
#menuTitle {
padding: 25px;
font-size: 2.5em;
font-weight: bold;
color: #000;
}
.secContents {
position: relative;
border-radius: 6px;
padding: 0 15px;
}
.secHeading {
padding: 10px;
}
.secBackTop {
position: absolute;
bottom: 0;
right: 0;
border-radius: 6px;
}
h1 {
font-weight: 800;
}
p {
color: #A9A9;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<!--Main Content-->
<div class='container-fluid mx-auto'>
<div id='menuTitle' class='text-center'>Our Menu</div>
<div class='row d-flex mx-auto'>
<!--Chicken Section-->
<section class='col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<div class='secContents bg-dark'>
<h3 class='secHeading d-flex mx-auto justify-content-center'>Chicken</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit
vestibulum. Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper
nisi. Etiam iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit
condimentum. Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum
neque arcu, nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis
nulla nunc quis dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl,
sagittis ut est quis, viverra venenatis tortor.
</p>
<a class='secBackTop btn btn-primary d-block d-md-none' href='#header-nav'>Back to Top</a>
</div>
</section>
<!--Beef Section-->
<section class='col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<div class='secContents bg-dark'>
<h3 class='secHeading d-flex mx-auto justify-content-center'>Beef</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit
vestibulum. Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper
nisi. Etiam iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit
condimentum. Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum
neque arcu, nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis
nulla nunc quis dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl,
sagittis ut est quis, viverra venenatis tortor.
</p>
<a class='secBackTop btn btn-primary d-block d-md-none' href='#header-nav'>Back to Top</a>
</div>
</section>
<!--Sushi Section-->
<section class='col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4'>
<div class='secContents bg-dark'>
<h3 class='secHeading d-flex mx-auto justify-content-center'>Sushi</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue lacus in luctus eleifend. Curabitur varius dictum lorem vel posuere. Curabitur blandit congue ante, eu dictum nisl rhoncus sit amet. Aenean cursus lorem at turpis consectetur faucibus.
Sed ultrices vehicula odio, eu laoreet neque suscipit quis. Aliquam sit amet lectus aliquam, suscipit massa id, pharetra ex. Nulla nisi nunc, posuere eget dignissim eget, malesuada sollicitudin libero. Quisque scelerisque porttitor ultricies.
Sed eget ex sed ante euismod malesuada eget fringilla arcu. Aenean egestas tincidunt gravida. Praesent non mattis nibh. Cras aliquet efficitur ex, non imperdiet felis feugiat ac. Aenean sagittis justo sit amet enim congue, nec finibus velit
vestibulum. Cras eros ante, tincidunt facilisis euismod sit amet, interdum ac diam. Suspendisse facilisis hendrerit sapien non ornare. Nullam nec magna nunc. Aliquam nisi magna, vehicula eu tellus eget, aliquam dignissim erat. Ut ut ullamcorper
nisi. Etiam iaculis fringilla lectus id pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eu tincidunt risus. Sed eu bibendum leo, vitae convallis elit. Donec feugiat tellus a velit suscipit
condimentum. Sed ut augue sagittis, facilisis mauris at, fermentum turpis. Duis dictum libero id dolor porttitor porttitor. Quisque tempor orci eu purus mollis, id semper tortor fringilla. Aliquam auctor pretium turpis at sodales. Morbi dictum
neque arcu, nec fringilla velit porttitor ac. Cras tristique vestibulum dolor, id cursus tortor ullamcorper sit amet. Nullam varius imperdiet risus vel volutpat. Aenean dapibus, urna sed lacinia suscipit, enim ligula bibendum orci, non mattis
nulla nunc quis dolor. Nunc neque ante, tristique vulputate mi et, finibus commodo urna. Integer faucibus in nisi consequat auctor. Aliquam quis odio eget lorem tempus pellentesque. Nam scelerisque viverra neque et ullamcorper. In ipsum nisl,
sagittis ut est quis, viverra venenatis tortor.
</p>
<a class='secBackTop btn btn-primary d-block' href='#header-nav'>Back to Top</a>
</div>
</section>
</div>
</div>
Ok. I am trying to achieve a "Medium.com style" image alignment, making it larger than it's container and full width. I did what I knew I had to do with the CSS:
img {
position: relative;
left: 50%;
height: auto;
margin: 0px 0 0 -50vw;
width: 100vw;
max-width: 100vw;
}
It almost do what I want it to do, except that, when I use all the 12 grids of Bootstrap, for some reason, it adds a border on the left, as you can see in this fiddle: https://jsfiddle.net/35f4ntqq/
If I change the col-sm-11 to col-sm-10 (making it 11 cols in total), though, it works perfectly fine.
What am I missing here? Or doing wrong...? :/
I think you can changies margin property for img tag:
Like this:
img {
position: relative;
left: 52%;
height: auto !important;
margin: 0px 0 0 -55vw;
width: 100vw;
max-width: 100vw !important;
height: auto !important;
}
See Updated Bootply
You can use container-fluid to achieve the desired result.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
img {
height: auto;
width: 100%;
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-1">
Boo
</div>
<div class="col-sm-11">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ligula nec erat dapibus ullamcorper. Aliquam egestas, justo nec dictum vestibulum, dui eros ullamcorper mauris, non facilisis lorem ligula ut ex. Mauris scelerisque libero nulla, eget luctus velit fringilla ut. Etiam ut magna eget elit gravida ultrices. Quisque a enim id leo tincidunt lobortis. Pellentesque nulla mi, aliquet non mauris et, aliquam egestas leo. Nulla convallis tincidunt gravida. Suspendisse aliquam lacinia eros sit amet pretium. Nam eu ipsum sit amet velit suscipit consectetur vel sit amet dolor. Sed ac aliquam est, dictum gravida est. Donec pellentesque condimentum est at bibendum. Aliquam erat volutpat. Nulla id urna non mauris faucibus fermentum. Phasellus quam ante, bibendum eget orci a, aliquam fringilla tortor. In vitae nulla nec leo tincidunt convallis. Integer ac ipsum a lorem sagittis pretium tincidunt id erat.</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<img src="http://www.lpzoo.org/sites/default/files/images/multimedia/kapukikingnosetonose1200.jpg">
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-11">
<p>Duis maximus est nec eros euismod, quis volutpat magna pellentesque. Maecenas orci sapien, gravida quis commodo a, pharetra at sapien. Etiam scelerisque nunc sit amet ligula volutpat convallis. Nam egestas commodo tortor at pellentesque. Pellentesque vitae dictum urna. Etiam tincidunt magna et aliquam tincidunt. Vestibulum blandit arcu a pulvinar auctor. Phasellus malesuada, tortor sit amet mollis pulvinar, felis felis lacinia tellus, tempus ultricies urna magna et augue. Fusce ut ipsum eget odio sodales viverra. Morbi sit amet hendrerit purus, sit amet porttitor sapien. Quisque ut quam eu erat elementum lobortis. Proin sit amet nisl eget est feugiat vulputate. Morbi eu orci semper, rhoncus lacus eget, fringilla lorem.</p>
</div>
</div>
</div>
https://jsfiddle.net/glebkema/pn8jbk8p/
try this.
"medium.com style"
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-1">
Boo
</div>
<div class="col-xs-11">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed ligula nec erat dapibus ullamcorper. Aliquam egestas, justo nec dictum vestibulum, dui eros ullamcorper mauris, non facilisis lorem ligula ut ex. Mauris scelerisque libero nulla, eget luctus velit fringilla ut. Etiam ut magna eget elit gravida ultrices. Quisque a enim id leo tincidunt lobortis. Pellentesque nulla mi, aliquet non mauris et, aliquam egestas leo. Nulla convallis tincidunt gravida. Suspendisse aliquam lacinia eros sit amet pretium. Nam eu ipsum sit amet velit suscipit consectetur vel sit amet dolor. Sed ac aliquam est, dictum gravida est. Donec pellentesque condimentum est at bibendum. Aliquam erat volutpat. Nulla id urna non mauris faucibus fermentum. Phasellus quam ante, bibendum eget orci a, aliquam fringilla tortor. In vitae nulla nec leo tincidunt convallis. Integer ac ipsum a lorem sagittis pretium tincidunt id erat.</p>
</div>
<div class="col-sm-12">
<img class="img-responsive" src="http://www.lpzoo.org/sites/default/files/images/multimedia/kapukikingnosetonose1200.jpg">
</div>
<div class="col-sm-12">
<p>Duis maximus est nec eros euismod, quis volutpat magna pellentesque. Maecenas orci sapien, gravida quis commodo a, pharetra at sapien. Etiam scelerisque nunc sit amet ligula volutpat convallis. Nam egestas commodo tortor at pellentesque. Pellentesque vitae dictum urna. Etiam tincidunt magna et aliquam tincidunt. Vestibulum blandit arcu a pulvinar auctor. Phasellus malesuada, tortor sit amet mollis pulvinar, felis felis lacinia tellus, tempus ultricies urna magna et augue. Fusce ut ipsum eget odio sodales viverra. Morbi sit amet hendrerit purus, sit amet porttitor sapien. Quisque ut quam eu erat elementum lobortis. Proin sit amet nisl eget est feugiat vulputate. Morbi eu orci semper, rhoncus lacus eget, fringilla lorem.</p>
</div>
</div>
</div>
I have been trying to keep my footer at the bottom of the page using CSS.
Please explain in simpler terms as I am new to HTML, CSS and BootStrap.
HTML:
<div id="footer-bottom">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="widget widget-text">
<div class="copyright">
<p class="last">
2015. AVENTIS. ALL RIGHTS RESERVED
</p>
</div>
</div><!-- widget-text -->
</div><!-- col -->
<div class="col-sm-6">
<div class="widget widget-social">
<div class="social-media">
<a class="facebook" href="#"><i class="fa fa-facebook"></i></a>
<a class="twitter" href="#"><i class="fa fa-twitter"></i></a>
<a class="google" href="#"><i class="fa fa-google-plus"></i></a>
<a class="pinterest" href="#"><i class="fa fa-pinterest"></i></a>
</div><!-- social-media -->
</div><!-- widget-social -->
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</div>
CSS:
#footer-bottom {
padding: 30px 0;
background-color: #084C8D;
color: #FFFFFF;
position:absolute;
width: 100%;
height:100px;
bottom:0;
left:0;
}
the footer is currently stuck between my content and not at the bottom of the webpage.
html,
body {
padding: 0;
}
#footer-bottom {
padding: 30px 0;
background-color: #084C8D;
color: #FFFFFF;
position: relative;
width: 100%;
height: 100px;
margin: 0;
}
<html>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet
vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper
sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis
quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est. Vivamus fermentum semper porta. Nunc
diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat,
arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis
pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis
nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui. Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis
neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum
vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque
nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis.
Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo
laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur
ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet.
Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies.
Mauris vitae nisi at sem facilisis semper ac in est. Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis,
nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue
vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce
venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit.
Nam sagittis nisi dui. Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque. Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum
ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales
ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel
elementum mi. Phasellus non ullamcorper urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin
quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hendrerit ut. Sed non tortor sodales quam auctor elementum. Donec
hendrerit nunc eget elit pharetra pulvinar. Suspendisse id tempus tortor. Aenean luctus, elit commodo laoreet commodo, justo nisi consequat massa, sed vulputate quam urna quis eros. Donec vel.</p>
<div id="footer-bottom">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="widget widget-text">
<div class="copyright">
<p class="last">
2015. AVENTIS. ALL RIGHTS RESERVED
</p>
</div>
</div>
<!-- widget-text -->
</div>
<!-- col -->
<div class="col-sm-6">
<div class="widget widget-social">
<div class="social-media">
<a class="facebook" href="#"><i class="fa fa-facebook"></i></a>
<a class="twitter" href="#"><i class="fa fa-twitter"></i></a>
<a class="google" href="#"><i class="fa fa-google-plus"></i></a>
<a class="pinterest" href="#"><i class="fa fa-pinterest"></i></a>
</div>
<!-- social-media -->
</div>
<!-- widget-social -->
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
</div>
</body>
</html>
In your css, change Position: absolute; to Position: Fixed;
What I want to do is to create two fixed navigation elements (each on the opposite side of the page). I did that, but the problem is; it is not responsive. When I zoom-in or zoom-out, elements mix together.
How can I fix it? Here is the code I have tried so far:
.docTheme {
margin-top: 20px;
padding-left: 0;
margin-left: 10px;
}
.leftNav { /* add rounded corner */
position: fixed;
}
.rightNav {
position: fixed;
right: 0;
}
.mainContent {
display: block;
margin-left: 320px;
width: 65%;
}
<!-- Content -->
<div class="container-fluid docTheme" role="main">
<div class="row">
<div class="col-sm-3 leftNav">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
</div>
</div>
<div class="col-sm-7 mainContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi, lobortis eget aliquet vitae, ultrices et metus. Praesent quis aliquet turpis. Nam elementum lacinia purus vel consequat. Nullam at est ante. Vestibulum quis mauris ac sem facilisis egestas. Proin in posuere nunc. In elit justo, cursus eget eleifend a, sagittis ac quam. Quisque quis justo accumsan, commodo nulla nec, tempor nulla. Ut tristique imperdiet enim sed pretium. Vestibulum sit amet bibendum turpis. Nam mollis commodo elit, vitae egestas nisi. Nam ligula elit, gravida quis feugiat vel, congue at tellus. Cras efficitur consectetur enim non porta. Pellentesque ut luctus dolo
Nam feugiat purus eu velit condimentum rhoncus. Proin pulvinar volutpat diam, id porta erat pharetra at. Mauris hendrerit nulla enim, et tempus urna placerat vitae. Integer ut ipsum tincidunt, sodales quam vitae, varius massa. Sed rhoncus arcu mi, in faucibus risus dictum vel. Cras id sollicitudin magna, quis tempor mi. In ultrices gravida quam, in scelerisque diam volutpat ac. Duis hendrerit tempus dui, viverra euismod purus mattis eu.
Aenean et mi in nisi pellentesque porttitor pellentesque nec felis. In hac habitasse platea dictumst. Integer euismod mollis metus, nec fermentum ligula suscipit id. Nunc vitae gravida magna. Sed ut urna nunc. Fusce eget fringilla nulla, sed congue odio. Cras bibendum nisi est, quis scelerisque nisl laoreet non. Curabitur mi nibh, hendrerit eu dolor sit amet, egestas convallis nibh. Nam ultricies elit ut tincidunt congue. Aliquam ac dui vel arcu condimentum pharetra. Phasellus porta, sem sed tempus aliquam, urna nisl posuere sem, non auctor nibh risus faucibus turpis. Integer sit amet cursus lectus. Nam hendrerit, nisl sed fringilla volutpat, leo neque fringilla magna, a maximus metus mauris nec urna. Duis nulla dui, dignissim at felis id, tristique laoreet nibh. Pellentesque convallis neque a purus convallis lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi, lobortis eget aliquet vitae, ultrices et metus. Praesent quis aliquet turpis. Nam elementum lacinia purus vel consequat. Nullam at est ante. Vestibulum quis mauris ac sem facilisis egestas. Proin in posuere nunc. In elit justo, cursus eget eleifend a, sagittis ac quam. Quisque quis justo accumsan, commodo nulla nec, tempor nulla. Ut tristique imperdiet enim sed pretium. Vestibulum sit amet bibendum turpis. Nam mollis commodo elit, vitae egestas nisi. Nam ligula elit, gravida quis feugiat vel, congue at tellus. Cras efficitur consectetur enim non porta. Pellentesque ut luctus dolor.
</div>
<div class="col-sm-2 rightNav">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
In this chapter
In this chapter
In this chapter
In this chapterros
</div>
</div>
</div>
</div> <!-- /container -->
Thanks.
I think you need one like this
.docTheme {
margin-top: 20px;
padding-left: 0;
margin-left: 10px;
}
.leftNav {
/* add rounded corner */
position: fixed;
top: 0;
left: 0;
width: 33%;
}
.rightNav {
position: fixed;
right: 0;
top: 0;
width: 33%;
}
.mainContent {
display: block;
margin-left: 33%;
width: 33%;
}
<!-- Content -->
<div class="container-fluid docTheme" role="main">
<div class="row">
<div class="col-sm-3 leftNav">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
</div>
</div>
<div class="col-sm-7 mainContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi, lobortis eget aliquet vitae, ultrices et metus. Praesent quis aliquet turpis. Nam elementum lacinia purus vel consequat.
Nullam at est ante. Vestibulum quis mauris ac sem facilisis egestas. Proin in posuere nunc. In elit justo, cursus eget eleifend a, sagittis ac quam. Quisque quis justo accumsan, commodo nulla nec, tempor nulla. Ut tristique imperdiet enim sed pretium.
Vestibulum sit amet bibendum turpis. Nam mollis commodo elit, vitae egestas nisi. Nam ligula elit, gravida quis feugiat vel, congue at tellus. Cras efficitur consectetur enim non porta. Pellentesque ut luctus dolo Nam feugiat purus eu velit condimentum
rhoncus. Proin pulvinar volutpat diam, id porta erat pharetra at. Mauris hendrerit nulla enim, et tempus urna placerat vitae. Integer ut ipsum tincidunt, sodales quam vitae, varius massa. Sed rhoncus arcu mi, in faucibus risus dictum vel. Cras id
sollicitudin magna, quis tempor mi. In ultrices gravida quam, in scelerisque diam volutpat ac. Duis hendrerit tempus dui, viverra euismod purus mattis eu. Aenean et mi in nisi pellentesque porttitor pellentesque nec felis. In hac habitasse platea
dictumst. Integer euismod mollis metus, nec fermentum ligula suscipit id. Nunc vitae gravida magna. Sed ut urna nunc. Fusce eget fringilla nulla, sed congue odio. Cras bibendum nisi est, quis scelerisque nisl laoreet non. Curabitur mi nibh, hendrerit
eu dolor sit amet, egestas convallis nibh. Nam ultricies elit ut tincidunt congue. Aliquam ac dui vel arcu condimentum pharetra. Phasellus porta, sem sed tempus aliquam, urna nisl posuere sem, non auctor nibh risus faucibus turpis. Integer sit amet
cursus lectus. Nam hendrerit, nisl sed fringilla volutpat, leo neque fringilla magna, a maximus metus mauris nec urna. Duis nulla dui, dignissim at felis id, tristique laoreet nibh. Pellentesque convallis neque a purus convallis lobortis. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu ante molestie dui vehicula finibus ac eget ante. Aliquam lacus mi, lobortis eget aliquet vitae, ultrices et metus. Praesent quis aliquet turpis. Nam elementum lacinia purus vel consequat.
Nullam at est ante. Vestibulum quis mauris ac sem facilisis egestas. Proin in posuere nunc. In elit justo, cursus eget eleifend a, sagittis ac quam. Quisque quis justo accumsan, commodo nulla nec, tempor nulla. Ut tristique imperdiet enim sed pretium.
Vestibulum sit amet bibendum turpis. Nam mollis commodo elit, vitae egestas nisi. Nam ligula elit, gravida quis feugiat vel, congue at tellus. Cras efficitur consectetur enim non porta. Pellentesque ut luctus dolor.
</div>
<div class="col-sm-2 rightNav">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
In this chapter
In this chapter
In this chapter
In this chapterros
</div>
</div>
</div>
</div>
<!-- /container -->