I am trying to display three image in same row
for that i am using
<div ng-repeat="p in imageses">
<div class="col-sm-4" >
<img ng-src="{{p.path}}" class="rounded"/>
</div>
</div>
this is showin only one image at a line i want to show three images per line
Try this.
<div class='row'>
<div ng-repeat="p in imageses" class="col-sm-4" >
<img ng-src="{{p.path}}" class="rounded"/>
</div>
</div>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Images Side by Side</h2>
<p>How to create side-by-side images with the CSS float property:</p>
<div class="row">
<div class="column">
<img src="img_fjords.jpg" alt="Fjords" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
The basic structure should be following:
<div class="container"><!--use container-fluid if you want full width-->
<div class="row">
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
</div>
</div>
For better clarification please check their doc
Related
Need to align four different height (beetween 160-180px) svg images with text under them.
Images should be placed in line at sight and I don't know how to make strict align short text under them in one line like on screenshot.
Thanks!
UPD: Sorry for inconvinient information, thought that this question is quite typical for those who know css good.
Here is my html and css. Also I'm using bootstrap rows.
<div class="did-you-know">
<div class="row items">
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-wa.svg"/>
</div>
<div class="title text-poppins">
<p>We’re from WA</p>
<p>{like you!}</p>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-packaging.svg"/>
</div>
<div class="title text-poppins">
<p>We use minimal packaging</p>
<p>{great for the planet}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-quality.svg"/>
</div>
<div class="title text-poppins">
<p>We only choose quality</p>
<p>{better for your health}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-community.svg"/>
</div>
<div class="title text-poppins">
<p>We love giving back</p>
<p>{great for our community}</p></div>
</div>
</div>
</div>
.did-you-know {
padding: 20px;
text-align: center;
}
.did-you-know .items .icon {
padding: 50px;
}
.did-you-know .items .title {
font-size: 20px;
}
here is a solution:
Replace images by your images.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 25%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Snow" style="width:100%">
<p style='text-align: center;'>test1</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Forest" style="width:100%">
<p style='text-align: center;'>test2</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
</div>
</body>
</html>
I have a simple footer with contact information that contains of three rows. The first two appear at the top, the last one should be placed on the very bottom of the container.
So what I did was using an absolute positioning:
footer .verybottom {
position: absolute;
bottom: 0px;
background-color: grey;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="kontakt">
<div class="container">
<div class="row">
<div class="col md-12">
<h2>Contact</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
Adress
</div>
<div class="col-md-6">
something else
</div>
</div>
<div class="row verybottom">
<div class="col-md-6">
some more Text
</div>
<div class="col-md-6">
some more Text
</div>
</div>
</div>
</footer>
The positioning works fine, but whatever I do - the last row is only a wide as the col above it. can someone help me align the content with the rows above?
You need to put a container inside to get it to work... and then introduce another .row since we want the col-md-XX classes to work
working snippet:
footer .verybottom {
position: absolute;
bottom: 0px;
background-color: grey;
padding-left: -15px;
}
.row {
border: 1px dotted red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<footer id="kontakt">
<div class="container">
<div class="row">
<div class="col md-12">
<h2>Contact</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
Adress
</div>
<div class="col-md-6">
something else
</div>
</div>
<div class="row">
<div class="container verybottom">
<div class="row">
<div class="col-md-6">
some more Text
</div>
<div class="col-md-6">
some more Text
</div>
</div>
</div>
</div>
</div>
</footer>
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
how to put content in column horizontally like below,
(column1) (column2) (column3)
1.asd 2.asd 3.asd
4.asd 5.asd
this flow is required in the website
For columns in css3, you have to have a div structure for that...
Html:-
<div class="table">
<div class="column">
<div class="row">1</div>
<div class="row">4</div>
<div class="row">7</div>
</div>
<div class="column">
<div class="row">2</div>
<div class="row">5</div>
<div class="row">8</div>
</div>
<div class="column">
<div class="row">3</div>
<div class="row">6</div>
<div class="row">9</div>
</div>
</div>
Css:-
.table { columns:3; -webkit-columns:3; -moz-columns:3; text-align:center }
.column { }
.row { background-color:red; }
Demo:- http://jsfiddle.net/5P9c4/1/
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/