I would like to put these two images side by side
Here is my code:-
code
<div class="container-md">
<div class="row">
<div class="col-md-4">
<p> Image Video Live Streaming </p>
<img src="" class="p-1 bg-dark" alt="" id="video" width="400" height="500" />
</div>
<div class="col-md-6">
<p> Depth Video Live Streaming </p>
<img src="" class="p-1 bg-dark" alt="" id="video" width="400" height="500" />
</div>
</div>
</div>
you code work perfectly with bootstrap 5. Added your code with dummy images in codepen.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
<p> Image Video Live Streaming </p>
<img src="https://images.pexels.com/photos/100582/pexels-photo-100582.jpeg?cs=srgb&dl=pexels-philipp-m-100582.jpg&fm=jpg" class="p-1 bg-dark" alt="" id="video" width="400" height="500" />
</div>
<div class="col-md-6">
<p> Depth Video Live Streaming </p>
<img src="https://images.pexels.com/photos/38136/pexels-photo-38136.jpeg?cs=srgb&dl=pexels-veeterzy-38136.jpg&fm=jpg" class="p-1 bg-dark" alt="" id="video" width="400" height="500" />
</div>
</div>
</div>
.row {
display: flex;
justify-content: space-around;
}
this is one way to do it using CSS.
Update:
There is now space around the two images.
Check out this URL to understand more about CSS Flexbox, and all the awesome things you can do !
Related
I would like to have a small thumbnail of a video, uploaded by user in a HTML webpage. When user clicks on it, it shows the video in the same webpage.
I tried this code:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/video/hanson.mp4"></iframe>
</div>
But it is not what I need.
Please note that the videos are not on youtube or so on. And there are numerous video files so the function should be able to create thumbnail from the address of the file on the server.
Is there any way to get thumbnail as I described?
Thanks.
For example this will work with thumbnails in Bootstrap.
Update: Set image src to https
function play(item){
var videoFiles = 'https://www.youtube.com/embed/';
var videoParam = 'autoplay=1&rel=0&showinfo=0&autohide=1';
document.getElementById('player').src = videoFiles + item + '?' + videoParam;
}
<!-- bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-wrap mx-auto" style="width:100%; max-width:400px;">
<div class="col-12 mb-4 player">
<div class="embed-responsive embed-responsive-16by9">
<!-- first item of playlist -->
<iframe id="player" class="embed-responsive-item" frameborder="0" width="560" height="315"
src="https://www.youtube.com/embed/1G4isv_Fylg?version=3&autoplay=0&rel=0&showinfo=0&autohide=1"
allow="autoplay; clipboard-write; encrypted-media" allowfullscreen></iframe>
</div>
</div><!--/.player-->
<div class="col-12 text-center playlist">
<div class="row">
<a class="col-3 mb-3" onClick="play('1G4isv_Fylg')" href="javascript:void(0)">
<img class="img-fluid w-100" src="https://img.youtube.com/vi/1G4isv_Fylg/0.jpg" alt="" />
<div class="card-body py-2"><small>Paradise</small></div>
</a>
<a class="col-3 mb-3" onClick="play('YlUKcNNmywk')" href="javascript:void(0)">
<img class="img-fluid w-100" src="https://img.youtube.com/vi/YlUKcNNmywk/0.jpg" alt="" />
<div class="py-2"><small>Californication</small></div>
</a>
<a class="col-3 mb-3" onClick="play('xik-y0xlpZ0')" href="javascript:void(0)">
<img class="img-fluid w-100" src="https://img.youtube.com/vi/xik-y0xlpZ0/0.jpg" alt="" />
<div class="py-2"><small>A Forest</small></div>
</a>
<a class="col-3 mb-3" onClick="play('1w7OgIMMRc4')" href="javascript:void(0)">
<img class="img-fluid w-100" src="https://img.youtube.com/vi/1w7OgIMMRc4/0.jpg" alt="" />
<div class="py-2"><small>Sweet Child Mine</small></div>
</a>
</div>
</div><!--/.playlist-->
</div>
Just need to add one thumbnail add click event also, I implemented this. look into it,
$(document).ready(function(){
$('#video-id,.demo-play-btn').click(function(){
$('#video-id').get(0).paused ? $('#video-id').get(0).play() : $('#video-id').get(0).pause();
$(".demo-play-btn").toggle();
});
});
.demo-play-btn{
position:absolute;
top:35%;
background:#fff;
left:35%;
cursor:pointer;
}
.demo-play-btn img{
width:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="demo-video">
<video id="video-id" width="470" height="255" poster="https://i.ytimg.com/vi/5Peo-ivmupE/maxresdefault.jpg">
<source src="https://st2.depositphotos.com/4083751/6003/v/600/depositphotos_60037637-stock-video-toddler-with-bottle-and-dummy.mp4" type="video/mp4">
</video>
<div class="demo-play-btn">
<img src="https://lh3.googleusercontent.com/proxy/9Oa4tg5B3DLeqAIsO_qRhmQg_pqtW3RtwBQJYdcv4e44lGfl4UReTpWpe5TDjlyJU3254RakFD48FPfsALnBI2cD6wxt8zMRNtrGEytVkMDHfLxBdiOG7JU-m0csf5RC6AY" class="play-btn" title="Play Video">
</div>
</div>
I have an assignment which I am required to make a website using html,css,and bootstrap. I am almost done in finishing the webpage but I am stuck in resizing the lightbox photo gallery. I want it to resize according to the screen size. Smaller screen = Smaller images. I tried setting the max-height and max-width of the images to 100% but it did not work.
at 100%:
at 200%:
at 300%:
Website: http://syphym.infinityfreeapp.com/TheOfficialPodcast.html
I want it to instead of making it 4 to 2 and 2 to 1 I want to resize it and maintain its original position
Sorry for the question but I really don't know how to fix this
code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>The Official Podcast</title>
<style>
*
{
margin: 0;
padding: 0;
}
#HomeScreen
{
background-image: url('Picture/Background.jpg');
background-size: cover;
background-position: center;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
padding: 0 20px;
}
.Theboys
{
background-color: black
}
.Title
{
text-align-last: center;
text-decoration: none;
color: #f2f2f2;
font-size: 50px;
font-family: sans-serif;
letter-spacing: 0.5px;
}
.name
{
background-color: black;
text-align-last: center;
text-decoration: none;
color: #f2f2f2;
font-size: 30px;
font-family: sans-serif;
letter-spacing: 0.5px;
}
.gap100
{
padding:70px 0px;
}
.resize img
{
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<header id="HomeScreen">
<section class="Theboys">
<div class="container">
<a href=#Official-Podacast>
<center>
<img src="https://i.ytimg.com/vi/jFqL8N3t97Y/maxresdefault.jpg" width="80%" height="80%" >
</center>
</a>
<div class="Title">
The Official Boys
</div>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card border-0">
<a class="lightbox" href="#Jackson">
<div class="resize">
<img src="Picture/Jackson.png" alt="img1" class="card-img-top">
</div>
</a>
<div class="name">
Jackson
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card border-0">
<a class="lightbox" href="#Andrew">
<div class="resize">
<img src="Picture/Andrew.png" alt="img1" class="card-img-top">
</div>
</a>
<div class="name">
Andrew
</div>
</div>
</div class="name">
<div class="col-md-6 col-lg-3">
<div class="card border-0">
<a class="lightbox" href="#Charlie">
<div class="resize">
<img src="Picture/Charile.png" alt="img1" class="card-img-top">
</div>
</a>
<div class="name">
Charlie
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card border-0">
<a class="lightbox" href="#Kaya">
<div class="resize">
<img src="Picture/Kaya.png" alt="img1" class="card-img-top">
</div>
</a>
<div class="name">
Kaya
</div>
</div>
</div>
</div>
</div>
</section>
</header>
<section>
<div class="container">
<div class = "row gap100">
<a name="Official-Podacast">
<div class="col-md-6">
<h2>The Official Podcast</h2>
<p>The Official Podcast is where four international man friends congregate to discuss just about everything. Featuring dumb questions, YouTube celebrities, childish giggling, burger puns, more dumb questions, fatherly advice, bad dating stories, even more dumb questions, and a slew of guest stars, The Official Podcast is a weekly show with a little something for everyone. Jackson, Andrew, Charlie, and Kaya gather to talk about only the most important things in life every Thursday at 8pm EST.</p>
<p>Listen to The Official Podcast:</p>
<ul>
<img src="Picture/Itunes.png" width="100" height="100">
<img src="Picture/Spotify.png" width="100" height="100">
<img src="Picture/Youtube.png"width="100" height="100">
</ul>
</div>
<div class="col-md-6">
<img src="Picture/TheBoys.jpg" class="img-fluid">
</div>
</a>
</div>
<div class = "row gap100">
<div class="col-md-6">
<a name="Jackson">
<img src="Picture/Jackson.jpg" class="img-fluid">
</div>
<div class="col-md-6">
<h2>Jackson Clarke</h2>
<p>Jackson Clarke is from australia he is the co-host of the Official podcast and he swears that he does not eat crayons anymore.</p>
<p>His internet name is Zealot he manges the editing of the podcast and the moist meter of charlie. He likes lego and dinasours and he is proud of it.</p>
<p>Watch his content:</p>
<ul>
<img src="Picture/Twitter.png" width="100" height="100">
<img src="Picture/Twitch.png" width="80" height="80">
<img src="Picture/Youtube.png"width="100" height="100">
</ul>
</div>
</a>
</div>
<div class = "row gap100">
<div class="col-md-6">
<a name="Andrew">
<h2>Andrew Wagenheim</h2>
<p>TAndrew’s notability on the internet comes twofold. He was originally known for his YouTube channel HuggbeesTV, a variety comedy channel, on which he continues to upload. </p>
<p>Several years later, he also began hosting The Official Podcast alongside Kaya Orsan, Jackson Clarke and Charlie White (known on YouTube as Cr1TiKaL). </p>
<p>Watch his content:</p>
<ul>
<img src="Picture/Twitter.png" width="100" height="100">
<img src="Picture/Twitch.png" width="80" height="80">
<img src="Picture/Youtube.png"width="100" height="100">
</ul>
</a>
</div>
<div class="col-md-6">
<img src="Picture/Andrew Hugbess.png" class="img-fluid">
</div>
</div>
<div class = "row gap100">
<div class="col-md-6">
<a name="Charlie">
<img src="Picture/Charlie.jpg" class="img-fluid">
</div>
<div class="col-md-6">
<h2>Charlie White</h2>
<p>Also known as Cr1TiKaL, he is a supremely popular gaming commentator who would earn an astounding 5 million subscribers with viral videos such as "The Most Difficult Game Ever Created Gameplay and Commentary," "The Real Mighty Thirsty" and "The Real Edge of Glory."</p>
<p>He also works on a side project called moist meter where he rate different games and movies.</p>
<p>Watch his content:</p>
<ul>
<img src="Picture/Twitter.png" width="100" height="100">
<img src="Picture/Twitch.png" width="80" height="80">
<img src="Picture/Youtube.png"width="100" height="100">
</ul>
</div>
</a>
</div>
<div class = "row gap100">
<div class="col-md-6">
<a name="Kaya">
<h2>Kaya Orsan</h2>
<p>He was born in Germany, but his family is from Turkey, where he spent half of his life and a half in Germany. For a while, he was in Turkey but he's back in Germany.</p>
<p>Kaya is known for drinking and going on rants about things that pisses him off. You can buy a poster with his special couger poster on it off the Official Podcast Patreon for $50,000.</p>
<p>Watch his content:</p>
<ul>
<img src="Picture/Twitter.png" width="100" height="100">
<img src="Picture/Twitch.png" width="80" height="80">
<img src="Picture/Youtube.png"width="100" height="100">
</ul>
</div>
</a>
<div class="col-md-6">
<img src="Picture/KayaOrsan.jpg" class="img-fluid">
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
When you use bootstrap with cols you should know that the page width is divided to 12.
for example, if you have 4 divs and each of them has col-3 it will place them in the same line.
But if you are trying to put 4 times col-6 in the same row, that would be a mistake (As you did, using col-md-6)
For what you asked, I would suggest changing the class to col-3 instead of col-md-6 col-lg-3 for each of the 4 divs
I have a problem with my friend's website which I can't solve. If you could help I'd be very pleased..
And the problem is:
My bootstrap div doesn't hold a height and is going under following div, especially in tablet/phone responsive version. Maybe it will be easier if I give you the address:
http://trido.io/index3.html
and the code I'm talking about is:
<section id="download" class="download bg-primary text-center">
<div class="container">
<div class='col-md-1'>
<!-- <img src="img/gify/pionNew.gif" alt="" align="center" /> -->
</div>
<div class='col-md-4'>
<div class="row">
<div class='col-md-1'>
</div>
<div class='col-md-9'>
<p align="center">TriDo - Do a chain of three!</p><br>
<p>Arrange your balls in order from 1 to 3:
horizontally, vertically or diagonally. Prevent opponent's arrangement of balls.</p><br><br>
</div>
</div>
<div class="row">
<ul>
<li>Multiplayer<li>
<li>Endless single-player mode<li>
<li>Game Center leaderboards<li>
<li>Game Center Achievements<li>
</ul>
</div>
</div>
<div class='col-md-1'>
</div>
<div class="col-md-5">
<div class="device-container">
<div class="device-mockup iphone6 portrait black">
<div class="device">
<div class="screen">
<!-- <video width="300" height="534" controls> -->
<video width="270" height="480" controls>
<source src="TrailerDoTel.mp4" type="video/mp4">
<source src="TrailerDoTel.ogg" type="video/ogg">
</video>
<div class="button">
</div>
</div>
</div>
</div>
</div>
</div>
<div class='col-md-0.5'>
<!-- <img src="img/gify/pionNew.gif" alt="" align="center" /> -->
</div>
</div>
</section>
This is because your <div class="device-mockup iphone6 portrait black"> is set to position absolute which takes the element out of the flow of the document, so its content will not affect other elements in the DOM.
If you set it to position: relative; it will no longer overlap the div below it.
Or you can give your .device-container a static height, like height: 676px;
I want to show image and header content in the same line , but its coming in different lines.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-12" align="center">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678110-sign-info-128.png" height="40px" width="40px" />
<h3 align="center">Water Quality :<span id="headerValue"> Good</span></h3>
</div>
</div>
</div>
if you don't want to add css, you can simply put the image inside the h3
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-12" align="center">
<h3 align="center"><img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678110-sign-info-128.png" height="40px" width="40px" /> Water Quality :<span id="headerValue"> Good</span></h3>
</div>
</div>
</div>
here it is:
HTML:
add .my-header class or something to your col-sm-12 element
<div class="container">
<div class="row">
<div class="col-sm-12 my-header" align="center">
<img src="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678110-sign-info-128.png" height="40px" width="40px" />
<h3 align="center">Water Quality :<span id="headerValue"> Good</span></h3>
</div>
</div>
</div>
CSS:
.my-header > img,
.my-header > h3{
display: inline-block
}
I have three images on my site that are not equally spaced apart.
I would like to space these three items evenly across the page.
I have tried adding them into a container and applying different span classes to them but with no joy.
What is the best way to solve this without causing problems elsewhere? (e.g. on smaller devices).
<div class="col-1 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
</a>
</div>
<div class="col-5 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
</a>
</div>
<div class="col-8 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
</a>
</div>
The images are not equally spaced because you have provided inappropriate column classes for second and third div's.
Use col-4 for second(instead of col-5) and col-7 for third(instead of col-8) div.
<div class="col-1 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
</a>
</div>
<div class="col-4 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
</a>
</div>
<div class="col-7 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
</a>
</div>
You might aswell want to provide extra padding to each div for small resolutions.
Additionally, as haxxxton mentioned in comments, you should rather stick to standard bootstarp-3 classes for better usability.
Cheers!
You may like the reactive behaviour of a flex based solution like in this JSFiddle:
http://jsfiddle.net/6tknc03s/
.container {
display:flex;
justify-content:space-around;
flex-wrap:nowrap;
}
.container img {
width:100%;
}
I've tested this solution in Chrome, compatibility in FF and iOS requires vendor specific prefixes to be added to the CSS I've used.
Your best bet is to put them in col-*-4 (I chose sm, but whatever works best for you) and make sure to add class="img-responsive" to the img element, like so:
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive">
</div>
</div>
</div>
Example: http://www.bootply.com/4lmpKkgENa
Try this out. it works i have edited your code with adding style to it.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
li {
display:inline;
list-style:none;
}
</style>
</head>
<body>
<div class="col-1 row-5 sizex-3 sizey-3">
<ul>
<li> <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
</a>
</li>
<li>
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
</a></li>
<li>
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
</a></li>
</ul>
</div>
</body>
</html>
Try this out:
<div class="row>
<div class-"container">
<div class="col-lg-4">
<img src="">
</div>
<div class="col-lg-4">
<img src="">
</div>
<div class="col-lg-4">
<img src="">
</div>
</div>
</div>