I've been trying to make an album images group, But there is a Big gap in the right side and won't be fit without using Padding, But when i use Padding it only fit for my PC resolution and becomes a bigger gap in other resolutions, Also if there is a picture bigger in resolution than the other images it wont resize itself of the main size, I've tried many ways but i just don't understand what should i change the height and width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="cards-deck">
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-block">
<img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<style>
.card-block {
display: flex;
align-items: center;
padding: 16px;
}
.card {
background-color: transparent;
border-width: 0px;
}
.row {
float: left;
}
</style>
</body>
</html>
Other devices LOOK
https://i.imgur.com/U2LtbFN.jpg
View Code: http://codepen.io/cbgraphics/pen/GrMYKQ
Looking at your code it appears that you are using Bootstrap. There are some built in tags that you didn't take advantage of.
I rebuilt a similar layout using lots of little tweaks to your code.
First - You need to wrap your content in the container class:
<div class="container">
Second - It is better if you put each card in a column div. These will automatically fill in your columns (assuming that the size of your images are all the same. <div class="col-md-3">
Third - I changed the padding to keep the grid spacing consistent.
You do not need to create a new row for each image. The current way you are using Bootstrap is trying to override the default functions and CSS that make it awesome.
More about the Bootstrap grid system: http://getbootstrap.com/css/#grid
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>
so here is my html :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-12">
<div class="container">
<div class="row bg-white">
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text">
some texts
<div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text">
some texts
<div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
as you can see i have a column which is set to col-lg-9 col-md-12 which i'm using it to have some sort of post loop in it. and each post gonna be the col-lg-4 col-md-6.
the problem is the first column works fine, it's full screen on medium sized devices but the second column doesn't act like it is expected on small devices. i set it col-md-6 so it will be half of the screen wide on tablets for example and be full screen on mobile phones. but it won't.it will be half of the screen wide on small screens as well.
i also tried to add col-sm-12 but same results again.
i looked diffrent topics,... most people didn't use .row which that isn't my case.
also i tried it without the second container and i got same results.
few days ago i bought a license ,also if you like to use it free you can use it some days and can assist you : pingendo.com
is nice bootstrap but ,sometimes to speed up the things you should get some improvements
..anyway the thinks can look good like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="theme.css" type="text/css">
</head>
<body>
<!--
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
<div class="row " draggable="true">
<div class="col-md-12">
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-12">
<div class="container">
<div class="row bg-white">
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text"> some texts <div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 p-2">
<div class="card">
<div class="card-img">
<img src="#image" class="img-fluid">
</div>
<div class="card-img-overlay">
<div class="card-title">
<h5>Title</h5>
</div>
<div class="card-text"> some texts <div class="dlbut p-2">
<center>
<h5>link</h5>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>-->
<!-- i did this with my Pingendo.com licensed -->
<div class="row" draggable="true">
<div class="col-md-6 col-12 col-sm-12 col-lg-6" >
<div class="card" >
<img class="card-img-top" src="https://picsum.photos/600/600?image=1074" alt="Card image">
<div class="card-body text-center">
<h4 class="card-title">John Catel</h4>
<p class="card-text">Some example text.</p>
See Profile
</div>
</div>
</div>
<div class="col-md-6 col-12 col-sm-12 col-lg-6">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/600/600?image=1074" alt="Card image">
<div class="card-body text-center">
<h4 class="card-title">John Catel</h4>
<p class="card-text">Some example text.</p>
See Profile
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Have you tried bootstrap 4 with
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
I am stuck at a point where i dont know where to go....I am trying to create a grid system for my website but not getting the desired output.
Here is the output structure which i want to create using Bootstrap 4:
My Code :
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<img src="img/home-banner-one.png" class="img-fluid" alt="Responsive image">
</div>
<div class="col-sm-8 col-md-8">
<div class="row">
<div class="col-sm-4">
Some text here
</div>
<div class="col-sm-8">
<img src="img/home-banner-two.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
Some Text Here
</div>
</div>
</div>
</section>
I will appreciate it if someone guide me the right direction.Have lack of knowledge about bootstrap grid system and column classes.
If you change both col-sm-4 to col-12 you will get two full width columns inside your row.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<img src="img/home-banner-one.png" class="img-fluid" alt="Responsive image">
</div>
<div class="col-sm-8 col-md-8">
<div class="row">
<div class="col-12">
Some text here
</div>
<div class="col-12">
<img src="img/home-banner-two.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
Some Text Here
</div>
</div>
</div>
</section>
You can divide your section / container into two columns (left/right) and then the right column into rows (text/image)
Something like below (see demo)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<!-- left column -->
<div class="col-xs-4">
<img src="https://placekitten.com/200/300" class="img-fluid" alt="Responsive image">
</div>
<!-- right column -->
<div class="col-xs-8">
<!-- first row -->
<div class="row">
<div class="col">
some text only on right column
</div>
</div>
<!-- second row -->
<div class="row">
<div class="col">
<img src="https://placekitten.com/300/100" class="img-fluid" alt="Resp. img">
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="row">
<div class="col-xs-12">
footer text that goes the width of the container
</div>
</div>
</div>
</section>
I am trying to build this kind i image grid using Bootstrap but I have some issue with understanding how to create the code. Here is an final example.
Here is my code until now
.border { border: 1px solid red; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="516" title="someText" alt="someText">
</div>
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
</div>
<div class="row">
<div class="col-md-8 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
<div class="col-md-4 border">
<img src="images/https://images-na.ssl-images-amazon.com/images/I/81EeCpMxY7L._SX355_.jpg" width="360" height="243" title="someText" alt="someText">
</div>
</div>
</div><!-- container -->
What you have is a row that has three columns in it. Two of those three columns have one column that have two rows.
Here is a basic example you can build off of.
.gallery .v-spacer {
margin-top: 30px; /* Default Bootstrap gutter (10px) x 2 */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row gallery">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<img class="img-responsive" src="http://placehold.it/600x400/FC0/">
</div>
</div>
<div class="row v-spacer">
<div class="col-sm-12">
<img class="img-responsive" src="http://placehold.it/600x400">
</div>
</div>
</div>
<div class="col-sm-4">
<img class="img-responsive" src="http://placehold.it/600x830">
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<img class="img-responsive" src="http://placehold.it/600x400">
</div>
</div>
<div class="row v-spacer">
<div class="col-sm-12">
<img class="img-responsive" src="http://placehold.it/600x400/FC0/">
</div>
</div>
</div>
</div>
Notice we continue to use .row and the column classes .col-**-** to maintain proper structure of the grid which use padding and negative margins to create the gutters (space) between the columns and their containers.
Edit You'll have a bit of an issue with the middle image if you try to make it responsive. The middle image will not always line up with the stacked images. This is because the total height of the stacked image columns is two variable heights plus a fixed height. The middle image won't be able to match that 100% because it's always a single variable height and won't be able to match the fixed height that's introduced in the stacked columns.
you should follow below grid structure
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="row">
<div class="col-md-12 border">
1
</div>
<div class="col-md-12 border">
2
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="row">
<div class="col-md-12 border long">
3
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="row">
<div class="col-md-12 border">
4
</div>
<div class="col-md-12 border">
5
</div>
</div>
</div>
</div>
</div>
see fiddle
can try with below code.
Demo: https://jsfiddle.net/uurzr45k/2/
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
Hi i'm at the beginning in Bootstrap framework.
I have this Html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/100x100" class="img-responsive">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1>Jane Doette</h1>
<h3>Front-end Ninja</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/1140x350" class="img-responsive">
</div>
</div>
<div class="col-md-12">
<h2>Featured Work</h2>
</div>
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/555x300"class="img-responsive">
<h3>Appify</h3>
<p>
Link to project
</p>
</div>
<div class="col-md-6">
<img src="http://placehold.it/555x300"class="img-responsive">
<h3>Appify</h3>
<p>
Link to project
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/555x300"class="img-responsive">
<h3>Appify</h3>
<p>
Link to project
</p>
</div>
<div class="col-md-6">
<img src="http://placehold.it/555x300"class="img-responsive">
<h3>Appify</h3>
<p>
Link to project
</p>
</div>
</div>
</div>
</body>
</html>
I want to add some margin on the right in the title,
---------------------------
| Image Title ++ Margin
| |
| |
| |
----------------------------
If i try to add some class in another css class like
.testclass{
margin-right:xxpx/zz%;
}
And i create a div in which i put the
I set the div's class to tesclass,the result is a complete mess!
I try also to style the div directly in html but the result still the same.
I really don't understand how handle the margin and padding properties inside the columns in bootstrap.
You can add a space or margin on the right by doing this:
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/100x100" class="img-responsive">
</div>
<div class="col-md-5 text-right text-uppercase">
<h1>Jane Doette</h1>
<h3>Front-end Ninja</h3>
</div>
<div class="col-md-1"></div>
</div>
Or you can just add padding-right: XXpx; to the col-md-6 with text.