I need to code a layout like this with Bootstrap 3.x
But I don't know how to create a section (in this case, the main and the article) with multiple columns size, without a markup error related to close the elements.
The following code is correct syntactically, but it doesn't respect the layout (the col-md-4 is in a new row)
<body>
<header>
<!-- menu -->
</header>
<div class="container">
<main>
<article>
<div class="row">
<div class="col-md-12">
<h1>Hello, world!</h1>
</div>
</div>
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Etc., etc.</p>
</div>
</div>
</article>
</main>
<div class="row">
<aside class="col-md-4">
<p>Lorem ipsum</p>
</aside>
</div>
<div class="row">
<footer class="col-md-12">
<p>Lorem ipsum</p>
</footer>
</div><!-- container -->
</body>
</html>
What do you suggest?
Thanks
"Green" column, .col-md-4 should be a sibling of "orange" column .col-md-8. They need to have the same .row parent. In other words, they should be next to each other, that way the sections won't break. Here is how I would do it:
<header>
<div class="container">
<div class="row">
<div class="col-md-12">header</div>
</div>
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-md-12">orange section</div>
</div>
<div class="row">
<div class="col-md-12">orange section</div>
<div class="col-md-12">green section</div>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">footer</div>
</div>
</div>
</footer>
Related
I have the same code repeated 3 times on my page, I need to target the ImageSection-hold class and have a different background color for each one.
I am not able to add or remove any classes via HTML or Javascript, this has to be done using CSS.
Attempted:
1.) .ImageSection-hold:nth-of-type(1)
-This changed all of the backgrounds to the same color
2.) .ImageSection-hold{ background-color: #fff;}
.ImageSection-hold~.ImageSection-hold{ background-color: #000;}
<section class="section ImageSection">
<div class="container">
<div class="ImageSection-hold">
<div class="ImageSection__desc">
</div>
</div>
</div>
</section>
<section class="section ImageSection">
<div class="container">
<div class="ImageSection-hold">
<div class="ImageSection__desc">
</div>
</div>
</div>
</section>
<section class="section ImageSection">
<div class="container">
<div class="ImageSection-hold">
<div class="ImageSection__desc">
</div>
</div>
</div>
</section>
You can use the nth-child selector. More info here
.ImageSection:nth-child(1) .ImageSection-hold{
background-color: red
}
.ImageSection:nth-child(2) .ImageSection-hold{
background-color: green
}
.ImageSection:nth-child(3) .ImageSection-hold{
background-color: blue
}
<section class="section ImageSection">
<div class="container">
<div class="ImageSection-hold">
<div class="ImageSection__desc">
asd
</div>
</div>
</div>
</section>
<section class="section ImageSection">
<div class="container">
<div class="ImageSection-hold">
<div class="ImageSection__desc">
zxc
</div>
</div>
</div>
</section>
<section class="section ImageSection">
<div class="container">
<div class="ImageSection-hold">
<div class="ImageSection__desc">
qwe
</div>
</div>
</div>
</section>
I'm new to bootstrap and I am having some trouble getting two jumbotrons to sit on one row (without space in between.) No matter how small I make their respective columns, they stay on separate rows.
Here is my HTML:
<div class="col no-gutters">
<div class="col-md-6">
<div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
<div class="container">
<h1 class="display-4">Title</h1>
<p class="lead">Description. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
<div class="container">
<h1 class="display-4">Active</h1>
<br>
</div>
</div>
</div>
</div>
I have not messed with the default bootstrap CSS. Thank you in advance!!!
The class of the containing div should to be row, not col:
<div class="row no-gutters">
Bootstrap's Grid system has column spacing (padding) by default. There are a few ways to address this issue to adapt to your requirements.
One approach could be to add a new CSS selector, and then modify your HTML accordingly.
CSS:
/* Add this */
.no-padding {
padding-right:0;
padding-left:0;
}
HTML:
<div class="col">
<div class="col-md-6 no-padding"> <!-- add no-padding -->
<div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
<div class="container">
<h1 class="display-4">Title</h1>
<p class="lead">Description. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-md-6 no-padding"> <!-- add no-padding -->
<div class="jumbotron jumbotron-fluid" style="background-color: #e3f2fd;">
<div class="container">
<h1 class="display-4">Active</h1>
<br>
</div>
</div>
</div>
</div>
My columns are displaying on top of each other in the same row. Their columns add up to 12.
HTML:
<section class="container">
<div class="content row">
<section class="main col col-sm-8">
<h2>main content</h2>
<p>Lorem ipsum</p>
</section> <!-- col-lg-8 -->
<section class="sidebar col col-sm-4">
<h2>SIDEBAR</h2>
<p>Lorem ipsum</p>
</section> <!-- col-lg-4 -->
</div> <!-- row -->
</section> <!-- container -->
Don't think you can use section tags, you need to use divs. What's that content class for? Something custom? Here's the basic layout
<div class="container">
<div class="row">
<div class="col-lg-8">
<h2>main content</h2>
<p>Lorem ipsum</p>
</div>
<div class="col-lg-4">
<h2>Sidebar</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
i don't think there is main or sidebar classes in bootstrap
you maybe did some styling that affected the default bootstrap behavior the code you added should add to
columns when having enough width
I'm using twitter bootstrap 3 for the CSS framework. Basically I have 2 rows with 3 columns of articles.
Option 1
first approach which is using below code (skeleton), Im able to follow exactly like sample design (div in column will position to below) but if Im using this approach, is hard to integrate with backend.
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-md-12">
<div class="post">
...
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="post">
...
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-md-12">
<div class="post">
...
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-md-12">
<div class="post">
...
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="post">
...
</div>
</div>
</div>
</div>
</div>
Option 2:
So, i try using this approach, but Im unable to remove the gap between 2 div. Please help
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-sm-4">
<div class="post">
...
</div>
</div>
<div class="col-sm-4">
<div class="post">
...
</div>
</div>
<div class="col-sm-4">
<div class="post">
...
</div>
</div>
<div class="col-sm-4">
<div class="post">
...
</div>
</div>
<div class="col-sm-4">
<div class="post">
...
</div>
</div>
</div>
</div>
</div>
Have a look at plugins like Wookmark or Masonry
Working with Twitter Bootstrap 2.3.5.
Well basically, my structure is that I have a fixed sidebar on the left (span4) and a main content area on the right (span8, #main)
Within #main I have placed a .hero-unit and after that a row that should contain two columns, both spam4.
Here is a shortened version of my code:
...
<div class="span8 offset4" id="main">
<div class="hero-unit">
....
</div>
<div class="span4" id="main-left">
<article>
<h3>Head here</h3>
<p>Some Text here</p>
</article>
</div>
<div class="span4" id="main-right">
<article>
<h3>Head here</h3>
<p> Some Text Here</p>
</article>
</div>
</div>
</div>
My problem now is that the #main-left and #main-right is now placed outside the container.
What seems to be the problem with my code?
Minus your ID's and any custom classes, this should work for you:
<div class="container">
<div class="row">
<div class="span4">
<p class="text-center"><img class="img-circle" src="http://placehold.it/100x100" /></p>
<p>Look at this stuff, isn't it neat wouldn't you think my collection complete. Wouldn't you think Im a girl a girl who has everything.</p>
<ul class="nav nav-tabs nav-stacked">
<li>Home</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</div>
<div class="span8">
<div class="hero-unit">
<h1>Hero Unit</h1>
</div>
<div class="row">
<div class="span4">
<h3>Head here</h3>
<p>I've heard it said, that people come into our life...</p>
</div>
<div class="span4">
<h3>Head here</h3>
<p>Like a comet pulled from orbit as it passes the sun...</p>
</div>
</div>
</div>
</div>
</div>
View Demo Here
May be this could help you..
<div class="span8 offset4" id="main">
<div class="row-fluid">
<div class="span12">
<div class="hero-unit">
....
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6" id="main-left">
<article>
<h3>Head here</h3>
<p>Some Text here</p>
</article>
</div>
<div class="span6" id="main-right">
<article>
<h3>Head here</h3>
<p> Some Text Here</p>
</article>
</div>
</div>
</div>
See comments regarding nesting columns and rows. But try this:
<div class="container">
<div class="row">
<div class="span4">
The sidebar content
</div>
<div class="span8" id="main">
<div class="row">
<div class="hero-unit">
....
</div>
</div>
<div class="row">
<div class="span4" id="main-left">
<article>
<h3>Head here</h3>
<p>Some Text here</p>
</article>
</div>
<div class="span4" id="main-right">
<article>
<h3>Head here</h3>
<p> Some Text Here</p>
</article>
</div>
</div>
</div>
</div>
</div>