I have the following tiling setup. How do I go about filling the rest of the space that is available under the first tile with text Some Text to match the height of the two narrower tiles that follow? I'd like to expand the content area below the image to the height of the two tiles that follow to the right, have them all even.
<div class="tile is-ancestor">
<div class="tile is-parent is-6">
<div class="tile is-child ">
<figure>
<img src="https://bulma.io/images/placeholders/640x320.png">
</figure>
<div class="box">
<h1 class="title">One</h1>
<h6 class="subtitle is-7">Some Text</h6>
<nav class="level">
<div class="level-left">
<div class="level-item">
<font-awesome-icon :icon="iconUser" transform="shrink-3" class="icon-violet" />
dd
</div>
<div class="level-item">
Today
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child ">
<figure>
<img src="https://bulma.io/images/placeholders/640x320.png">
</figure>
<div class="box">
<h1 class="title">One</h1>
<h6 class="subtitle is-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque dictum semper. Donec ornare ullamcorper velit, sagittis venenatis neque varius mattis. Suspendisse et lectus sed neque tincidunt convallis. Curabitur feugiat diam non tortor
hendrerit, id mattis dui laoreet...</h6>
<nav class="level">
<div class="level-left">
<div class="level-item">
dd
</div>
<div class="level-item">
Today
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child ">
<figure>
<img src="https://bulma.io/images/placeholders/640x320.png">
</figure>
<div class="box">
<h1 class="title">One</h1>
<h6 class="subtitle is-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque dictum semper. Donec ornare ullamcorper velit, sagittis venenatis neque varius mattis. Suspendisse et lectus sed neque tincidunt convallis. Curabitur feugiat diam non tortor
hendrerit, id mattis dui laoreet...</h6>
<nav class="level">
<div class="level-left">
<div class="level-item">
dd
</div>
<div class="level-item">
Today
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
CSS
img
height: 160px
width: 100%
display: block
object-fit: cover
Related
I'm trying to change the order of columns on sm resolutions/devices in Bootstrap 4.1 but unfortunately nothing is happening. I'm using order prefix for Bootstrap 4.1. My html code looks like this. Can somebody help?
<div class="container-fluid office-spaces">
<div class="col-md-12 col-xs-12 first-layout">
<div class="col-md-6 order-2 order-md-1">
<div class="office-spaces-slider">
<div class="img-wrapper">
<img class="img-responsive" src="theme/images/interior2.jpg" alt="interior2">
</div>
</div>
</div>
<div class="col-md-4 order-1 order-md-2">
<div class="col-md-6 col-xs-12">
<hr>
<h3>OFFICE SPACES</h3>
</div>
<div class="col-md-6 col-xs-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis nibh
nibh, quis vehicula neque suscipit at. Sed dictum, sapien ut sagittis posuere,
massa metus vulputate lorem, ac egestas erat ante et lorem. Aenean facilisis
tincidunt lectus, tristique egestas erat fermentum nec. Vivamus vestibulum
metus et dui posuere convallis.
</p>
</div>
</div>
<div class="col-md-2 empty order-3 order-sm-3"></div>
</div>
</div>
In bootstrap 4, the column formats are as follows:
col-* --> mobile portrait mode
col-sm-* --> mobile landscape mode
col-md-* --> ipad portrait mode
col-lg-* --> ipad landscape mode
col-xl-* --> laptop mode,desktop modes
So you should use below format to be responsive in all devices:
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
</div>
and also always put the .row class after the .container class line:
<div class="row">
//ur column classes goes here
</div>
Using Bulma css framework, I try to make the notification box popup at about the center of the page, without interrupting existing data (it is a notification that pops for 3 seconds and then it should disappear). For example: 2 images on top of each other(snippet 1), and I want the notification box to float on top of them without pushing any content(snippet 2)
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="container">
<div class="level main">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</div>
</div>
<div class="container">
<div class="level main">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="container">
<div class="level main">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</div>
<div class="notification is-primary">
<button class="delete"></button> Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, consectetur adipiscing elit
</div>
</div>
<div class="container">
<div class="level main">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</div>
</div>
Simply give the notification position: absolute along with a z-index which is higher than the element you want it to sit on top of (1 will likely work fine):
.notification.is-primary {
position: absolute;
z-index: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet" />
<div class="container">
<div class="level main">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</div>
<div class="notification is-primary">
<button class="delete"></button> Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet, consectetur adipiscing elit
</div>
</div>
<div class="container">
<div class="level main">
<div class="level-item">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
</div>
</div>
</div>
I created a CSS rule like:
.top-of-the-world{
position: absolute !important;
z-index: 100 !important;
}
That way I do not alter Bulma's rules.
Then I added the class top-of-the-world to my notification
.notification.top-of-the-world
I have a list article in my blog. Show three columns.
The problem is: when the title of the article has 3 line. The columns are pushed down if have 4 article.
Like this:
article 1 article 2 article 3
article 4
It should be like:
article 1 article 2 article 3
article 4
My code like:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-4 pb-90">
<div class="post-prev-title">
<h3>New trends in web design</h3>
</div>
<div class="mb-30">
Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 pb-90">
<div class="post-prev-title">
<h3>10 The article have 2 line, it will break four item in this </h3>
</div>
<div class="mb-30">
Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 pb-90">
<div class="post-prev-title">
<h3>New trends in web design</h3>
</div>
<div class="mb-30">
Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 pb-90">
<div class="post-prev-title">
<h3>New trends in web design</h3>
</div>
<div class="mb-30">
Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
</div>
</div>
</div>
</div>
Note: click run code -> full page to show.
Or see my pen: https://codepen.io/vanloc/pen/RZqVXR
Have any method to resolve this problem?
The title is defined by the user, I can't control that.
You can Try Something Like This. Using this Multiline Ellipses
CSS
.post-prev-title h3
{
display: block;
display: -webkit-box;
-webkit-line-clamp: 1;/*restricting to 1 line*/
-webkit-box-orient: vertical;
overflow: hidden;
}
You can use a clearfix div to set the row correctly if the heights are uneven!
An example of that is documented here: https://getbootstrap.com/docs/3.3/css/#grid-responsive-resets
Or if you can use a LESS/SCSS mixin, that's demonstrated here: https://getbootstrap.com/docs/3.3/css/#less-mixins-clearfix
Here is that code snippet with the clearfix in. Please let me know if this isn't the solution you were looking for. Thanks!
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-4 pb-90">
<div class="post-prev-title">
<h3>New trends in web design</h3>
</div>
<div class="mb-30">
Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 pb-90">
<div class="post-prev-title">
<h3>10 The article have 2 line, it will break four item in this </h3>
</div>
<div class="mb-30">
Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 pb-90">
<div class="post-prev-title">
<h3>New trends in web design</h3>
</div>
<div class="mb-30">
Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
</div>
</div>
<!-- CLEARFIX DIV -->
<div class="clearfix visible-lg visible-md-block"></div>
<div class="col-sm-6 col-md-4 col-lg-4 pb-90">
<div class="post-prev-title">
<h3>New trends in web design</h3>
</div>
<div class="mb-30">
Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
</div>
</div>
</div>
</div>
I'm using Bulma 0.4.0, though the answer may not be associated with Bulma itself.
How can I set column height equal to others? (see codepen below)
Notice they are all in another column container, and there are few rows of those columns.
Expected behaviour: (woah i made optical illusion)
https://codepen.io/anon/pen/JNKexr
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
</head>
<body>
<div class="columns">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu consectetur lorem, nec facilisis dolor. Morbi rhoncus, mi sit amet ornare tincidunt, augue sem aliquet mauris, non pretium orci nisl at est. Curabitur placerat pharetra augue. Etiam non eros nulla. Praesent aliquet sem dui, id varius enim convallis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis mauris felis, sit amet consectetur augue sollicitudin id.
</div>
<div class="column">
<div class="columns">
<div class="column">
<p class="notification is-info">Lorem ipsum</p>
</div>
<div class="column">
<p class="notification is-success">Nulla a mauris vel </p>
</div>
</div>
<div class="columns">
<div class="column">
<p class="notification is-info">Lorem ipsum</p>
</div>
<div class="column">
<p class="notification is-success">Nulla a mauris vel </p>
</div>
<div class="column">
<p class="notification is-warning">Pellentesque
</p>
</div>
<div class="column">
<p class="notification is-danger">Morbi turpis nunc</p>
</div>
</div>
<div class="columns">
<div class="column">
<p class="notification is-info">Lorem ipsum dolor sit amet</p>
</div>
<div class="column">
<p class="notification is-success">Nulla</p>
</div>
<div class="column">
<p class="notification is-warning">Pellentesque eros tortor,
</p>
</div>
<div class="column">
<p class="notification is-danger">Morbi</p>
</div>
</div>
<div class="columns">
<div class="column">
<p class="notification is-info">Lorem ipsum dolor sit amet</p>
</div>
<div class="column">
<p class="notification is-success">Nulla</p>
</div>
<div class="column is-6">
<p class="notification is-warning">Pellentesque eros tortor,
</p>
</div>
</div>
</body>
</html>
Question is related to my previous one: How to set column height equal to longest column in Bulma (flexbox)?
edit: corrected title
edit2: it has something to do with align-content: stretch; class, though I'm have no idea how to use it. More info: http://cssreference.io/flexbox/#align-content
try to add the css code:
p.notification {
height: 100%;
}
I used the following CSS rule, this way I can use the class .is-equal-height to have aligned columns.
.columns.is-equal-height > .column > * {
height: 100% !important;
}
I have been trying to set up a grid using bootstrap 3 where all the columns will have the same height even with different content sizes - which I have accomplished using flexbox. But now I am trying to add a solid border to the bottom of each item in the grid and I just can't get it to work (I want a border on the bottom, with a gutter between grid elements).
I can do it easily on the top like: https://codepen.io/Wafflenaut/pen/dvzWzb
<div class="container-fluid">
<div class="row" style="display:flex; flex-flow: row wrap;">
<div class="col-xs-12 col-sm-4" >
<div style="border-top:5px solid; border-top-color:#df5400;">
But when I try it on the buttom I get a result like: http://codepen.io/Wafflenaut/pen/perPWL
<div class="container-fluid">
<div class="row" style="display:flex; flex-flow: row wrap;">
<div class="col-xs-12 col-sm-4" >
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
If I try it directly on the column divs I get a solid bar. So - I basically need to either get a gutter functioning between columns or to get a nested div to go full height. I’ve tried a number of solutions (various padding tricks, vh, etc.), which tend to either not work or to break responsiveness.
And the kicker - this is within a CMS which I lack any access to the css or js files - so everything I do has to be workable inline from within a section of the html body.
Any suggestions for avenues of attack?
You can add display: flex to the div with class="col-xs-12 col-sm-4"
codepen
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row" style="display:flex; flex-flow: row wrap;">
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<p>replace me</p>
<h2>Item 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu nisi fermentum, mollis massa quis, scelerisque elit. Donec nec viverra.</p>
</div>
</div>
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<h2>Item 2</h2>
<p>replace me</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris laoreet lectus est. Fusce lobortis, velit sed finibus volutpat, magna nibh porttitor justo, at ornare quam nunc eu nulla. Fusce lacinia.</p>
</div>
</div>
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<p>replace me</p>
<h2>Item 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu nisi fermentum, mollis massa quis, scelerisque elit. Donec nec viverra.</p>
</div>
</div>
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<h2>Item 4</h2>
<p>replace me</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu nisi fermentum, mollis massa quis, scelerisque elit. Donec nec viverra.</p>
</div>
</div>
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<h2>Item 5</h2>
<p>replace me</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu nisi fermentum, mollis massa quis, scelerisque elit. Donec nec viverra.</p>
</div>
</div>
<div class="col-xs-12 col-sm-4" style="display:flex;">
<div style="border-bottom:5px solid; border-bottom-color:#df5400;">
<p>replace me</p>
<h2>Item 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris laoreet lectus est. Fusce lobortis, velit sed finibus volutpat, magna nibh porttitor justo, at ornare quam nunc eu nulla. Fusce lacinia.</p>
</div>
</div>
</div>
</div>
Apply a height of 100% to each of the inline styles.
<div class="container-fluid">
<div class="row" style="display:flex; flex-flow: row wrap;">
<div class="col-xs-12 col-sm-4" >
<div style="border-bottom:5px solid; border-bottom-color:#df5400; height: 100%">