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
Related
I would like to build a grid system using boostrap 4, I have a newspaper that on tablet/desktop mode show three columns each row, instead on mobile mode I would like to show only one column each row.
The documentation to this link https://getbootstrap.com/docs/4.1/layout/grid/
describe the Class prefix across multiple devices.
On tablet/desktop mode everything run well, but on mobile mode I have problems.
This picture show how should be on mobile mode
This pics show the problems that I have on mobile mode
This is the code:
<div class="container">
<div class="row no-gutters">
<!-- Article 1 -->
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="content">
<div id='column1' class="column">
Lorem ipsum etc...
</div>
</div>
</div>
<!-- Article 2 -->
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="content">
<div id='column2' class="column">
Lorem ipsum etc...
</div>
</div>
</div>
<!-- Article 3 -->
<div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="content">
<div id='column3' class="column">
Lorem ipsum etc...
</div>
</div>
</div>
</div>
Firstly col-sm-12 col-lg-4 col-xl-4 is unnecessary. Bootstrap grid work well. Maybe your title (SERIE BI) is too long. Try to give it max-width: 100%
Just use class="col-4" it's enough
You don't need all these styles col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<div class="container">
<div class="row no-gutters">
<!-- Article 1 -->
<div class="col-4">
<div class="content">
<div id='column1' class="column">
Lorem ipsum etc...
</div>
</div>
</div>
<!-- Article 2 -->
<div class="col-4">
<div class="content">
<div id='column2' class="column">
Lorem ipsum etc...
</div>
</div>
</div>
<!-- Article 3 -->
<div class="col-4">
<div class="content">
<div id='column3' class="column">
Lorem ipsum etc...
</div>
</div>
</div>
</div>
I have to create this layout responsive for a custom slider:
https://imgur.com/YbKdOAC
https://imgur.com/TPo2h57
-The icon of an image is where the slides are going to be.
-There is another pink block with the controls of the slider.
-The last pink block has some text. Nothing special.
There are 2 background-images in those patterns.
I began with the desktop version using flexbox, but when I try to adjust the layout to the tablet version, it was imposible because this two elements are in different rows.
https://imgur.com/Upjsh8B
This is more or less my code right now:
<div class="slider">
<div class="container">
<div class="row">
<div class="col-3">
<img class="logo-img"
src="assets/images/logo.png">
<div class="titulo-boton">
<h1>Lorem ipsum</h1>
</div>
</div>
<div class="col-9">
<div class="row primera" primera>
<div class="col yourtrip">
<h2>Lorem ipsum</h2>
<hr>
<p class="tags">#tags</p>
</div>
<div class="col"></div>
<div class="col ">
<div class="image-slider image-wrap">
<!-- <img src="assets/images/rocket.png">-->
</div>
</div>
</div>
<div class="row" segunda>
<div class="col"></div>
<div class="col controls" controls>
<div class="botones row w-100">
<div class="col p-0">
prev
</div>
<div class="col p-0">
next
</div>
</div>
</div>
<div class="col"></div>
</div>
</div>
</div>
</div>
</div>
Thanks for your help!
Edit:
I have created a pen to make the things easier. The assets are different but the layout is the same.
https://codepen.io/jenvigo/pen/jRrwdw?editors=1100
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>
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>
I have html code and I use Bootstrap. But when I resize width of browser and get 2+2 columns ( col-sm-6 )
my first and second footer-widget have different heights.
So I want to have one height for all footer-widget
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="footer-widget">
<p>lorem ipsum</p>
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footer-widget">
<p>lorem ipsum</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footer-widget">
<p>lorem ipsum</p>
<p>lorem ipsum</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footer-widget">
<p>lorem ipsum</p>
</div>
</div>
</div>
</div>
For Bootstrap 3, you can add a custom class to utilize flexbox. Add equal to the row element.
.equal, .equal > div[class*='col-'] {
display: flex;
flex:1 1 auto;
flex-wrap: wrap;
}
Demo: http://www.codeply.com/go/lO116mxmuZ
Note: Bootstrap 4, now uses flexbox by default so there will be no need for the extra CSS: http://www.codeply.com/go/IJYRI4LPwU