I am having an issue with bootstrap's justify-content-between. I have 2 divs inside a container and I want to position them at the extreme ends of the container. So I am using justify-content-between, but it is evenly distributing the space between the 2 divs, which I don't want. I want no space at the start i.e. extreme left and end i.e. extreme right. If I know correctly then justify-content-between should accumulate the space in the middle and place the divs at the extreme end.
the code is:
<div class="container flex flex-wrap justify-content-between">
<div class="block col-md-6">
<h2>Hello World</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="block col-md-5">
<h2>Hello World</h2>
</div>
</div>
It is looking like this now: (Notice the space marked by the violet region on the browser)
I am using Brave browser.
Kindly, please help me out. I don't know how to solve this issue. Any help would be appreciated. Thank you.
Here is the working example
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div style="display: flex;" class="container-fluid flex flex-wrap justify-content-between">
<div class="block col-md-6">
<h2>Hello World</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="block col-md-5">
<h2>Hello World</h2>
</div>
</div>
</body>
</html>
Using a container div and applying justify-content-between to the row pushes the two columns to the left and right, leaving a single-column space in the middle (it’s a single column space because your left column is 6 columns wide and your right columns is 5 columns wide).
Using a container-fluid div and applying justify-content-between to the row makes the row go full width and pushes the two columns to the left and right, leaving a single-column space in the middle.
I like using the row div in a Bootstrap layout inside the container div as that’s the way Bootstrap is setup to work.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-5">
<div class="row justify-content-between bg-success">
<div class="block col-md-6 bg-info pt-5">
<h2>Hello World</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="block col-md-5 bg-info pt-5">
<h2>Hello World</h2>
</div>
</div>
</div>
<div class="container-fluid mt-5">
<div class="row justify-content-between bg-success">
<div class="block col-md-6 bg-info pt-5">
<h2>Hello World</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="block col-md-5 bg-info pt-5">
<h2>Hello World</h2>
</div>
</div>
</div>
Your question used col-md-5 and col-md-6, so for smaller screens, the display goes to col-12. I used the same column sizing in my answer.
One note about using Stackoverflow – you added a comment on May 14 a little while after I posted my comment, but since you didn’t include #Rich, Stackoverflow didn’t let me know you had posted a comment. Only the original poster gets notified for all comments and posts – the rest of us are only included if you specifically include a reference to our name (or if the comment follows an answer that we posted).
I have added 2 child divs in parent div and applied css and its working fine.
Try adding css style as below:
Regards,
Nisha Patel
Related
I have a fixed-top navbar created with bootstrap library. I have padded the body from top to avoid hiding the content under it. But when i click on a link "about us" for example, the top of that will hide under the navbar. Is there anyway to fix it so that the content of about us is just below the navbar when link is clicked?
body{
padding: 3em 0;
}
<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">
<nav class="navbar bg-dark navbar-light fixed-top">
<div class="container-fluid">
About Us
</div>
</nav>
<div class="content">
<div id="about-us">
<h1>About Us</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<div>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
Use
#about-us {
padding: 3em 0;
}
instead
body {
padding: 3em 0;
}
Here is one potential solution that also adds the "smooth scroll" feature, while at the same time solving your problem.
The secret here is to use jQuery .animate() method, along with an offset, to slide the page to the desired section (less the offset value). So, you need:
A class name, any class name
Add that class name to the menu links (Note that the menu links must be anchor tags, for this particular code example)
Use the jQuery code in the below demo that watches for clicks on elements with that className, and then uses jQuery animate to schlep down to the section with the ID that corresponds to the href attribute. The magic that solves your problem is the offset.
Instead of $('a.jtkirk') as your selection/trigger, you might also be able to use $('a[href^=#]') (which says: for all a-tags with an href that begins with the # char) -- but that does not work with StackOverflow's stack snippets, so I cannot test/demo it. But there is no harm using a class to identify the smooth-scroll links. Again, you can choose any name for the class, I used Capt Kirk's moniker to make it easy to see that.
DEMO:
$('a.jtkirk').click(function(e){
e.preventDefault();
var kirkoffset = 50;
$('html,body').animate({
scrollTop: $(this.hash).offset().top - kirkoffset
}, 700);
});
body{
padding: 3em 0;
}
/* Below not necessary - only for demo layout */
nav .scroll{
display:flex;
justify-content:flex-start !important;
}
nav .scroll a {margin-right:15px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<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">
<nav class="navbar bg-dark navbar-light fixed-top scroll">
<div class="container-fluid scroll">
<a class="jtkirk" href="#about-us">About Us</a>
<a class="jtkirk" href="#nuther-one">Nuther One</a>
</div>
</nav>
<div class="content">
<div id="about-us">
<h1>About Us</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
<div>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
<div id="nuther-one">
<h1>Nuther One</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
You could use the :target selector with a :before element with the height of your navbar.
body {
padding: 3em 0;
}
:target::before {
display: block;
height: 40px;
margin-top: -40px;
content: '';
}
<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">
<nav class="navbar bg-dark navbar-light fixed-top">
<div class="container-fluid">
About Us
</div>
</nav>
<div class="content">
<div id="another">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<div id="about-us">
<h1>About Us</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<div>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
So right now I have a block of text and images to the right. It looks fine on my PC, but on mobile the images go off the screen and I have to scroll to the right to see all of it. Is there a way to fix this?
PC view (Blacked out text and image for personal reasons):
Mobile View:
As you can see the images go off the the grey background.
Here's what my code currently looks like:
<div id="mainContent">
<div id="images" style="width:20%;float:right;margin:0;padding:0;">
<img alt="Camp1" src="../images/aA0Va8WQ.jpeg" width="320" height="428" title="Camp1">
<img alt="Camp2" src="../images/37679145_1817909031657489_8733839330973319168_n.jpg" title="Camp2">
<img alt="Camp3" src="../images/19428929_122721344992456_2874273194875813888_n.jpg" title="Camp3">
</div>
<div id="mainText" style="width:80%;">
<p>Enter text here.</p>
</div>
</div>
Also as a preference I would prefer it so the block of code for the images goes under the text but it's not necessary, it's currently above as I couldn't get this to work otherwise.
Also I'm using the style tags for now before I fix it properly then I will add it to my css file.
Using Flexbox I believe gives the desired result. I removed the floats and the width specs.
#mainContent {
display: flex;
}
<div id="mainContent">
<div id="mainText">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="images">
<img alt="Camp1" src="https://via.placeholder.com/150x150" title="Camp1">
<img alt="Camp2" src="https://via.placeholder.com/150x150" title="Camp2">
<img alt="Camp3" src="https://via.placeholder.com/150x150" title="Camp3">
</div>
</div>
I need help aligning my divs acording to example below:
What I got so far is this:
I cant apply spacing in between the two divs, and the divs are not the same height.
My Html:
<div class="container - fluid">
<div class="row" id="wrapper">
<div class="col-lg-8 col-md-8" id="columneone">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-lg-4 col-md-4" id="columnetwo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
My css(I am using less):
#columneone{background-color:#deepblue !important; color:white !important;}
#columnetwo{background-color:#lightblue !important; color:white !important; }
#wrapper{margin-right:-173px; margin-left:-173px; padding-top: 10px}
You should review Bootstrap's documentation about its Grid as it will provide you with a better understanding for why your initial attempt lacked gutters between the background colors, as well as a variety of other ways you could improve your previous attempt.
In Bootstrap 4 we can take advantage of a host of new utility classes as well as the flexbox grid to achieve your desired results.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row row-eq-height">
<div class="col-8">
<div class="bg-dark h-100 p-3">
<p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="col-4">
<div class="bg-secondary h-100 p-3">
<p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
The colors used here are just pulled using Bootstraps .bg-* utility classes, you'll need to adjust that to correctly reflect your preferred scheme.
Working on the container scrolling over the jumbotron however the text in the jumbotron is not hiding underneath the container beneath it on scroll. How do I get 'Main Title Goes Here', 'Subtitle' and the blue box with those elements to go under the container with lorem ipsum text. Tried setting z-index to -1 for the hero-text class but it hides the text and box all together.
https://codepen.io/zepzia/pen/JrwKbN
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="hero-text">
<h1 class="hero-title">Main Title Will</h1>
<h1 class="hero-title">Go Here</h1>
<div class="subtitle">SUBTITLE</div>
<div class="arrow animated bounce">
<img width="40" height="40" alt="" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyDQoJbDE4OS45OTktMTkwYzIwLjE3OC0yMC4xNzgsNTMuMTY0LTE5LjkxMyw3My42NzIsMC41OTVsMCwwYzIwLjUwOCwyMC41MDksMjAuNzcyLDUzLjQ5MiwwLjU5NSw3My42NzFMMjkzLjc1MSw0NTUuODY4eiIvPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTIyMC4yNDksNDU1Ljg2OGMyMC4xOCwyMC4xNzksNTMuMTY0LDE5LjkxMyw3My42NzItMC41OTVsMCwwYzIwLjUwOS0yMC41MDgsMjAuNzc0LTUzLjQ5MywwLjU5Ni03My42NzINCglsLTE5MC0xOTBjLTIwLjE3OC0yMC4xNzgtNTMuMTY0LTE5LjkxMy03My42NzEsMC41OTVsMCwwYy0yMC41MDgsMjAuNTA5LTIwLjc3Miw1My40OTItMC41OTUsNzMuNjcxTDIyMC4yNDksNDU1Ljg2OHoiLz4NCjwvc3ZnPg0K" />
</div>
</div>
</div>
</div>
</div>
<!-- END JUMBOTRON -->
<main>
<!-- MESSAGE -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
</div>
</div>
</div>
</div>
</div>
The structure looks a little confusing, but if you dont want to rebuild the html you can add something like:
main {
background-color: #fff;
position: relative;
z-index: 1;
margin-top: -32px;
padding-top: 32px;
}
I have started digging into Bootstrap and I'm a bit confused about the usage of the .container class.
Most of the tutorials recommend using the following structure:
-.container
--.row
---.col-
---.col-
Etc
I have stumbled upon this W3schools example:
W3Schools - Bootstrap,
which uses multiple .container elements and doesn't wrap everything inside a .container (e.g. the carousel).
So my questions:
In which cases is it advisable to use multiple .container elements?
Is there a general rule for which types of elements shouldn't be wrapped inside a .container?
Statutory Warning: Don't follow W3Schools. This is one of the typical examples where they are not following the Bootstrap standards plus, the examples are not so good. (See W3Fools). It's always advisable to follow the primary documentation of Bootstrap.
Multiple containers are perfectly okay to separate contents, one best way I could say is, if you have any instance of the background extending to the whole width, then you will definitely use multiple containers.
See the below example:
* {font-family: 'Segoe UI';}
section.about {background-color: #fcc;}
section.contact {background-color: #cfc;}
section.info {background-color: #ccf;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<section class="about">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">This is Section 1</div>
</div>
</div>
</section>
<section class="contact">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">This is Section 2</div>
</div>
</div>
</section>
<section class="info">
<div class="container">
<div class="row">
<div class="col-xs-4 col-xs-offset-4">This is Section 3</div>
</div>
</div>
</section>
<p>With more content</p>
<section class="about">
<div class="container">
<div class="row">
<div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="col-xs-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</section>
<section class="contact">
<div class="container">
<div class="row">
<div class="col-xs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</section>
<section class="info">
<div class="container">
<div class="row">
<div class="col-xs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
</section>
Preview
The container element is required by bootstrap to host its grid system. Therefore, you should always have one HTML tag with the .container class. You can also use multiple containers below each other. Nested containers don't work, because they are not nestable due to their padding.
If you want to have full width elements, use the .container-fluid class. This way you can implement carousel items and full width banners.
The container element acts as the root element of your bootstrap application, that hosts all your other elements. Therefore, every bootstrap element should be inside a container.