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;
}
Related
I need your help.
I have a column where there is some text. This must be in the center but aligned as shown below.
I tried adding a
display: inline-block; text-align: left
but it does not work.
I should have as shown below:
Other Lorem Stuff
> Lorem ipsum dolor sit amet
> Consectetur adipiscing elit
> Aenean laoreet lectus nec risus
malesuada auctor.
> Vestibulum pellentesque, ante sit
amet congue tempus
note that when the writings go back, they go under the writing and not under the > symbol
This is code:
.footsmall{
background-color: #FFF8DC;
top:-50px;
right: 100px;
height: 300px;
display: inline-block;
text-align: left
}
<div class="col-3 position-absolute footsmall text-center p-3">
<p class="fs-4">Other Lorem Stuff</p>
<p> > <u>Lorem ipsum dolor sit amet</u></p>
<p> > <u>Consectetur adipiscing elit</u></p>
<p> > <u>Aenean laoreet lectus nec risus malesuada auctor.</u></p>
<p> > <u>Vestibulum pellentesque, ante sit amet congue tempus</u></p>
</div>
Can anyone help me please?
You could use a flexbox container for each item.
<div class="d-flex">
<span>></span>
<p class="text-decoration-underline">Lorem ipsum dolor sit amet</p>
</div>
See the working snippet below:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-3 p-3 text-center">
<p class="fs-4">Other Lorem Stuff</p>
<div class="d-flex">
<span>></span>
<p class="text-decoration-underline">Lorem ipsum dolor sit amet</p>
</div>
<div class="d-flex">
<span>></span>
<p class="text-decoration-underline">Consectetur adipiscing elit</p>
</div>
<div class="d-flex">
<span>></span>
<p class="text-decoration-underline">Aenean laoreet lectus nec risus malesuada auctor.</p>
</div>
<div class="d-flex">
<span>></span>
<p class="text-decoration-underline">Vestibulum pellentesque, ante sit amet congue tempus.</p>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
A few things to note, rather than using display and text-align in your CSS you can just add the classes directly to your elements:
<div class="d-inline-block text-start"> </div>
Instead of paragraphs, you could use an unordered list and change the marker style to the chevron you want.
.custom-li {
list-style-type: '> ';
}
<div class="col-3 footsmall text-center">
<p class="fs-4 p-3">Other Lorem Stuff</p>
<ul class="text-start custom-li">
<li>
<u>Lorem ipsum dolor sit amet</u>
</li>
<li>
<u>Consectetur adipiscing elit</u>
</li>
<li>
<u>Aenean laoreet lectus nec risus malesuada auctor.
</li>
<li>
<u>Vestibulum pellentesque, ante sit amet congue tempus</u>
</li>
</ul>
</div>
Is that what you were after? Having the text not end up below your line markers?
I want to align the 2 different texts side and under the image as 1 article.
and want to put 2 articles in same row when the window size is col-md or bigger.
I want the second article to be displayed under the article 1 when the window size is smaller than col-sm.
I have tried the below code but I could not put them in same row.
How to put them in the same row?
<div class="row">
<div class = 'col-4 col-md-2'>
<img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
</div>
<div class="col-8 col-md-4">
<p>"aricle 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<p>"article 2 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
</div>
</div>
<div class="row">
<div class = 'col-4 col-md-2'>
<img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
</div>
<div class="col-8 col-md-4">
<p>"aricle 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<p>"aricle 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
</div>
</div>
You should use display:flex; for the row.For when screen size is less, you should consider #media queries.If you need anything else, please let me know.
#media all and (min-width:992px){
.art{
margin-left:80px;
}
}
#media all and (min-width:768px) and (max-width:991px){
.art{
margin-left:100px!important;
}
}
#media all and (min-width:768px){
.container{
display:flex;
flex-direction:row;
}
.row{
flex-direction:row;
}
}
.row{
display:flex;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="container-fluid">
<div class="row">
<div class ="col-4 col-md-2">
<img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
</div>
<div class="art col-8 col-md-6">
<p>"article 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<p>"article 2 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class ="col-4 col-md-2">
<img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
</div>
<div class="art col-8 col-md-6">
<p>"article 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<p>"article 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id."
</div>
</div>
</div>
</div>
</body>
</html>
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 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
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%">