Bootsrap vertical bottom inside a div - html

How can I place the img to the bottom of the div?
<body>
<div class="container">
<div class="row" style="background-color: yellow; height: 600px;">
<div class="col-md-6">
<img src="img.png" alt="alt">
</div>
<div class="col-md-6">
Lorem ipsum
</div>
</div>
</div>
</body>
Thanks


The solution is:
HTML:
<div class="col-md-6 myclass">
<img src="img.png" class="bottom" width="300">
</div>
CSS:
.bottom{
position:absolute;
bottom:0;
}
.myclass{
height: 100%;
position:relative;
}

Related

How to put images and text inside boxes (html/css)?

Currently I have this (except only 3 boxes next to each other)
However, I am trying to put a small header, an image, and a small description within each box. How can I go about doing this?
Example image
Below the code snippet:
.block {
display: inline-block;
width: 200px;
height: 200px;
background-color: lightgray;
}
.container {
text-align: center;
}
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>

You can just add them as elements in your div:
.block {
display: inline-block;
width: 200px;
height: 200px;
background-color: lightgray;
}
.container {
text-align: center;
}
.block img {
width: 100px;
height: 100px;
}
<div class="container">
<div class="block">
<h3>Title 1</h3>
<img src="https://www.scania.org/wp-content/uploads/2018/10/article-10-2.jpg">
<p>Some text</p>
</div>
<div class="block">
<h3>Title 2</h3>
<img src="https://avatarfiles.alphacoders.com/121/121594.jpg">
<p>Some text</p>
</div>
<div class="block">
<h3>Title 2</h3>
<img src="https://i.imgur.com/8G3NXcW.gif">
<p>Some text</p>
</div>
</div>

You can just put them inside the "block" divs as elements. For example like this:
<div class="block">
<h1>Hello</h1>
<img src="asd">
<p>Some text, lorem etc.</p>
</div>
<div class="block">
<h1>Hello again</h1>
<img src="asd">
<p>Some epic text, lorem etc.</p>
</div>
<div class="block">
<h1>Hello hello</h1>
<img src="asd">
<p>Some even more exciting text, lorem etc.</p>
</div>

HTML PART
<div class="container">
<div class="block">
<div class="header">Title</div>
<div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
<div class="description">description</div>
</div>
<div class="block">
<div class="header">Title</div>
<div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
<div class="description">description</div>
</div>
<div class="block">
<div class="header">Title</div>
<div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
<div class="description">description</div>
</div>
<div class="block">
<div class="header">Title</div>
<div class="image"><img src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg" alt=""></div>
<div class="description">description</div>
</div>
</div>
CSS PART
.header {
width:100%;
float:left;
}
.image img {
width:100%;
float:left;
}
.description{
width:100%;
float:left;
}

Center Text on multiple images

I need to add centre text on multiple images of different sizes within their own tags in a container div.
This is how my HTML and CSS is setup
<section>
<div class="row ">
<div class="col ">
<div class="container gallery">
<img class="sports" src="img/block1Sports.jpg">
<h3 class="text1" >Sports</h3>
<img id="wellness" src="img/block2Wellness.jpg">
<h3 class="text1" >wellness</h3>
<img id="expeditions" src="img/block3Expeditions.jpg">
<h3 class="text1" >expeditions</h3>
<img id="games" src="img/block4Games.jpg">
<h3 class="text1" >games</h3>
<img id="culture" src="img/block5Culture.jpg">
<h3 class="text1" >culture</h3>
<img id="beauty" src="img/block6Beauty.jpg">
<h3 class="text1" >beauty</h3>
<img id="travelling" src="img/block7Travelling.jpg">
<h3 class="text1" >travelling</h3>
</div>
</div>
</div>
</section>
All these images have a single text messages which should all be centred, appreciate your help.
Here is a snap example of desired output

Instead of <img>, put your image in a div container using css background-image:url('');. Then use display:flex; (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) on this div to position your text vertically and horizontally centered.
HTML
<section>
<div class="row ">
<div class="col ">
<div class="container gallery">
<div class="imageWithCenteredText sports">
<h3 class="text1" >Sports</h3>
</div>
</div>
</div>
...
</div>
</section>
CSS
.imageWithCenteredText {
display:flex;
justify-content: center;
align-items: center;
}
.sports {
background-image: url('img/block1Sports.jpg');
width: 500px; /* PICTURE WIDTH */
height: 500px; /* PICTURE HEIGHT */
}

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.gallery-item {
position: relative;
}
.gallery-item img {
width: 100%;
}
.gallery-item h3 {
position: absolute;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<section>
<div class="row ">
<div class="col ">
<div class="container gallery">
<div class="gallery-item">
<img class="sports" src="img/block1Sports.jpg">
<h3 class="text1" >Sports</h3>
</div>
<div class="gallery-item">
<img id="wellness" src="img/block2Wellness.jpg">
<h3 class="text1" >wellness</h3>
</div>
<div class="gallery-item">
<img id="expeditions" src="img/block3Expeditions.jpg">
<h3 class="text1" >expeditions</h3>
</div>
<div class="gallery-item">
<img id="games" src="img/block4Games.jpg">
<h3 class="text1" >games</h3>
</div>
<div class="gallery-item">
<img id="culture" src="img/block5Culture.jpg">
<h3 class="text1" >culture</h3>
</div>
<div class="gallery-item">
<img id="beauty" src="img/block6Beauty.jpg">
<h3 class="text1" >beauty</h3>
</div>
<div class="gallery-item">
<img id="travelling" src="img/block7Travelling.jpg">
<h3 class="text1" >travelling</h3>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

Border Not Resizing With Image

I'm trying to fit a border around a resized image but it takes the dimensions of the original. How do I place a perfect border around an image?
HTML:
<div id="show">
<h1>Featured Items</h1>
<div class="row">
<div class="col-md-4" align="center">
<img src="C:\Users\Gabriel\Downloads\1.png">
</div>
<div class="col-md-4" align="center">
<img src="C:\Users\Gabriel\Downloads\1.png">
</div>
<div class="col-md-4" align="center">
<img src="C:\Users\Gabriel\Downloads\1.png">
</div>
</div>
</div>
CSS:
#show img {
padding-top: 50px;
max-width: 50%;
max-height: 50%;
border: solid 1px #6E4E34;
}

Remove the padding-top and the border will be flush with the img
#show img {
max-width: 50%;
max-height: 50%;
border: solid 1px #6E4E34;
}
<div id="show">
<h1>Featured Items</h1>
<div class="row">
<div class="col-md-4" align="center">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
<div class="col-md-4" align="center">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
<div class="col-md-4" align="center">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>
</div>
</div>

How to set child div 100% height of the parent (Foundation 6)?

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>

how to hide body content after the height of main div if body height is greater then div

I have a web page in which .blocks is 1000px height and <body> is 2000px i am using overflow:hidden to .blocks which is working fine but blank body is showing after it i want webpage height should be 1000px only after that it will hide content.
Here is my code:
HTML
<div class="blocks">
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
CSS
body{
height: 2000px;
}
.blocks{
height:1000px;
overflow:hidden;
}
.block{
background: #000;
height: 100px;
width: 100%;
margin-bottom: 10px;
}
Here is the fiddle with problem : https://jsfiddle.net/0b6g6886/2/

try this:
body{
height: auto;
}