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
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed 2 years ago.
I'm not sure if my issue is the nested row, but I can't get the inner row vertical aligned centered within it's alert-box. Anyone any hint what I'm doing wrong?
https://jsfiddle.net/d2pg4xta/
<div class="container-fluid">
<div class="row">
<div class="col-md-6 d-flex">
<div class="alert alert-dark">
<div class="row"> <!-- here is my nested row -->
<div class="col-md-6"><p class="mb-0">1:</p></div>
<div class="col-md-6"><p class="mb-0">A</p></div>
<div class="col-md-6"><p class="mb-0">2:</p></div>
<div class="col-md-6"><p class="mb-0">B</p></div>
<div class="col-md-6"><p class="mb-0">3:</p></div>
<div class="col-md-6"><p class="mb-0">C</p></div>
<div class="col-md-6"><p class="mb-0">4:</p></div>
<div class="col-md-6"><p class="mb-0">D</p></div>
</div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="alert alert-dark text-center">
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
</div>
</div>
</div>
</div>
Update: It's not about aligning the 2 alert-boxes, it's about the inside of my left alert-box. I expect the inside row containing the content (abcd1234) to be more centered withing it's own alert-box like this: https://ibb.co/myntK5j
Do this:
.alert-dark {
display: flex; /*add*/
flex-direction: column; /*add*/
align-items: center; /*add*/
color: #1b1e21;
background-color: #d6d8d9;
border-color: #c6c8ca;
}
You need to use flex on .alert-box and remove margin from .row
Js fiddle: https://jsfiddle.net/zbywdacp/
Live Demo:
.row {
background: #f8f9fa;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.alert-dark {
display: flex;
align-items: center;
justify-content: center;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 d-flex">
<div class="alert alert-dark">
<div class="row m-0">
<div class="col-md-6">
<p class="mb-0">1:</p>
</div>
<div class="col-md-6">
<p class="mb-0">A</p>
</div>
<div class="col-md-6">
<p class="mb-0">2:</p>
</div>
<div class="col-md-6">
<p class="mb-0">B</p>
</div>
<div class="col-md-6">
<p class="mb-0">3:</p>
</div>
<div class="col-md-6">
<p class="mb-0">C</p>
</div>
<div class="col-md-6">
<p class="mb-0">4:</p>
</div>
<div class="col-md-6">
<p class="mb-0">D</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="alert alert-dark text-center">
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
</div>
</div>
</div>
</div>
Try adding display: flex; to .alert.alert-dark.
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>
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 Bootstrap 3 and I have a full width row with 3 col-lg-4, each column with an icon, a title and a subtitle. But now I'd like to place the icon and text side by side, like this:
Initial HTML:
<div class="cover-container">
<div class="row">
<div class="col-lg-4">
<div class="tile">
<img src="" />
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div
…
…
</div>
</div>
.cover-container {
margin: 0 auto;
width: 100%;
padding: 0px;
}
.tile {
text-align: center;
}
I've tried with 8 col-lg-2, but I don't like that it shows each column as a row on a smartphone.
I prefer to use 3 centered col-lg-4, but I can not place elements like in the mock-up,
can you help? Thanks…
SOLUTION:
<div class="cover-container">
<div class="row">
<div class="col-sx-4 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div class="col-xs-6 cover-tile-image">
<img src="/assets/images/1.png" alt="" />
</div>
<div class="col-xs-6 cover-tile-text">
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div>
</div>
…
…
</div>
</div>
.cover-tile-image {
text-align: right;
padding-right: 5px;
}
.cover-tile-text {
padding-left: 5px;
}
I'm just going to point out to y'all that:
class="col-xs-4 col-sm-4 col-md-4 col-lg-4"
is extremely redundant, and equivalent to the much-simpler:
class="col-xs-4"
I encourage y'all to read Bootstrap's grid docs:
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
I'm still new in using bootstrap 3. Check the demo below I created. Hope this helps.
Fiddle
HTML
<div class=".col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="tile">
<img src="http://placekitten.com/g/64/64" class="img-thumbnail" />
</div>
<div class="info">
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div>
CSS
.tile, .info {
float:left;
}
Here is the solution :) with working example.
Find here more information about the grids.
This solution is also RESPONSIVE READY.
HTML:
<div class="row well">
<div class="col-sx-4 col-sm-4 col-md-4 col-lg-4">
<div class="row ">
<div class="col-sx-3 col-sm-3 col-md-3 col-lg-3">
<img src="//placehold.it/50x50" />
</div>
<div class="col-sx-9 col-sm-9 col-md-9 col-lg-9">
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div>
</div> <div class="col-sx-4 col-sm-4 col-md-4 col-lg-4">
<div class="row ">
<div class="col-sx-3 col-sm-3 col-md-3 col-lg-3">
<img src="//placehold.it/50x50" />
</div>
<div class="col-sx-9 col-sm-9 col-md-9 col-lg-9">
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div>
</div> <div class="col-sx-4 col-sm-4 col-md-4 col-lg-4">
<div class="row ">
<div class="col-sx-3 col-sm-3 col-md-3 col-lg-3">
<img src="//placehold.it/50x50" />
</div>
<div class="col-sx-9 col-sm-9 col-md-9 col-lg-9">
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
CSS
h3{margin:0;}
HTML
<div id="wrapper">
<div class="row">
<div class="columns">
<img src="//placehold.it/100x100" />
</div>
<div class="columns">
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div>
<div class="row">
<div class="columns">
<img src="//placehold.it/100x100" />
</div>
<div class="columns">
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div>
<div class="row">
<div class="columns">
<img src="//placehold.it/100x100" />
</div>
<div class="columns">
<h3>Title</h3>
<p>Lorem ipsum</p>
</div>
</div>
</div>
CSS
#wrapper
{
width:1000px;
margin:0px;
padding:0px;
}
.columns
{
float:left;
display:inline-block;
width:120px;
height:110px;
}
Demos
Fiddle Demo
Result Demo
Output