This is a very simple question - but I can't figure it out from reading the Bulma docs.
I have the following layout:
<div class="columns is-mobile">
<div class="column">
<textarea></textarea>
<button></button>
</div>
<div class="column">
<div></div>
</div>
</div>
I want the textarea and button to stack vertically instead of horizontally. I know I can use the display: block attribute to achieve the correct behavior - but considering Bulma is based on flexbox, I would think there is a better way to vertically align elements using flexbox based attributes. I tried setting flex-direction to column in the root element, but it didn't work.
Bulma takes care of that with .textarea class.
Solution based on Bulma:
Add .textarea class in textarea tag.
<div class="columns is-mobile">
<div class="column">
<textarea class="textarea"></textarea>
<button>Click me</button>
</div>
<div class="column">
<div></div>
</div>
</div>
Alternative:
Add these CSS attributes to your textarea:
display:flex;
flex-direction:column;
A good practice is:
Form tags should be wrapped in a .control container.
When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.
<div class="field">
<div class="control">
<textarea class="textarea"></textarea>
<button>Click me</button>
</div>
</div>
Related
I'm using Bulma (and Buefy with Vue) and I've got a panel with a series of items defined like this:
<template>
<div v-if="user">
<nav class="panel">
<p class="panel-heading">
Cities
</p>
<div class="panel-block" v-for="c in user.cities">
<div class="is-pulled-left">{{c}}</div>
<div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
</div>
</nav>
</div>
</template>
That looks like this:
How do I get it so the buttons are aligned on the right, not the left?
2021 Update: Newer versions of bluma have their flex box helpers. You can just add a single class to our panel-block to achieve this effect. Use is-justify-content-space-between like so:
<div class="panel-block is-justify-content-space-between" v-for="c in user.cities">
<div class="is-pulled-left">{{c}}</div>
<div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
</div>
Use justify-content: flex-end
Just by inspecting the html, we can see that the Bulma class panel-block applies a justify-content: flex-start to all it's child elements. This means that even if you apply is-pulled-right to the inner divs, everything will always be positioned left. Applying justify-content: flex-end to the outer parent container will force everything to the right. So, in short, you can override some of Bulma's default styling to get what you want.
.end {
justify-content: flex-end !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div>
<nav class="panel">
<p class="panel-heading">
Cities
</p>
<div class="panel-block end">
<div class="">New York</div>
</div>
<div class="panel-block end">
<div class="">London</div>
</div>
<div class="panel-block end">
<div class="">Paris</div>
</div>
</nav>
</div>
Try wrapping them in a column class.
For example:
<div class="panel-block" v-for="c in user.cities">
<div class="column is-6">
<div class="is-pulled-left">{{c}}</div>
<div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
</div>
</div>
See Bootply for explanation
In my demo above, try to hover on the first box, others get affected. I expect it would be flexible like pinterest layout. I tried overflow and height thing but it doesn't solve my problem.
I wouldn't want to change the markup as it suits my case perfectly.
You'll need to use Bootstrap's column reset element between pairs of boxes, and hide them for mobile:
<div class="row">
<div class="col-lg-6">
<div class="productWrap"></div>
</div>
<div class="col-lg-6">
<div class="productWrap"></div>
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix hidden-xs-block"></div>
<div class="col-lg-6">
<div class="productWrap"></div>
</div>
<div class="col-lg-6">
<div class="productWrap"></div>
</div>
...
</div>
Demo
http://getbootstrap.com/css/#grid-responsive-resets
As was suggested, rows would also work. To the contrary of your comment above, you can use nested rows and not affect your orange box sidebar.
I'm having a really simple problem with css but the solution is not coming to me. It's about positioning elements in a grid, I want the grid elements to look like this, but instead they are coming out to look like this. I tried putting one tag inside the other and then attempting to remove the box model from it (margin and padding) but the div is offset. I've tried nesting both inside a div tag but that doesn't work either.
I attempted to do a jsfiddle but it's not loading correctly. Fiddle . required random code below of the html.
<div class="container">
<div class="row">
<div class="col-md-12" style="height:85.3px">empty top</div>
</div>
<div class="row">
<div class="col-md-4" style="height:85.3px">logo</div>
<div></div>
<div class="col-md-7" style="height:40px">head text
<div class="col-md-7" style="margin-left:0px;padding-left:0px;margin-top:40px;box-sizing:border-box;">nav</div>
</div>
</div>
</div>
Just fyi the bootstrap col-md-1 through col-md-12 are bootstraps grid positioning system. I think they have to add up to 12 to form a single line. Here is the bootstrap html i am using.
and the grid css . and bootstrap
Your jsfiddle is not displaying correctly because the default iframe size is too small, but you can change the width to view the page in a manner consistent with your problem. Your problem is that you have a div nested inside another div by mistake. Try the following instead:
<div class="container">
<div class="row">
<div class="col-md-12" style="height:85.3px">empty top</div>
</div>
<div class="row">
<div class="col-md-4" style="height:85.3px">logo</div>
<div class="col-md-8" style="height:45.3px">head text</div>
<div class="col-md-8" style="height:40px;">nav</div>
</div>
</div>
<!-- /container -->
I am using Bootstrap grid system. The spacing between rows is too large.
How can I reduce it?
<div class="row">
<div class="col-md-6">
<h1 id="Heading"> Heading </h1>
<div class="row" style="margin-left:6px;">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="rect"> <span id="Heading" style="margin-left:15px;font-weight:bold; font-size: 18pt;color: #2373B3;"> Span </span> </div>
</div>
</div>
</div>
</div>
</div>
<div>
There are 2 quick solutions possible for this:
Edit bootstrap core css/sass which will be a bad idea as it will affect core functionality of page scaffolding.
Write a separate class and add it in your div for ex:
.row-bottom-margin { margin-bottom:20px; }
and you can use it as
<div class="row row-bottom-margin">
Option 1 is not suggested until unless you are really looking for this change to be applied at all the relevant places and do consider your future designs.
Hope this helps!
Using Bootstrap 4 now you no more need to use any CSS for this as it has utility classes for this purpose.
By default, row elements expands in related to their childs. So your problem is not in .row class but in #rect
On rect element you have a line-height of 1.4 by default bootstrap css. Make it a class rather than id.
You can reduce it to 1.2 for your case...
Do it on a separate css file and overwrite it. That would be a better design for you.
.rect {
line-height: 1.2; // overwrite it on a different css if you prefer
}
In twitter bootstap there is a default margin-bottom:15px property set between rows of the grid system.You can remove this property or overwrite the margin property
<div class= "row marginRow"></div>
Your Css
.marginRow{
margin-bottom:0px !important;
}
or just remove any margin present using
.marginRow{
margin:0px !important;
}
See: http://jsfiddle.net/rMYdL/
My jumbotron seems to be exceeding the width of col-md-10 (meaning, I see a horizontal scroll bar). Any ideas why? Here's the relevant snippet:
<div class="col-md-10">
<div class="jumbotron">
<div class="container">
<h1>
Hello
</h1>
<p>
Please select the type of post you would like to add, edit, or delete.
</p>
</div>
</div>
</div>
You are putting a .container inside a .col-*. You should use a .row instead.
And you also dont have any .container before the first .row on your <body>
FIDDLE