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>
Related
This question already has an answer here:
How can I center columns in Bootstrap 5?
(1 answer)
Closed 13 days ago.
I have some Bootstrap 5 columns with some text in them. This specific page has an odd number of columns (7) that need to be displayed on a desktop view like this:
4 columns (top row)
3 columns (bottom row)
The issue is that the bottom row should be centered, but since the previous row already has 4 columns that seems an impossible task with default Bootstrap 5 helpers.
Here's my current code (jsfiddle link):
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container">
<div class="row g-4">
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
</div>
</div>
And here is the visual comparisson of what's being displayed, and what's actually needed:
Any ideas on how to achieve this? Thanks!
Bootstrap 5 rows are flexbox containers. Simply use the appropriate flex alignment classes on the row to center the columns. justify-content-center does nicely.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="container">
<div class="row g-4 justify-content-center">
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<img src="https://dummyimage.com/60x60/000/fff.png" width="60" height="60" alt="">
<div class="item">
<div class="title">Item title</div>
<p>Text of item with some description on it.</p>
</div>
</div>
</div>
</div>
I've been experimenting with some of the sample code in the documentation, and in particular laying out three cards in a row.
When I cut'n paste the code into my component page I'm not getting the expected outcome.
<div class="main-container">
<div class="alert alert-app-level">
...
</div>
<header class="header header-6">
<div class="branding">
<a href="" class="nav-link">
<img alt="" src="assets/logo2.png" height="60">
<span class="title">Good day</span>
</a>
</div>
<div class="header-actions"></div>
<form class="search">
<label for="search_input">
<input id="search_input" type="text" placeholder="Search for keywords...">
</label>
</form>
<div class="header-actions">
<clr-dropdown>
<button class="nav-text" clrDropdownTrigger aria-label="open user profile">
john.doe#vmware.com
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
<a href="..." clrDropdownItem>Preferences</a>
<a href="..." clrDropdownItem>Log out</a>
</clr-dropdown-menu>
</clr-dropdown>
</div>
</header>
<div class="content-container">
<div class="clr-row">
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 1</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 1
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 2</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 2
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 3</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 3
</div>
</div>
</div>
</div>
</div>
</div>
I was expecting three equally sized cards across the web page. Instead I get...
Do I need to install Bootstrap for this to work?
TIA
You are almost there, you are missing one important element in your page structure. The Cards are good, but you need to add <div class="content-area"> just inside of your <div class="content-container"> element.
<div class="content-container">
<div class="content-area"> <!-- THIS IS MISSING -->
<div class="clr-row">
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 1</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 1
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 2</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 2
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 3</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 3
</div>
</div>
</div>
</div>
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 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
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>