<div class="row">
<div class="col-md-4">
<div class="laptop">
<img src="images/laptop.png" alt="" style="width: 16em;">
<p class="laptop-para">Météo Ravageurs Pytosanitaire</p>
</div>
</div>
<div class="col-md-4">
<div class="laptop">
<img src="images/laptop.png" alt="" style="width: 16em;">
<p class="laptop-para">Collecte et transmission de données</p>
</div>
</div>
<div class="col-md-4">
<div class="laptop">
<img src="images/laptop.png" alt="" style="width: 16em;">
<p class="laptop-para">Systèmes Electriques de commande</p>
</div>
</div>
</div>
I have 3 laptop images and paragraphs. I want to center the text inside each images is there any easy way to do that like positioning?
Just use the Laptop image as background of your divs:
background-image: url('./background-image.png');
You are able to adjust its position through the
background-position-x
background-position-y
properties.
You center the text inside the divs via
text-align: center;
Try This:
.laptop {
position: relative;
text-align: center;
}
p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #000;
text-align: center;
color: #FFF;
background-color: rgba(0,0,0,0.5);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-md-4">
<div class="laptop">
<img src="https://www.thinkingtech.in/wp-content/uploads/2017/06/razer-blade-hero-laptop-v2-1.png" alt="" style="width: 16em;">
<p class="laptop-para">Météo Ravageurs Pytosanitaire</p>
</div>
</div>
<div class="col-md-4">
<div class="laptop">
<img src="https://images-na.ssl-images-amazon.com/images/I/81p8pWMLI5L._SX425_.jpg" alt="" style="width: 16em;">
<p class="laptop-para">Collecte et transmission de données</p>
</div>
</div>
<div class="col-md-4">
<div class="laptop">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxoLOxqQJVbNVeY3w07pF8pK56mJFAgE6Xi_C0GkLuYRtsXE2t" alt="" style="width: 16em;">
<p class="laptop-para">Systèmes Electriques de commande</p>
</div>
</div>
</div>
here is the code for you :
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="utf-8">
<meta name="author" content="Vojtěch Matras">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<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.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid img-fluid">
<div class="row">
<div class="col-4"></div>
<div class="col-4" style="max-width: 100%; height: auto;"><img src="5.jpg"></div>
<div class="col-4"></div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-4"><center>you text goes here</center></div>
<div class="col-4"></div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-4" style="max-width: 100%; height: auto;"><img src="5.jpg"></div>
<div class="col-4"></div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-4"><center>you text goes here</center></div>
<div class="col-4"></div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-4" style="max-width: 100%; height: auto;"><img src="5.jpg"></div>
<div class="col-4"></div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-4"><center>you text goes here</center></div>
<div class="col-4"></div>
</div>
</div>
</body>
</html>
you can checkjsut resize the window:https://jsfiddle.net/k3tt2qa4/
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>
I want to put small images on bootstrap card. Half image will be outside of the card and half image will be inside of the card.
How can fix this?
Here is my code:-
<div class="row">
<div class="col-md-4">
<div class="img">
<img src="assets/images/images/brush.svg">
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5>Graphic Desiger</h5>
</div>
</div>
</div>
</div>
You can simply have some custom CSS to achieve this. Set your img to position absolute. And some margins to your main div
Demo
img {
margin-top: -50px;
width: 50%;
}
.col-md-4 {
margin-top: 50px;
}
.img {
position: absolute;
margin-left: 10em;
z-index: 999999;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-4">
<div class="img">
<img src="https://via.placeholder.com/150">
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5>Graphic Desiger</h5>
</div>
</div>
</div>
<div class="col-md-4">
<div class="img">
<img src="https://via.placeholder.com/150">
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5>Developer</h5>
</div>
</div>
</div>
<div class="col-md-4">
<div class="img">
<img src="https://via.placeholder.com/150">
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5>Front End</h5>
</div>
</div>
</div>
</div>
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
There are three 33% divs next to eachother. The 1st is an empty div, the 2nd a div containing four images, and the 3rd empty div.
How do I responsively keep these 3 blocks the same height? I'm using Foundation 6.
.block {
background: grey;
}
.block, .imgBlock {
height: 200px;
}
.imgBlock .row .column{
padding: 0;
}
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script>
<div class="row small-up-3">
<div class="column block">
</div>
<div class="column imgBlock">
<div class="row small-up-2">
<div class="column">
<img src="http://placekitten.com/200/150"/>
</div>
<div class="column">
<img src="http://placekitten.com/200/150"/>
</div>
<div class="column">
<img src="http://placekitten.com/200/150"/>
</div>
<div class="column">
<img src="http://placekitten.com/200/150"/>
</div>
</div>
</div>
<div class="column block">
</div>
</div>
Use foundation equalizer js. Here is your code using foundation equalizer:
Code:
$(document).foundation();
.block {
background: grey;
}
.block,
.imgBlock {
height: 200px;
}
.imgBlock .row .column {
padding: 0;
}
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/plugins/foundation.equalizer.js"></script>
<div class="row small-up-3" data-equalizer>
<div class="column block" data-equalizer-watch>
</div>
<div class="column imgBlock" data-equalizer-watch>
<div class="row small-up-2">
<div class="column">
<img src="http://placekitten.com/200/150" />
</div>
<div class="column">
<img src="http://placekitten.com/200/150" />
</div>
<div class="column">
<img src="http://placekitten.com/200/150" />
</div>
<div class="column">
<img src="http://placekitten.com/200/150" />
</div>
</div>
</div>
<div class="column block" data-equalizer-watch>
</div>
</div>
I have made a div structure by using bootstrap grid, however the div with background-color: red always dissapears after you resize the window and make it very small.
Why is this happening and is there a way to prevent it?
Play it: http://www.w3schools.com/code/tryit.asp?filename=F0JT60DW5CHG
.row-sm-3 {
height: 33.33%;
}
#wrap {
height: inherit;
background: red;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="col-sm-8 col-sm-offset-2" style="height:300px">
<!-- Black Container -->
<div class="col-sm-6" style="color: white; background:black; height: inherit;">
<div style="height: 25%;"><!-- space top --></div>
<div style="height: 50%;">
<div style="background:red">
<h2 id="sps_einleitung_h2">LOREM IPSUM</h2>
</div>
<div id="sps_einleitung_head_kasten_2">
LOREM IPSUM
<br><br>
LOREM IPSUM
</div>
</div>
<div style="height: 25%;"><!-- space bottom --></div>
</div>
<!-- Black Container -->
<div class="col-sm-6" id="wrap">
<div style="height: 33.33%;position: relative;">
<img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" style="width: 50px;position: absolute;">
</div>
<div style="height: 33.33%;position: relative;">
<img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" style="width: 50px;position: absolute;">
</div>
<div style="height: 33.33%;position: relative;">
<img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" style="width: 50px;position: absolute;">
</div>
</div>
</div>
<div class="col-sm-8 col-sm-offset-2" style="background-color:green; height:200px;">
<div class="row" style="height:inherit;">
<div class="col-sm-6" style="height:inherit; background-color:blue;">
<div class="row-sm-3 row">A</div>
<div class="row-sm-3 row">B</div>
<div class="row-sm-3 row">C</div>
</div>
<div class="col-sm-6" style="height:inherit; background-color:yellow;">
<div class="row-sm-3 row">D</div>
<div class="row-sm-3 row">E</div>
<div class="row-sm-3 row">F</div>
</div>
</div>
</div>
</div>
The red div is always getting under the blue div, why does that happen and how can I solve it?
Imagine you have a bottle of water which can have 1 liter but you want to fill it with 2 liter.
You can't have a parent div with a height of 300px and have 2 children in this which have also 300px. Reduce the height of both children or increase the height of the parent element.
I hope this helped you.
.row-sm-3 {
height: 33.33%;
}
#wrap {
height: inherit;
background: red;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="col-sm-8 col-sm-offset-2">
<!-- Black Container -->
<div class="col-sm-6" style="color: white; background:black; height: 300px;">
<div style="height: 25%;"><!-- space top --></div>
<div style="height: 50%;">
<div style="background:red">
<h2 id="sps_einleitung_h2">LOREM IPSUM</h2>
</div>
<div id="sps_einleitung_head_kasten_2">
LOREM IPSUM
<br><br>
LOREM IPSUM
</div>
</div>
<div style="height: 25%;"><!-- space bottom --></div>
</div>
<!-- Black Container -->
<div class="col-sm-6" id="wrap" style="height: 300px">
<div style="height: 33.33%;position: relative;">
<img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" style="width: 50px;position: absolute;">
</div>
<div style="height: 33.33%;position: relative;">
<img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" style="width: 50px;position: absolute;">
</div>
<div style="height: 33.33%;position: relative;">
<img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" style="width: 50px;position: absolute;">
</div>
</div>
</div>
<div class="col-sm-8 col-sm-offset-2" style="background-color:green;">
<div class="row" style="height:inherit;">
<div class="col-sm-6" style="height:300px; background-color:blue;">
<div class="row-sm-3 row">A</div>
<div class="row-sm-3 row">B</div>
<div class="row-sm-3 row">C</div>
</div>
<div class="col-sm-6" style="height:300px; background-color:yellow;">
<div class="row-sm-3 row">D</div>
<div class="row-sm-3 row">E</div>
<div class="row-sm-3 row">F</div>
</div>
</div>
</div>
</div>
Read more about height.
You have added fixed height to first row so that while resizing window second column from first row hide under second row. Add fixed height to two separate column from first row.
replace
<div class="col-sm-8 col-sm-offset-2" style="height:300px">
with
<div class="col-sm-8 col-sm-offset-2">
and
<div class="col-sm-6" style="color: white; background:black; height: inherit;">
with
<div class="col-sm-6" style="color: white; background:black; height: 300px;">
Have you tried changing the z-index?
ex
#wrap {
height: inherit;
background: red;
z-index:10000;
}'
use the css "clear:both" property