I would like to align three div in one line with a little space between first div and second div and last div using bootstrap as you see in the picture :
I try with this code :
<div class="row">
<div class="col-md-2">
<img src="img/emo_positif.png')}}">
</div>
<div class="col-md-7">
<div class="square1"></div>
</div>
<div class="col-md-3">
<img src="img/emo_negative.png')}}">
</div>
</div>
but it shows me a big space between the div
Using Bootstrap 3:
.row {
height: 24px;
}
.row > div {
height: 100%;
}
.square {
background: pink;
}
.square1 {
background: #01a8ff;
height: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >
<div class="row">
<div class="col-xs-2 square">
</div>
<div class="col-xs-8">
<div class="square1"></div>
</div>
<div class="col-xs-2 square">
</div>
</div>
Check this Pen.
Read the docs.
For making the three division in same line . There are many ways. For better UX use display:flex in css for the parent division
Thanks
Related
There are several subjects on StackOverFlow as here, but the answers are not intuitive for a beginner.
How to align several text and images in CSS
How to align several text and images in CSS
Actually, I would like to center 2 images on the same line, in bottom of each image there are a title and a subtitle. I would like to make it without display: flex.
I don't understand why the seconde image is not aligned horizontally correctly?
.row{
padding-top: 15px;
text-align: center;
}
.imgP{
background-color:red;
margin: auto 5px;
}
<body>
<div class="row">
<img class="imgP" src="https://zupimages.net/up/21/18/te8n.png" alt="image">
<div class="title">My title</div>
<div class="subtitle">Subtitle</div>
<img class="imgP" src="https://zupimages.net/up/21/18/te8n.png" alt="image">
<div class="title">My title</div>
<div class="subtitle">Subtitle</div>
</div>
</body>
Flex is the easy and modern way to do it. If you don't want to use flex, use display:inline-block. For that, you need to create 2 column divs and wrap the content inside it.
.row {
padding-top: 15px;
text-align: center;
}
.col {
display: inline-block;
}
.imgP {
background-color: red;
margin: auto 5px;
}
<body>
<div class="row">
<div class="col">
<img class="imgP" src="https://zupimages.net/up/21/18/te8n.png" alt="image">
<div class="title">My title</div>
<div class="subtitle">Subtitle</div>
</div>
<div class="col">
<img class="imgP" src="https://zupimages.net/up/21/18/te8n.png" alt="image">
<div class="title">My title</div>
<div class="subtitle">Subtitle</div>
</div>
</div>
</body>
I am trying to fix a page which wasn't bootstrapped like the illustration. But my col-2, col-3, col-4 don't align with the col 1 and 2. I cannot really understand how pull and push work. I have worked on my mobile layout and it seem fine, but as it goes to desktop, it messing the layout.
My layout becomes this, when I make it go desktop. Misaligned headings and columns under it.
You need to include yellow div-s into row so they won't jump over next line.
.left-box {
height: 290px;
width: 100%;
background: #e66;
margin: 3px;
}
.right-box {
height: 70px;
background: #ee6;
margin: 3px;
}
#media screen and (min-width: 992px) {
.left-box, .right-box {
height: 200px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-2 col-xs-5">
<div class="left-box"></div>
</div>
<div class="col-md-10 col-xs-7">
<div class="row">
<div class="col-md-3"><div class="right-box"></div></div>
<div class="col-md-3"><div class="right-box"></div></div>
<div class="col-md-3"><div class="right-box"></div></div>
<div class="col-md-3"><div class="right-box"></div></div>
</div>
</div>
</div>
</div>
Note: according to bootstrap rules, the statement class="col-md-2 col-sm-5" is the same that class="col-lg-2 col-md-2 col-sm-5 col-xs-12".
Actually you don't need push-pull classes I think. You could use a markup like this:
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="left-box"></div>
</div>
<div class="col-md-6">
<div class="right-box"></div>
<div class="right-box"></div>
<div class="right-box">etc...</div>
</div>
</div>
</div>
Pen: http://codepen.io/anon/pen/yVKgwG
I downloaded Bootstrap 4, set $enable-flex true and recompiled.
I have a question about Bootstrap 4 and flexbox.
If you reduce the size of Twitter homepage, you can see that "Who to follow" part is moving from right to the left side of the site (but main feed doesn't get effected by that), and this is the thing I want to do using Bootstrap 4 and flexbox. So, when I resize the window (for a hypothetical size like sm), #right will start after #left. #middle is the feed section.
How can I do it?
Here's my current setup.
#left {
background: yellow;
}
#middle {
background: brown;
}
#right {
background: #a8d6fe;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-2" id="left">
<div class="col-md-12">PROFILE</div>
<div class="col-md-12" id="menu">MENU</div>
</div>
<div class="col-sm-9 col-md-7" id="middle">NEWS</div>
<div class="col-sm-3 col-md-3" id="right">RIGHT PART</div>
</div>
</div>
Looks like you need a div with col- as a wrapper to order the flex items. Which makes sense, because only the flex items can be ordered. Not the flex container.
#import url('https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css');
[class*="col-"] {
display: flex;
flex-flow: row wrap;
}
#left{
background:yellow;
}
#middle {
background:brown;
order: 1;
}
#right {
background:#a8d6fe;
}
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-3 col-md-2" id="left">
<div class="col-md-12">PROFILE</div>
<div class="col-md-12" id="menu">MENU</div>
</div>
<div class="col-sm-9 col-md-7" id="middle">NEWS</div>
<div class="col-sm-3 col-md-3" id="right">RIGHT PART</div>
</div>
</div>
</div>
I'm trying to make some space / gap between 2x col-sm-6 inside an row. Have tried some methods from earlier posts here from Stack Overflow, but none seem to make the right result.
What I have tried:
<div class="row">
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
<div class="col-sm-6">
<div class="col-md-12 contentpage3">
</div>
</div>
</div>
Well... this creates the right spacing, but then the left and right sides are not allign with the rest of the page content. To help you guys understand what I'm trying to explain, here is a picture.
Here you can see that the upper white content, the width is what I'm trying to keep for all the elements inside the page. I know its because the extra div I added, because the following code is producing the upper white content box you see in the picture, but then there is no spacing. Have also tried with col-md-5 and an offset of 2 but this creates too much spacing.
<div class="row">
<div class="col-sm-6 contentpage3">
</div>
<div class="col-sm-6 contentpage3">
</div>
</div>
What am I doing wrong?
You can do something like this.
All .col-* elements should be inside row elements.
All .col-* elements should contain content, not be content.
.example {
padding-bottom: 15px;
background: #ccc;
}
.example > .row > div {
margin-top: 15px;
}
.example .inside {
height: 50px;
background: #fff;
border: 1px solid #eee;
}
<div class="container-fluid example">
<div class="row">
<div class="col-xs-12">
<div class="inside"></div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="inside"></div>
</div>
<div class="col-xs-6">
<div class="inside"></div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
I would like to be able to align different sized images to the bottom of a div.
I have the following markup:
<div class="container">
<div class="container">
<div class="footer-images">
<img src="img1">
<img src="img2">
<img src="img3">
</div>
</div>
<div class="container">
<div class="copyright">
<p>© Some Company YYYY</p>
</div>
</div>
</div>
I can't figure out how to have all the images aligned to the bottom of the footer-images div. Any help would be greatly appreciated.
try this
.footer-images img{
vertical-align:bottom;
border:0;
}
In Bootstrap v4 you can use the class align-items-end to achieve bottom alignment in a div. You can use this class on the row or on the column.
Example with all column content aligned to the bottom.
<div class="container">
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
Example with first column top, second colum middle and third colunm bottom alignment.
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Source: Bootstrap documentation.
Does this help?
<style type="text/css">
.footer-images {
margin: auto;
display: block;
position: absolute;
bottom: 0;
}
.footer-images .copyright {
text-align: center;
}
</style>
Using this HTML
<div class="container">
<div class="container">
<div class="footer-images">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/640x480">
<img src="http://placehold.it/120x120">
<div class="container">
<div class="copyright">
<p>© Some Company YYYY</p>
</div>
</div>
</div>
</div>
</div>
used to this css and apply
.footer-images img{
width:xxpx;
height:xxpx; // add here your style as like with height border etc.
vertical-align:top;
border:0;
}
More about bootstrap
It would be enough:
margin-top: auto;
See https://jsfiddle.net/d3jau1gx/