Using Bulma, I'd like a new row to be left-aligned when I make my window smaller. However, when I add a fifth column, this column goes to the middle of the page. When I add a 6th column, the fifth column goes to the middle of the left side of the page and the 6th column goes to the middle of the right side of the page.
So when I add the 5th column, this happens:
1..2..3..4
......5......
And when I add the 6th column, this happens:
1..2..3..4
...5....6...
But I want this to happen:
1..2..3..4
5..6..
Can this be done with Bulma? How? Or should I write css code?
.textWithBlurredBg{
width:192px;
height:256px;
display:inline-block;
position:relative;
transition:.3s;
margin:1px;
}
.textWithBlurredBg img{
width:100%;
height:100%;
transition:.3s;
border-radius:4px;
}
.textWithBlurredBg:hover img{
filter:blur(2px) brightness(60%);
box-shadow:0 0 16px cyan;
}
.textWithBlurredBg :not(img){
position:absolute;
z-index:1;
top:30%;
width:100%;
text-align:center;
color:#fff;
opacity:0;
transition:.3s;
}
.textWithBlurredBg h3{
top:70%
}
.textWithBlurredBg:hover :not(img){
opacity:1;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet"/>
<div class="columns is-multiline is-mobile">
<div class="column has-text-centered is-narrow">
<figure class="image textWithBlurredBg">
<img src="https://images.unsplash.com/photo-1519262113844-152510a1d98a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=11972b5dd562c360eeb4941abd19ca2e&auto=format&fit=crop&w=400&q=60">
<h2 class="title">Name</h2>
<h3 class="subtitle">Job Title</h3>
</figure>
</div>
<div class="column has-text-centered">
<figure class="image textWithBlurredBg">
<img src="https://images.unsplash.com/photo-1515621061946-eff1c2a352bd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=201965739764d1554eaa299d8a458d7d&auto=format&fit=crop&w=722&q=80">
<h2 class="title">Name</h2>
<h3 class="subtitle">Job Title</h3>
</figure>
</div>
<div class="column has-text-centered">
<figure class="image textWithBlurredBg">
<img src="https://images.unsplash.com/photo-1508341591423-4347099e1f19?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b83c9d9a71fa57a216d3343f40c3747c&auto=format&fit=crop&w=400&q=60">
<h2 class="title">Name</h2>
<h3 class="subtitle">Job Title</h3>
</figure>
</div>
<div class="column has-text-centered">
<figure class="image textWithBlurredBg">
<img src="https://images.unsplash.com/photo-1524828121784-0b7e1d73a23a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c0a4b85a56023ce08b1bc8af202400a8&auto=format&fit=crop&w=400&q=60">
<h2 class="title">Name</h2>
<h3 class="subtitle">Job Title</h3>
</figure>
</div>
<div class="column has-text-centered">
<figure class="image textWithBlurredBg">
<img src="https://images.unsplash.com/photo-1508341591423-4347099e1f19?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b83c9d9a71fa57a216d3343f40c3747c&auto=format&fit=crop&w=400&q=60">
<h2 class="title">Name</h2>
<h3 class="subtitle">Job Title</h3>
</figure>
</div>
<div class="column has-text-centered">
<figure class="image textWithBlurredBg">
<img src="https://images.unsplash.com/photo-1524828121784-0b7e1d73a23a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c0a4b85a56023ce08b1bc8af202400a8&auto=format&fit=crop&w=400&q=60">
<h2 class="title">Name</h2>
<h3 class="subtitle">Job Title</h3>
</figure>
</div>
</div>You can add the is-narrow class to your columns.
You can check out the results here.