I have a problem I want my pictures align like this:
and also it should be responsive but I cant achieve that help needed
Here is my source code:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user scalable=no">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
#img-one {
float: right;
}
#img-three {
float: right;
}
</style>
</head>
<body>
<div id="Image-Section">
<div id="img-one">
<img src="one.jpg" alt="Image" class="img-responsive" width="631" height="390">
</div>
<div id="img-two">
<img src="two.jpg" alt="Image" class="img-responsive" width="631" height="390">
</div>
<div id="img-three">
<img src="three.jpg" alt="Image" class="img-responsive" width="631" height="390">
</div>
<div id="img-four">
<img src="four.jpg" alt="Image" class="img-responsive" width="631" height="390">
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
I have aligned my picture using bootstrap and css and it is also responsive but its messing
You can try this, just instead of changing padding in css like i did you should change it in bootstrap customize
Demo: https://jsfiddle.net/2Lzo9vfc/173/
EDIT: Button https://jsfiddle.net/2Lzo9vfc/175/
HTML
<div class="container text-center">
<div class="row">
<div class="col-sm-6">
<img src="http://placehold.it/700x400" alt="" class="img-responsive">
</div>
<div class="col-sm-6">
<img src="http://placehold.it/700x400" alt="" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img src="http://placehold.it/700x400" alt="" class="img-responsive">
</div>
<div class="col-sm-6">
<img src="http://placehold.it/700x400" alt="" class="img-responsive">
</div>
</div>
</div>
CSS
.col-sm-6 {
padding-left: 0;
padding-right: 0;
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user scalable=no">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
#img-one {
float: right;
}
#img-three {
float: right;
}
.img-xxx{
width: 631px !important;
height: 390px !important;
}
</style>
</head>
<body>
<div id="Image-Section">
<div class="row">
<div id="" class="col-sm-5">
<img src="images/logo.png" alt="Image" class="img-responsive img-xxx" >
</div>
<div id="img-two" class="col-sm-5">
<img src="images/man1.jpg" alt="Image" class="img-responsive img-xxx">
</div>
</div>
<div class="row">
<div id="" class="col-sm-5">
<img src="images/man2.jpg" alt="Image" class="img-responsive img-xxx">
</div>
<div id="img-four" class="col-sm-5">
<img src="images/man3.jpg" alt="Image" class="img-responsive img-xxx">
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
try this
Related
I am trying to get two cards beside each other but no matter what I do they end up underneath each other. I have them in the same row, in the same container but it still won't work.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home page</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="search-bar.css" rel="stylesheet">
</head>
<body>
<div class ="container-fluid">
<div class="row">
<div class ="col-2" style="width: 170px;">
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
<div>
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home page</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="search-bar.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-2" style="width: 170px;">
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
<div>
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</body>
</html>
Try this,
Some containers removed. Your cards are now in a column each and both columns are inside a row.
col-6 will make the columns 50% width each, you can make them thinner or wider using col-1 to col-12. The cards will also fill that width as long as you do not dictate any card sizes in your CSS!!
Adding class="img-fluid" to the images and removing the styled size you entered will make the images stay at the column width no matter the screen size.
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="card">
<img src="http://placehold.jp/150x150.png" class="img-fluid" alt="Avatar">
<h6><b>John Doe</b></h6>
</div>
</div>
<div class="col-6">
<div class="card">
<img src="http://placehold.jp/150x150.png" class="img-fluid" alt="Avatar">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
</div>
You have two syntax errors:
An extra div closer </div>
and extra body closer </body>
I added class="col" to the second card div
Note by using the forced width on the first column, on small screens you may not see all of that image in columns 1 and 2 set by col-2 you have.
I removed some style= and made classes instead (always try to style wit CSS and classes
We have NO idea what your CSS file does and now this may impact answers negatively. This is the main reason I left some of the markup I would normally NOT do such as the containers around the text on the cards.
.first-column {
width: 170px;
}
.card-image {
height: 150px;
width: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home page</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="search-bar.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-2">
<div class="card first-column">
<img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image">
<div class="container">
<h6><b>John Doe</b></h6>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Second example with standard card use
.card-image.card-img-top {
width: 100%;
height: 150px;
}
.card-img-top {
width: 100%;
}
.card-title {
font-weight: bold;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<body>
<div class="container-fluid">
<div class="d-flex">
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image card-img-top">
<div class="card-body text-center">
<h6 class="card-title">John Doe</h6>
</div>
</div>
<div class="card">
<img src="http://placehold.jp/150x150.png" alt="Avatar" class="card-image card-img-top">
<div class="card-body text-center">
<h6 class="card-title">John Doe</h6>
</div>
</div>
</div>
</div>
</body>
new web developer and i am stuck with images alignment that i am trying to add to my page.I added the images just fine but i want the images to cover the whole space of the previous div i don't care about the aspect ratio but only alignment.
<!DOCTYPE html>
<html>
<head>
<title>test file</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg" class="img-thumbnail">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2014/06/11/17/00/cook-366875_960_720.jpg" class="img-thumbnail">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/06/25/12/48/go-pro-1478810_960_720.jpg" class="img-thumbnail">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="images/" class="img-thumbnail imgL">
</a>
</div>
</div>
</div>
</body>
</html>
I want the images to cover whole blue space
change your HTML to this.
<!DOCTYPE html>
<html>
<head>
<title>test file</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<style>
.full_height {
height: 250px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg" class="img-thumbnail full_height">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2014/06/11/17/00/cook-366875_960_720.jpg" class="img-thumbnail full_height">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/06/25/12/48/go-pro-1478810_960_720.jpg" class="img-thumbnail full_height">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="images/" class="img-thumbnail imgL">
</a>
</div>
</div>
</div>
</body>
</html>
Since the images are not of equal aspect ratios, it won't be possible to align them completely without distortion or cropping. With distortion, the following can be done
<!DOCTYPE html>
<html >
<head>
<title>test file</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg"class="img-thumbnail" style="height: 180px; width: 100%">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2014/06/11/17/00/cook-366875_960_720.jpg" class="img-thumbnail" style="height: 180px; width: 100%">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/06/25/12/48/go-pro-1478810_960_720.jpg" class="img-thumbnail" style="height: 180px; width: 100%">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="images/" class="img-thumbnail imgL">
</a>
</div>
</div>
</div>
</body>
</html>
Maybe this solves your problem.
object-fit property is used to specify how an img should be resized to fit its container (https://www.w3schools.com/css/css3_object-fit.asp)
<!DOCTYPE html>
<html>
<head>
<title>test file</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<style>
.fixHeight{
height: 100%;
width: 100%;
object-fit: cover;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg" class="img-thumbnail fixHeight">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2014/06/11/17/00/cook-366875_960_720.jpg" class="img-thumbnail fixHeight">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/06/25/12/48/go-pro-1478810_960_720.jpg" class="img-thumbnail fixHeight">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="#">
<img src="images/" class="img-thumbnail imgL">
</a>
</div>
</div>
</div>
</body>
</html>
You can try the following. Hope to help, my friend :))
<style>
.img-thumbnail {
height: 100%;
}
</style
<div class="col-lg-4 col-sm-6 img-holder">
<a href="#">
<img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg" class="img-thumbnail">
</a>
</div>
Based from your initial code. You may just add a class e.g .img-holder with the following values:
.img-holder {
overflow: hidden;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: .25rem;
height: 250px;
}
To fill up the blue space you are referring to, you may just have the following value for the img tag.
.img-thumbnail {
max-height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>...</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- My Styles -->
<style>
.boxWrap {
position: relative;
}
.boxItem {
position: absolute;
}
h1 {
color: white;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 boxWrap">
<div class="boxWrap">
<img src="01.png" class="img-fluid boxItem" alt="">
</div>
</div>
<div class="col-12 boxWrap">
<div class="boxWrap">
<img src="01.png" class="img-fluid boxItem" alt="">
</div>
</div>
<div class="col-12 boxWrap">
<div class="boxWrap">
<img src="01.png" class="img-fluid boxItem" alt="">
<h1 class="boxItem">hello</h1>
</div>
</div>
<div class="col-12 boxWrap">
<div class="boxWrap">
<img src="01.png" class="img-fluid boxItem" alt="">
<h1 class="boxItem">hello</h1>
</div>
</div>
</div>
</div>
</body>
</html>
Ok so I've been trying to put text inside and image by using the position property in CSS. Basically, I gave the image's parent a value of "relative" and a value of "absolute" to the images. It turns out that no matter how many element I put "after" the first "boxWrap" div, they always get placed on top of first div with that class. How can I restore the normal flow of the page?
The problem is that if everything inside an element is positioned absolutely, the element effectively no longer has any content, so its height will be 0.
In other words, all your boxWrap divs have height 0 and the imgs inside are all on the same spot in the window, overflowing out of their divs.
Solution: don't position the images absolutely, so that they do take up space in the divs, and place the absolutely positioned texts in the right position by using top and left.
.boxWrap {
position: relative;
}
.boxItem {
/* no styles for boxItem */
}
/* new class boxText */
.boxText {
position: absolute;
left: 0; top: 0;
color: white;
}
<div class="container-fluid">
<div class="row">
<div class="col-12 boxWrap">
<div class="boxWrap">
<img src="http://placehold.it/200x100" class="img-fluid boxItem" alt="">
</div>
</div>
<div class="col-12 boxWrap">
<div class="boxWrap">
<img src="http://placehold.it/200x100" class="img-fluid boxItem" alt="">
</div>
</div>
<div class="col-12 boxWrap">
<div class="boxWrap">
<img src="http://placehold.it/200x100" class="img-fluid boxItem" alt="">
<h1 class="boxText">hello</h1>
</div>
</div>
<div class="col-12 boxWrap">
<div class="boxWrap">
<img src="http://placehold.it/200x100" class="img-fluid boxItem" alt="">
<h1 class="boxText">hello</h1>
</div>
</div>
</div>
</div>
I would like to align images in my code to the right, so that I have to boxes, in two rows both aligned to their sides, left and right With text and links under them, I tried alot of Things amongs others, float, but it never worked without some problem
this is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,intial-scale=1">
<title>Marko's portfolio</title>
<link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/100x100" class="img-responsive logo" alt="Responsive image">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1>Name</h1>
<h3>Front-end Ninja</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr class="line">
</div>
</div>
<div class="row">
<div class="col-md-12">
<img class="img-responsive picture" alt="Responsive image" src="images/ideja.jpg">
</div>
</div>
<div class="row text-center">
<div class="col-md-12">
<h2>Featured Work</h2>
</div>
</div>
<div class="row text-thin text-center">
<div class="col-md-6">
<img src="http://placehold.it/555x300" class="img-responsive" alt="Responsive image" data-toggle="modal" data-target="#project1">
<h3>Appify</h3>
<p>Link to project</p>
</div>
<div class="col-md-6">
<img src="http://placehold.it/555x300" class="img-responsive" alt="Responsive image">
<h3>Appify</h3>
<p>Link to project</p>
</div>
</div>
<div class="row text-thin text-center">
<div class="col-md-6">
<img src="http://placehold.it/555x300" class="img-responsive center-block" alt="Responsive image">
<h3>Appify</h3>
<p>Link to project</p>
</div>
<div class="col-md-6">
<img src="http://placehold.it/555x300" class="img-responsive center-block" alt="Responsive image">
<h3>Appify</h3>
<p>Link to project</p>
</div>
</div>
</div>
and this is css
body { font-family: 'Fredericka the Great', cursive;
}
.display {}
.text-thin{font-size: 14px;
}
.line {border-top-width:0px;height:2px;background-color:rgb(42,35,35);
}
.logo { margin-top:20px;
}
.picture { width:1440px; height:500px;}
Thank you!
you can use margin-left with % like so :
.logo {
margin-top:20px;
margin-left: 40%;
}
for the other images :
.col-md-6 img {
margin-left: 10%;
}
edit regard to your comment you want the image to fit the hole size of the container , so you do like follow :
.col-md-6 img {
width: 100%;
height: 100%;
}
Live demo
I think you should apply a clearfix or just precise overflow of box and set img float right and text in an container float left like:
<div class="col-md-6 clearfix project">
<img src="http://placehold.it/555x300" alt="Responsive image">
<div class="description">
<h3>Appify</h3>
<p>Link to project</p>
</div>
</div>
And css:
.project {
overflow: hidden;
}
.project .description {
float: left;
}
.description {
float: left;
}
I am having some problems creating this layout:
1: I want to keep the grid layout no matter the size of images that will be dynamicaly generated.
2: Images should keep their aspect ratio (if possible , crop them),
Demo.
This is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/450x450" class="img-responsive">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/200x250" class="img-responsive">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/1350x500" class="img-responsive">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
<div class="col-xs-6">
<a href="#" class="thumbnail">
<img src="http://placehold.it/350x150" class="img-responsive">
</a>
</div>
</div>
</body>
</html>
CSS
.thumbnail {
overflow: hidden;
}
Your grid lacks the use of multiple rows. Each row needs exactly 12 columns. I added the missing two rows:
http://jsbin.com/cekojaxu/1/