I am a little stuck with creating this layout in Bootstrap 3's Grid:
http://oi62.tinypic.com/142sjt0.jpg
(Could not post image here due to rep)
This is where I got up to: http://www.bootply.com/7VrPUQwFAV
<div class="container">
<div class="row">
<div class="col-sm-3">
<img class="img-responsive" src="http://placehold.it/263x263" alt="">
<img class="img-responsive padding-top-30" src="http://placehold.it/263x556" alt="">
</div>
<div class="col-sm-6">
<img class="img-responsive" src="http://placehold.it/555x555" alt="">
<div class="row">
<div class="col-sm-12 col-sm-offset-6">
<img class="img-responsive padding-top-30" src="http://placehold.it/555x263" alt="">
</div>
</div>
</div>
<div class="col-sm-3">
<img class="img-responsive" src="http://placehold.it/526x526" alt="">
<img class="img-responsive padding-top-30" src="http://placehold.it/526x526" alt="">
</div>
</div>
</div>
Can anyone please help?
<div class="container">
<div class="row">
<div class="col-sm-3">
<img class="img-responsive" src="http://placehold.it/263x263" alt="">
<img class="img-responsive padding-top-30" src="http://placehold.it/263x556" alt="">
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-sm-8">
<img class="img-responsive" src="http://placehold.it/555x555" alt="">
</div>
<div class="col-sm-4">
<img class="img-responsive" src="http://placehold.it/263x263" alt="">
<img class="img-responsive" src="http://placehold.it/263x263" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<img class="img-responsive" src="http://placehold.it/263x263" alt="">
</div>
<div class="col-sm-8">
<img class="img-responsive" src="http://placehold.it/555x263" alt="">
</div>
</div>
</div>
</div>
</div>
Related
Hello i have a problem with my code :
<div class="row">
<div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
<div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
</div>
<div class="row">
<div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
<div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
</div>
And i have this result :
result bootstrap picture
And i want one other img likes this :
results final
How can i add other image with bootstrap for the final results ?
Thank you
As per my interpretation of your question, using a 2 columns inside a row and further dividing the first column into columns would work.
<div id="container">
<div class="row main">
<div class="col-8">
<div class="row">
<div class="col">
<img src="https://picsum.photos/300/600" class="img-fluid" alt="">
</div>
<div class="col">
<img src="https://picsum.photos/300/600" class="img-fluid" alt="">
</div>
</div>
<div class="row">
<div class="col">
<img src="https://picsum.photos/300/600" class="img-fluid" alt="">
</div>
<div class="col">
<img src="https://picsum.photos/300/600" class="img-fluid" alt="">
</div>
</div>
</div>
<div class="col-4">
<img src="https://picsum.photos/300/1200" class="img-fluid" alt="">
</div>
</div>
</div>
Demo: https://stackblitz.com/edit/js-tcjrtb
Correct me if my understanding of the question is wrong.
<div class="container">
<div class="row">
<div class="col"><img src="" alt="bloc1" /></div>
<div class="col"><img src="" alt="bloc1" /></div>
<div class="col"><img src="" alt="bloc1" /></div>
</div>
<div class="row">
<div class="col"><img src="" alt="bloc1" /></div>
<div class="col"><img src="" alt="bloc1" /></div>
<div class="col"><img src="" alt="bloc1" /></div>
</div>
</div>
This code should do the work. Simple application of bootstrap documentation
See Codepen example
I use Bulma with VueJS when I use v-for, all columns are on one line, I tried to addis-4, then the column width changes but they are still on one line
<div class='columns'>
<div class='column'
v-for='item in weatherData.list'
v-bind:key='item.data'>
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
...
</div>
</div>
</div>
</div>
Can anyone explain to me how it works?
Thanks!
EDIT
html output : https://jsfiddle.net/6rfo3dvL/2/
If you want columns to wrap you need to add the .is-multiline modifier to the .columns class. More information here
fiddle
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" />
<div class='columns is-multiline'>
<div class='column is-4'>
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
</div>
</div>
</div>
<div class='column is-4'>
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
</div>
</div>
</div>
<div class='column is-4'>
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
</div>
</div>
</div>
<div class='column is-4'>
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
</div>
</div>
</div>
<div class='column is-4'>
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
</div>
</div>
</div>
<div class='column is-4'>
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
</div>
</div>
</div>
<div class='column is-4'>
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
</div>
</div>
</div>
<div class='column is-4'>
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
</div>
</div>
</div>
</div>
I need to make a grid with 6 columns in full screen that size down to 2 columns on smaller/mobile. Here is what I have tried so far. It looks correct wide, on my laptop, but when smaller, iPhone or tablet, it shows 6 columns still with very tiny images.
<div class="row mb-3">
<div class="col filter bunarske">
<img class="img-fluid" alt="" src="references/logos/hardrock4.gif" /> </div>
<div class="col filter bunarske">
<img class="img-fluid" alt="Paragon Casino Resort" src="references/logos/paragon.jpg"> </div>
<div class="col filter bunarske">
<img class="img-fluid" alt="Tuscon Center" src="references/logos/USHomeLogo.jpg"> </div>
<div class="col filter bunarske">
<img class="img-fluid" alt="Choctaw Casino" src="references/logos/choctaw.jpg"> </div>
<div class="col filter bunarske">
<img class="img-fluid" alt="Trump 29 Casino" src="references/logos/trump29.jpg"> </div>
<div class="col filter bunarske">
<img class="img-fluid" alt="Kimberly Clark" src="references/logos/KimberlyClarkLogo.jpg"> </div>
</div>
<div class="clearfix"></div>
http://pscompetitiveedge.com/references-test.html
change col-xs-2 to col-xs-6.
You have to sum up to 12 , each "sum" of colums to 12 is put into one row - thats how it works.
Use this code
<div class="row flex-mb1">
<div class="col-xs-6 col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
<div class="col-xs-6 col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
<div class="col-xs-6 col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
<div class="col-xs-6 col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
<div class="col-xs-6 col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
<div class="col-xs-6 col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
<div class="img-fixed">
<img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
</a></div>
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix d-none d-sm-block"></div>
you can change col-xs-12 to col-xs-6 if want to keep 2 cols even in extra small screen
<div class="row">
<div class="col-xs-3">
<img src="image/t.png " class="img-responsive">
</div>
<div class="col-xs-9 ">
<img src="image/b.png " class="img-responsive">
</div>
</div>
I want b.png image to be right-align.
You just need to add .pull-right class.
So it will be like this example :
<div class="row">
<div class="col-xs-3">
<img src="image/t.png " class="img-responsive">
</div>
<div class="col-xs-9 ">
<img src="image/b.png " class="pull-right img-responsive">
</div>
</div>
Just add the pull-right bootstrap class
<div class="col-xs-9 ">
<img src="image/b.png " class="img-responsive pull-right">
</div>
I have 3 images within a row. Between each column, i'd like to add an arrow pointing to the next image.
How can I do this, while keep the existing images centered (so the middle one is in the middle of the page), and so it degrades nicely on smaller screens (disappears for instance)?
html:
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="col-sm-12" style="text-align: center;">EASY TO USE</h1>
<hr>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step1htc.mini.24.png" height="350px" width="240px" alt="">
</div>
<div class="img col-sm-1"><img class="img" src="../assets/img/arrow.png" alt=""></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step2htc.mini.24.png" height="350px" width="240px" alt="">
</div>
<div class="img col-sm-1"><img class="img" src="../assets//img/arrow.png" alt=""></div>
<div class="col-sm-3">
<img class="img" src="../assets/img/indevice/step3htc.mini.24.png" height="350px" width="240px" alt="">
</div>
</div>
</div>
</body>
</html>
EDIT: For clarification, I want to add arrows between the existing images in the html code above. The html/css above is already centered. Howver, i'd like to add 2 arrows between the 3 existing images.
EDIT: Please see this image to understand what I mean: http://imgur.com/YT2hnw4
EDIT: Changed html to show a full example, including css call.
Here you go
<div class="container">
<div class="row">
<h1 class="centered" style="text-align: center;">EASY TO USE</h1>
<hr>
<div class="col-md-3" style="margin-left:4.17%;">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
<div class="img col-md-1">
<img class="img" src="../assets/img/arrow.png" alt="">
</div>
<div class="col-md-3">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
<div class="img col-md-1">
<img class="img" src="../assets//img/arrow.png" alt="">
</div>
<div class="col-md-3">
<img class="img" src="image" height="350px" width="240px" alt="">
</div>
</div>
</div>
All i did is removed the extra col-md-1 class and instead added the margin of the same equivalance to the 1st element so that it stay in the center.