I want my image to be right-aligned. So I did this:
.section {
margin-bottom: var(--double-margin);
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container">
<div class="section">
<div class="row">
<div class="col">
<img class="rounded float-right w-50" src="https://via.placeholder.com/1000x200.jpg"/>
</div>
<div class="col">
<p>So other text</p>
</div>
</div>
</div>
</div>
As the result, my image went on the left (because of w-50). So how to tell my image that it should be 50% width and aligned to right?
Here is your example and it works fine. You either need to add a reproducible example of your problem or find the difference between your code and my example. I can guess that for some reason your .col does not grow to 100% of the width that's why the image is aligned to the right side of the smaller container and for you, it looks like it's aligned to left.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
<img class="rounded float-right w-50" src="https://via.placeholder.com/1000x200.png"/>
</div>
Related
I create page with 3 columns with bootstrap5:
<div class="container">
<div class="row">
<div class="col-md-3">LEFT</div>
<div class="col-md-6">CENTER</div>
<div class="col-md-3">RIGHT</div>
</div>
</div>
Now in columns left and right there are advertisements with 300px width. How to restrict left and right column to shrink less then 300px, and to shrink just a center column.
If i set min-width:300px on left and right, then right column is pushed down.
Don't use fixed (proportionate) column sizing. Use Flex. Here's an example. I've reduced the image size for this demo, but it works the same with 300px images.
You may want to change behavior for mobile, maybe to stack everything so it doesn't wrap oddly. I'm not sure of your goals.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="d-flex flex-wrap">
<div><img src="https://via.placeholder.com/200"/></div>
<div class="flex-fill">CENTER</div>
<div><img src="https://via.placeholder.com/200"/></div>
</div>
</div>
You can mimic the same (stacked to horizontal) behavior of .col-md-*s in a .row with flex toggling wrapping at the medium breakpoint with .flex-wrap.flex-md-nowrap.
Try this:
.ad {
width: 300px;
background: cyan;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container-fluid">
<div class="d-flex flex-wrap flex-md-nowrap">
<div class="ad">LEFT</div>
<div class="w-100">CENTER</div>
<div class="ad">RIGHT</div>
</div>
</div>
The simplest way is to use the Grid auto-layout columns. col-auto will shrink to fit its content (the ads). Then, use flex-nowrap to prevent wrapping...
<div class="container">
<div class="row flex-md-nowrap">
<div class="col-md-auto">
<img src="//via.placeholder.com/300" />
</div>
<div class="col-md">CENTER</div>
<div class="col-md-auto">
<img src="//via.placeholder.com/300" />
</div>
</div>
</div>
Responsive Demo
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 1 year ago.
I am trying to create a heading next to an image for the main banner of a web page. An example of what I'm trying to do can be found here: https://optimaninja.com/
I'm using bootstrap, and here is some simple starter code I have to begin:
BOOTSTRAP CODE:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class='container other'>
<div class="row">
<div class="col-5">
<h3>Understand Police Behavior</h3>
</div>
<div class="col-7">
<img src="pic.jpg" class="img-fluid" style="max-width: 600px;">
</div>
</div>
</div>
</div>
</body>
</html>
It yields a front page that looks like this:
What I would like to do is get my heading aligned vertically so that it is centered next to the image, and not up top.
In order to do so, I've tried different permutations of the following CSS selectors to both the other and h3 elements:
<style>
.other {
vertical-align: center;
justify-content: center;
align-items: center;
}
</style>
None of this seems to have any effect.
Thank you for your help.
You can try adding the "align-items-center" class to your "row" div (or change your .other to .row in your CSS).
use the bootstrap class of flex alignment
d-flex justify-content-center align-items-center
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class='container other'>
<div class="row position-relative">
<div class="position-absolute h-100 d-flex justify-content-center align-items-center">
<h3>Understand Police Behavior</h3>
</div>
<div class="col-12">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="img-fluid" style="max-width: 600px;">
</div>
</div>
</div>
</div>
</body>
</html>
okay just use this in your style tag
.row {
display: flex;
justify-content: center;
align-items: center;
}
and listen my tip you can not use propertys like this vertical- align: center;
justify-content: center;
align-items: center;
without discribing your dispay
I have a couple of images
mockleft.png - 1228x500px
mockright.png - 1825x335px
My code is as below..
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="home">
<div class="intro">
<div class="row">
<div class="col-xs-5" style="background-color:blue">
<img src="img/mockleft.png" alt="logo" style="width:100%;">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-6" style="background-color:red;">
<img src="img/mockright.png" alt="logo" style="width:100%;">
</div>
</div>
</div>
</body>
The output is as below..
I wish for two things..
a) The left div with blue background should be same height as right div with red background and vice versa.
b)Once the right div with red background becomes same size with the left one, I want the mockright.png image to be vertically aligned at bottom of the right div.
I tried the vertical-align css to both the div as well as image without success.
All help is sincerely appreciated
Thanks
You could do it with flexbox. If you use Bootstrap 4 as #Pete suggests in the comments, you could achieve the same, since it uses flexbox.
JSFiddle Demo
.row {
display: flex;
}
.col-xs-1 {
width: 10%;
}
.col-xs-5 {
display: flex;
flex-direction: column;
width: 40%;
background: blue;
justify-content: flex-end;
}
.col-xs-6 {
width: 50%;
background: red;
}
<div class="row">
<div class="col-xs-5">
<img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-6">
<img src="https://placekitten.com/600/400" alt="logo" style="width:100%;">
</div>
</div>
a) Assuming you need to use Bootstrap 3, what you can do is use one of the options provided to make the columns the same height:
How can I make Bootstrap columns all the same height?
b) For that part, use auto margin:
<img src="img/mockright.png" alt="logo" style="width:100%; margin-top: auto;">
Hope it helps :)
I've been reading lot of answers on how to have same height columns within the same row, but none seems to work in my case. I know the solution is probably something really dumb, but I cannot figure it out...
So, first I created a style.css and imported it in my index.php this way (I also include the other style reference I am actually using and the important part of the code below):
index.php
<link rel="stylesheet" href="./static/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
...
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="./img/animazione.jpg" alt="Animazione" style="width:100%">
<div class="caption">
<h2>Some text COL2</h2>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="./img/rinnovabili.jpg" alt="Rinnovabili" style="width:100%">
<div class="caption">
<h2>Some text COL2</h2>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="./img/rugby.jpg" alt="Rugby" style="width:100%">
<div class="caption">
<h2>Some text COL3</h2>
</div>
</div>
</div>
</div>
My style.css is like (as proposed here):
style.css
.equal {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
}
After that, I tried to replace <div class="row"> with <div class="row equal"> but nothing happened: the columns are still each a different height. I also tried to set the first row of my style.css to .row.equal{ but still with no luck.
I am using FireFox ver. 53. When i open the Developer Tools, I can see that display: flex; in my css is ignored (it's ruled out). I guess it is something related to flexbox, but I am a novice and I really don't know how to solve this problem.
I also created a bootply as suggested. Hope it will help understanding my point.
The columns are equal height, but the thumbnails inside the columns are not filling the height. Just set the height...
.row.equal {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
height: 100%;
}
.thumbnail {
height: 100%;
}
https://www.bootply.com/8wQiUUKL53
I guess the flex property was getting overriding by the bootstrap classes and can be resolved by '!important' in your custom css.
.target-class{
display: flex !important;
}
But you can simplify the code by removing the predefined thumbnail class and styling it in your own way.
Display your parent class as flex and align your children as 'stretch' (will give the height equal to the height of the parent div).
.parent {
background: lightgrey;
display: flex;
}
.child {
align-items: stretch;
flex: 1;
background: #fff;
margin: 10px;
padding-top: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="parent">
<div class="col-xs-4 child">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj8ddwNjLjFB_PoOLhcXHdZUbyCk0ZbhSYi1Vzf2nZo4qDiA2h" style="width:100%">
<div class="caption">
<h2>Some text COL2 some text</h2>
</div>
</div>
<div class="col-xs-4 child">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj8ddwNjLjFB_PoOLhcXHdZUbyCk0ZbhSYi1Vzf2nZo4qDiA2h" style="width:100%">
<div class="caption">
<h2>Some text COL2 some more text</h2>
</div>
</div>
<div class="col-xs-4 child">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSj8ddwNjLjFB_PoOLhcXHdZUbyCk0ZbhSYi1Vzf2nZo4qDiA2h" style="width:100%">
<div class="caption">
<h2>Some text COL3</h2>
</div>
</div>
</div>
</div>
</div>
</div>
I have a Bootstrap section with stacked images and the issue is that I want the second and third columns to always have the same height as the first column. I can't seem to find a solution for the second and third column because they keep fluctuating in height as I change to different view sizes. It would be ideal to have them always align to the bottom and top.
.gallery {
min-height: 980px;
}
.gallery .row{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<div class="container-fluid gallery">
<div class="row">
<div class="col-sm-5">
<img src="http://lorempixel.com/528/980/technics" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="http://lorempixel.com/409/490/technics" class="img-responsive">
<img src="http://lorempixel.com/409/490/technics" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="http://lorempixel.com/324/327/technics" class="img-responsive">
<img src="http://lorempixel.com/324/327/technics" class="img-responsive">
<img src="http://lorempixel.com/324/327/technics" class="img-responsive">
</div>
</div>
</div>
Here is the Bootply: http://www.bootply.com/mb2Ez6G7r8
Hi Paul you can resolve in that way, i see that you use boostrap you dont need the property flex in your css.
<div class="row">
<div class="col-sm-5">
<img src="https://www.jssor.com/demos/img/paint/01.jpg">
</div>
<div class="col-sm-4">
<img src="https://www.jssor.com/demos/img/paint/02.jpg">
<img src="http://lorempixel.com/409/490/technics" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="https://www.jssor.com/demos/img/paint/06.jpg" class="img-responsive">
and your css
.gallery {
min-height: 980px !important;}
dont forget add bootrap in your html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
i explain why you dont need flex, Boostrap make your thml responsive with class .row and you can fill this with 12 columns that is why you have col-sm-(Number) in your case 5+4+3=12 if you want you can read more in this link grid systemn
.column-sm-4{
display: flex;
flex-direction: row;
}
If height is an issue you should probably use background-image with css instead of <img> element.
Hope this will solve the issue.