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
Related
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>
I am using the grid system (Bootstrap 3.3.4) to try to make about four columns. The only problem is it puts the grid in the background. And the footer just sits on top of everything in the grid. Here is the jsFiddle, notice how the last little bit of text is cut off by the navbar on the bottom. Here is my code:
<div class="jumbotron">
<h1>Example page header</h1>
</div>
<div class="col-md-2">
<div ng-repeat="category in main_business_categories">
{{category}}
</div>
</div>
<div class="col-md-2">
<p>column2</p>
</div>
<div class="col-md-2">
<p>third</p>
</div>
<div class="col-md-6">
<p>fourth</p>
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
Made with love by Jeremy Martinez
</div>
</div>
How do I get it to where everything (header, footer, and text in grid) are all on the same depth. Right now, grid is in background and everything else is in foreground.
First you should wrap your columns inside a .container or .container-fluid and .row: https://jsfiddle.net/bhbhv38f/2/
The .navbar-fixed-bottom cause the behaviour you describe. You should remove that class to get the footer at the end of your content, see https://jsfiddle.net/bhbhv38f/3/
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'm laying out a login screen, and on that screen will be just a box with LOGIN and PASSWORD. I need to centralize vertically and horizontally (like any traditional login screen).
How can I achieve this with Twitter Bootstrap?
Thanks!
If you are using bootstrap grid, then you can offset your columns:
<div class="row">
<div class="span6 offset3">
Your content goes here
</div>
</div>
See example here: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
Or you can just use CSS to simply center block element,
div.login-box{
margin:0 auto;
width: 720px;
}
UPDATE to Johny's answer: For Bootstrap 3; the syntax is a bit different:
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
Your content goes here
</div>
</div>
or: better yet:
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
Your content goes here
</div>
</div>
</div>