I want to show list above the paragraph in small device and also in extra small device. I uses push-* and pull-* class that are available in bootstrap but its not working. please suggest. Thanks in advance.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-sm-push-6 col-xs-12 col-xs-push-12">
<p>Lorem ipsum dolor sit amet, mauris suspendisse viverra eleifend tortor tellus suscipit, etiam bibendum cras posuere pede placerat, velit neque felis. Turpis ut mollis, elit et vestibulum mattis integer aenean nulla. Dignissim neque, nulla neque. Ultrices proin mi urna nibh ut, aenean sollicitudin etiam libero nisl.</p>
</div>
<div class="col-md-8 col-sm-6 col-sm-pull-6 col-xs-12 col-xs-pull-12">
<ul class="list-unstyled">
<li>sse viverra eleifend tortor tellus suscipit</li>
<li>cras posuere pede placerat, velit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>sse viverra eleifend tortor tellus suscipit</li>
<li>cras posuere pede placerat, velit</li>
</ul>
</div>
</div>
</div>
If you want the list on top on small devices and to the right on medium devices you need to change the order of the elements in the DOM. Then you can use push and pull to do as you wish
Click the "Full page" button to see...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-push-6">
<ul>
<li>sse viverra eleifend tortor tellus suscipit</li>
<li>cras posuere pede placerat, velit</li>
<li>Lorem ipsum dolor sit amet</li>
<li>sse viverra eleifend tortor tellus suscipit</li>
<li>cras posuere pede placerat, velit</li>
</ul>
</div>
<div class="col-md-4 col-md-pull-6">
<p>Lorem ipsum dolor sit amet, mauris suspendisse viverra eleifend tortor tellus suscipit, etiam bibendum cras posuere pede placerat, velit neque felis. Turpis ut mollis, elit et vestibulum mattis integer aenean nulla. Dignissim neque, nulla neque. Ultrices proin mi urna nibh ut, aenean sollicitudin etiam libero nisl.</p>
</div>
</div>
</div>
Related
I'm trying to achieve the following two column layout using Bootstrap 4:
My problem is, when I add content to the right column, it "pushes" the left one below, like this:
Here's my code so far:
<div class="row">
<div class="col-md-6">A</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>
<div class="row">
<div class="col-md-6">B</div>
</div>
I'm not sure how to proceed next...
Technically, you should take 'B' part of the tag inside the 'A' tag and wrap both 'A' and 'B' with their own 'row' and 'col' tags.
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col">A</div>
</div>
<div class="row">
<div class="col">B</div>
</div>
</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec at orci porta, suscipit
felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis
aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat
orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim,
eget consequat sem dapibus nec.
</div>
</div>
You can achieve the structure you are asking for as below. You were just mistaking while placing row and columns.
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
A
</div>
<div class="col-md-12">
B
</div>
</div>
</div>
<div class="col-md-6">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at orci porta, suscipit felis at, facilisis dolor. Nulla turpis orci, congue ut quam eu, tincidunt pulvinar diam. Morbi iaculis aliquet libero nec sollicitudin. Praesent in erat in turpis aliquam rhoncus. Ut et augue iaculis, volutpat orci sed, auctor neque. Nam sit amet sollicitudin lorem, vel dapibus magna. Aliquam vestibulum eros enim, eget consequat sem dapibus nec.</div>
</div>
I want to display a list via "collapsible bootstrap panels" but I notice when I open certain panels they do not align properly.
E.g. when I open the first panel in the code all other panels move under each other under the second panel.
I want panel 3 and 4 to stay on their place in their grid when I open panel 1.
What am I doing wrong?
<div class="container">
<div class="row">
<div class="col-xs-6">
<div>
<a
href="#panel1"
class="btn btn-info"
data-toggle="collapse">Panel 1</a>
</div>
<div
id="panel1"
class="collapse">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent scelerisque, neque sit amet aliquam pulvinar, metus
arcu commodo sem, id volutpat erat nulla imperdiet enim. Proin
imperdiet dolor vitae lorem efficitur, non tincidunt nisi
accumsan. Nam condimentum mi ac auctor tincidunt. Fusce eget
tempus velit, in porta velit. Mauris vel ultrices ipsum. Nunc
rutrum vitae quam ut porta. Suspendisse diam sem, molestie sed
nisl id, imperdiet ornare libero. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Nam sagittis augue vitae iaculis
lacinia. Ut id eros egestas turpis vehicula feugiat ut eu
lectus. Ut eu consequat arcu, a porttitor magna.
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div>
<a
href="#panel2"
class="btn btn-info"
data-toggle="collapse">Panel 2</a>
</div>
<div
id="panel2"
class="collapse">
<div>
<p>Nunc vel lectus sit amet ante imperdiet aliquet non sit amet
felis. Vestibulum rhoncus rutrum ante nec sodales. Aliquam
vitae suscipit orci. Nam dignissim a purus vitae efficitur.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Nam libero augue,
scelerisque ut rhoncus eu, scelerisque a enim. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Ut luctus molestie lectus, ac dictum sem tempor
id.
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div>
<a
href="#panel3"
class="btn btn-info"
data-toggle="collapse">Panel 3</a>
</div>
<div
id="panel3"
class="collapse">
<div>
<p>Aliquam sit amet convallis nulla, quis dapibus elit. Aliquam
nisl justo, mollis et pulvinar ut, laoreet eu enim. Quisque
maximus scelerisque dui, aliquam posuere dolor consequat ut.
Nullam semper dictum urna et auctor. Donec lacus risus,
sagittis at vestibulum ac, dictum vitae mauris. Duis non velit
congue diam vulputate auctor a et libero. Duis a tortor
lobortis, suscipit orci eu, facilisis eros. Proin et faucibus
tortor, in finibus elit. Morbi suscipit porttitor justo
interdum euismod. In posuere leo velit, non egestas tortor
malesuada sit amet. Phasellus malesuada ultricies massa eget
volutpat.
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div>
<a
href="#panel4"
class="btn btn-info"
data-toggle="collapse">Panel 4</a>
</div>
<div
id="panel4"
class="collapse">
<div>
<p>Cras interdum dui sit amet nisi porttitor, iaculis cursus
tellus tincidunt. Praesent iaculis eget ipsum sed condimentum.
Fusce aliquam ipsum mauris. Donec laoreet dapibus efficitur.
Quisque in rhoncus dolor. Aliquam erat volutpat. Quisque eget
quam sed velit ultrices pellentesque. Vivamus neque arcu,
vestibulum in neque a, tincidunt sagittis lectus. Nullam nisi
nulla, semper non maximus sed, rutrum vel velit.
</p>
</div>
</div>
</div>
</div>
</div>
**Tyr With this**
<div class="container">
<div class="row">
<div class="col-xs-6">
panel1 Code
</div>
<div class="col-xs-6">
panel2 Code
</div>
</div>
<div class="row">
<div class="col-xs-6">
panel3 Code
</div>
<div class="col-xs-6">
panel4 Code
</div>
</div>
</div>
I'm wanting to display an image to the right of my text on desktop, but display the same image underneath on mobile. Struggling to find answers via Google and can't crack it myself.
Any help?
This is what I have so far.
Thanks!
I've tried using col-xs col-sm but doesn't achieve what I want
http://jsfiddle.net/ncyL2hat/
.text {
text-align: center;
color: black;
font-size: 30px;
}
<div class="container">
<div class="row">
<div class="row justify-content-md-center">
<div class="col-sm-6">
<div class="text">
<h1> Header</h1>
<h1> sub-header</h1>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec venenatis tortor, id luctus nisi. Mauris aliquet felis ac lacus venenatis, eget porttitor est finibus. Aenean mi odio, sollicitudin et quam ut, pharetra eleifend magna. Vestibulum
lorem metus, ultricies sed ipsum eget, vulputate rutrum enim. Aenean mattis sit amet justo nec hendrerit. Nulla quis volutpat tortor. Nunc ante enim, pharetra sed libero vitae, iaculis egestas nulla. Aenean ullamcorper, mauris vel ultricies
blandit, erat augue gravida dui, vitae aliquet urna eros eu tellus. Nunc sagittis mi ex, sed gravida dolor imperdiet nec.
</p>
</div>
</div>
<div class="col-sm-6">
<div class="text">
<img src="https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg" class="img-fluid" />
</div>
</div>
</div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Document</title>
<style type="text/css">
.text {
text-align: center;
color: black;
font-size: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="row justify-content-md-center">
<div class="col">
<div class="text">
<h1> Header</h1>
<h1> sub-header</h1>
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec venenatis tortor, id luctus nisi. Mauris aliquet felis ac lacus venenatis, eget porttitor est finibus. Aenean mi odio, sollicitudin et quam ut, pharetra eleifend magna. Vestibulum
lorem metus, ultricies sed ipsum eget, vulputate rutrum enim. Aenean mattis sit amet justo nec hendrerit. Nulla quis volutpat tortor. Nunc ante enim, pharetra sed libero vitae, iaculis egestas nulla. Aenean ullamcorper, mauris vel ultricies
blandit, erat augue gravida dui, vitae aliquet urna eros eu tellus. Nunc sagittis mi ex, sed gravida dolor imperdiet nec.
</p>
</div>
</div>
<div class="col">
<div class="text">
<img src="https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg" class="img-fluid" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
In the below code the division #content1 is initially being collapsed even after using "collapse in" class. What should I do to show the content of Column1 initially?
Note: I don't want to use any javascript function to handle this task
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12">
<h1> Column1 </h1>
<div id="content1" class="collapse in">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-8 col-xs-12">
<h1> Column2 </h1>
<div id="content2" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h1> Column3 </h1>
<div class="collapse" id="content3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
.in was used in bootstrap 3 (https://getbootstrap.com/docs/3.3/javascript/#collapse). In bootstrap 4 it's now .show (https://v4-alpha.getbootstrap.com/components/collapse/#example).
So you need to add the class .show to the div:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12">
<h1> Column1 </h1>
<div id="content1" class="collapse in **show**">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-8 col-xs-12">
<h1> Column2 </h1>
<div id="content2" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<h1> Column3 </h1>
<div class="collapse" id="content3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
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 screenshots below)
Edit: codepen with more text that presents actual behavior: https://codepen.io/anon/pen/vmKVbx
Expected behavior:
Actual behavior:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<div class="columns">
<div class="column">
<p class="notification is-info">First column</p>
</div>
<div class="column">
<p class="notification is-success">Second column</p>
</div>
<div class="column">
<p class="notification is-warning">Third column</p>
</div>
<div class="column">
<p class="notification is-danger">Fourth</p>
</div>
</div>
Here is a simple solution, by adding this CSS rule, and make sure it load after the Bulma CSS
.column {
display: flex;
}
Updated codepen
Stack snippet
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<style>
.column {
display: flex;
}
</style>
</head>
<body>
<div class="columns">
<div class="column">
<p class="notification is-info">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.</p>
</div>
<div class="column">
<p class="notification is-success">Nulla a mauris vel erat elementum scelerisque. Cras mollis consequat neque, vitae sagittis nisl dapibus porttitor. Donec et rutrum ligula. Donec luctus iaculis orci, nec imperdiet felis semper quis. Nulla a convallis eros, facilisis hendrerit risus. Nulla sit amet porta quam. Nullam maximus tempus sem, dapibus dapibus purus sollicitudin vel. Phasellus at rhoncus odio. Quisque sit amet ornare dolor. Maecenas accumsan viverra tristique. Etiam vulputate nibh ipsum, at rutrum lacus hendrerit ut. Nunc sodales diam purus, in ultricies nulla consectetur sit amet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ut tincidunt mauris.</p>
</div>
<div class="column">
<p class="notification is-warning">Pellentesque eros tortor, pharetra in lorem quis, maximus hendrerit ex. Praesent nunc ante, elementum at congue ut, ultricies quis lectus. Aenean vel elementum risus. Vestibulum aliquet justo in ligula dictum commodo. Nullam condimentum ante vitae nulla dignissim, vitae interdum neque dapibus. Aenean nec quam egestas, viverra ex vel, tempus lectus. Quisque eu euismod neque. Mauris aliquam neque a porta condimentum. Cras eget nisi turpis. Aenean lacus velit, dapibus eu aliquam eget, aliquet id quam. Integer ultricies est quis erat facilisis congue vel efficitur ipsum. Nunc id varius orci, consequat vehicula libero. Morbi maximus, orci in efficitur feugiat, quam lacus lobortis elit, in blandit mauris dolor sit amet mauris.
</p>
</div>
<div class="column">
<p class="notification is-danger">Morbi turpis nunc, porttitor ut bibendum et, tincidunt vel nisi. Ut magna massa, placerat id nunc at, venenatis sodales leo. Nunc dapibus, lacus ac molestie vestibulum, tortor mauris posuere turpis, at pretium orci orci in justo.</p>
</div>
</div>
</body>
</html>
In Bulma, you have got the class .is-flex to achieve the same.
I know it's a bit late, but maybe someone who looks for similar solution will find my answer helpful.
You can use Bulma's Tile system to get something that will behave like equal height columns.
<div class="tile is-ancestor">
<div class="tile is-horizontal">
<div class="tile is-parent">
<div class="tile is-child">
<!--Content here-->
</div>
</div>
<div class="tile is-parent">
<div class="tile is-child box">
<!--Content here-->
</div>
</div>
</div>
</div>
No additional css needed. You can also specify horizontal size of columns using is-1 - is-12 classes.
Check this pen to see this in action
This did the trick for me.
<div class="column">
<section class="section1">
...
</section>
</div>
.section1 {
height: 100%;
}
This works fine for me with this code:
<div class="columns">
<div class="column my-class">
one thing
</div>
<div class="column my-class">
many other <br><br><br> etc. things
</div>
</div>
<style>
.column.my-class {
display: inline-flex;
}
.column.my-class > div {
width: 100%; // only Edge needed this nonsense
}
</style>
Worked in Chrome 61.0.3163.100 (of course), Edge 40.15063.674.0, Firefox 57.0.
align-items: stretch http://cssreference.io/flexbox/
.columns {
flex-wrap: wrap;
align-items: stretch;
}
Ref: https://github.com/jgthms/bulma/issues/696
I noticed that making .column as flex broke the layout.
I solved with the following CSS rule, this way I can use the class .is-equal-height if I want aligned columns.
.columns.is-equal-height > .column > * {
height: 100% !important;
}