I'm trying to correctly align multiple columns and rows of Bootstrap Panels.
Sorry if this is a simple question, I'm very new to Bootstrap and fairly new to CSS+HTML.
Here's the code for one panel;
<div class="row">
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Overall</h3>
</div>
<div class="panel-body">
Panel Body.
</div>
</div>
</div>
Duplicate this, and we get two side by side. However, if we add an extra </div> at the end, the next one appears on a new line, but out of alignment. I want a similar layout to this;
X X X X
X X X X
X X X X
X X X X
Here's a screenshot of how it looks when out of alignment: http://i.imgur.com/t030kVU.png
Thanks for any help you can give, I'm sure it's something simple.
I don't really see the issue. Your markup seems fine to me. Just put your panels in a new row if you want a new row :)
<div class="row">
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Overall</h3>
</div>
<div class="panel-body">Panel Body.</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Overall</h3>
</div>
<div class="panel-body">Panel Body.</div>
</div>
</div>
</div>
See this simple fiddle: http://jsfiddle.net/anup1986/4m0xfzz2/
Related
I'm trying to design a page with bootstrap 3 that has the main information on the left, and then a small side-bar on the right where additional links and graphs relating to the main info will go:
http://www.bootply.com/ZLB46jDSnU
Problem is if I use container-fluid for the main body (line 55), vertical scrolling is gone even though the sidebar needs it..If I change container-fluid to container, everything works nicely BUT the main body overlaps with my sidebar. Giving me the impression the fluid layout is what I want.
Does anybody know why this interferes with scrolling? Am I taking the wrong approach to have a sidebar divs independent the page content divs?
Got it working with Skelly's help!
<div id="page-content-wrapper">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="right">
<div class="panel panel-default ">
<div class="panel-heading">
<h3 class="panel-title">Shortcuts</h3>
</div>
<!--User details -->
<div class="panel-body">
<li>Milestones --»</li>
<li>Versions --»</li>
<li>CSV Report --»</li>
</div>
</div>
</div>
<div class="col-sm-8" id="left">
<!--All apps -->
<div class="panel panel-default" ng-init="">
<!-- Default panel contents -->
<div class="panel-heading clearfix">
<b>Your Applications</b>
</div>
<div class="panel-body">
<table-here></table-here>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Hi there i am trying to make a pannel in bootstrap. I am new to this so sorry if this is a simple question. I am trying to create a pannel like this website : Website
So far i have made the header , body and footer , however i cant create the body part of it, i am stuggling to create it and everything i try is not working. If anyone can assist me in this and explain it would be great help
Code so far:
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
Thanks for the help guys xx
Edit: Sorry i should have made it clear. The problem i am having is creating the content in the body part. So creating anther pannel for the image, then the button and then the list of ingredients. This is my main problem
You should be able to nest them as needed, so this should work.
<body>
<div class="container">
<h2>Panel Heading</h2>
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">inner Panel Heading</div>
<div class="panel-body">innner panel body</div>
<div class="panel-footer">inner Panel Footer</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">inner Panel Heading</div>
<div class="panel-body">innner panel body</div>
<div class="panel-footer">inner Panel Footer</div>
</div>
</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
here's a code pen of the layout
I have the below HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content Panel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</body>
</div>
but there is a gap between each panels
Above example is only sample. I am planing to use a loop to generate the panels and show news contents on the page could go up to over 100 panels on the page.
My question is how to remove the above gaps ?
i think its will help you for looping panel in bootstrap,
<div class="container">
<div class="row">
<?php
for ($i=1; $i <100 ; $i++) { ?>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content Panel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel contentPanel content
</div>
</div>
</div>
<?php
$no++;
$x= $no % 3;
if ($x=='0') { ?></div><div class="row" style="">
<?php } }?>
I make it 4 column in one row
Bootstrap isn't designed to do that. If you notice it will push the next combined elements whose width = 12 col's down past the highest element.
So in your example image you have 4 col-md-3's which equals 12. The farthest right element has the most content, therefor the next element, may it be a col-md-12 or col-md-3 will be pushed lower then that element.
Its hard to build a masonry layout without any jQuery or Javascript help..
Edit -
A solution is possible without the use of jQuery or javascript. By use of Flexbox you can create a 'masonry' style layout.
Take a look at this article that explains more on a Flexbox masonry layout.
Read up on css "display:flex" property. You should be able to align all of the panes to the same size using that.
It is best explained here:
http://clearleft.com/thinks/270
Basically, set the parents property style in the css to display:flex and set the flex-warp property to wrap
Then set the height of the panel to be 100% so that it takes the height of the whole container. See the above link to figure out how to change the contents inside the panel to deal with flex.
I've been spinning my wheels on trying to get a div panel element to appear on the top right of the page, on the same line as the h1 element:
<div class="container">
<div class="page-header">
<h1>
<img src="logo.png"> Page title
</h1>
<div class="panel panel-primary">
...content...
</div>
</div>
...
</div>
I'm a bit of an amateur with CSS/HTML, but I've tried the pull-left/right classes along with every permutation of display/position, etc. The outcome is always garbled. Any suggestions?
you have to add pull-left to the h1 too.. to have both of them floated..
also add a .cleafix class to the page-header div
<div class="container">
<div class="page-header clearfix">
<h1 class="pull-left">
<img src="logo.png"> Page title
</h1>
<div class="panel panel-primary pull-right">
...content...
</div>
</div>
...
</div>
I wouldn't use the .page-header for this, it doesn't clear and it's meant for text. Use the grid system so that you can set a size for your panel as they are not a set width and requires a wrapper to have a width. It will layout very cleanly this way.
Just a note: when you use the .pull-right and .pull-left classes on anything in Bootstrap these cover all viewport sizes and the results can look pretty yucky as the viewport gets smaller.
DEMO: http://jsbin.com/sadup/1
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="http://placehold.it/200x75/444444/FFFFFF&text=logo" class="img-responsive" alt="Logo">
</div>
<!--/.col-sm-8 -->
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<!--/.col-sm-4 -->
</div>
<!--/.row -->
</div>
<!--/.container -->
I have two rows of nested panels inside of a primary panel. The 1st row has 3 panels of unequal heights. How do I make the 3 panels to be the same height of the highest panel (panel #3 in the jsfiddle link)?
Here's the jsfiddle - http://jsfiddle.net/niner911/MgcDU/8905/
I would like panel #1 and panel #2 the same height of panel #3, or whichever the tallest panel would be.
Thanks for the help.
Here's my markup:
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">outer</div>
<div class="row">
<div class="col-xs-4">
<div class="panel panel-info">
<div class="panel-heading">1</div>
<div class="panel-body">
<div class="list-group">
<div class="list-group-item">111</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="panel panel-info">
<div class="panel-heading">2</div>
<div class="panel-body">
<div class="list-group">
<div class="list-group-item">222</div>
<div class="list-group-item">222</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="panel panel-info">
<div class="panel-heading">3</div>
<div class="panel-body">
<div class="list-group">
<div class="list-group-item">333</div>
<div class="list-group-item">333</div>
<div class="list-group-item">333</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="panel panel-info">
<div class="panel-heading">
<span>lower</span>
</div>
<div class="panel-body">
xyz
</div>
</div>
</div>
</div>
</div>
Try using map() to process each item and get the size of the tallest panel. Than apply this height to each panel.
JS
var heightTallest = Math.max.apply(null, $(".panel-info").map(function ()
{
return $(this).outerHeight();
}).get());
$('.panel-info').css({ height: heightTallest + 'px' });
Updated jsfiddle:
http://jsfiddle.net/MgcDU/8915/
using jquery apply height to children of .row
$('.row').each(function(){
var RowHeight = $(this).innerHeight();
$(this).children().css({ height: RowHeight + 'px' });
});
and set .panel height to what size you desire, eg. 100%
If you're okay with the browser compatibility limitations, you could try this CSS flexbox-based experimental code: https://github.com/twbs/bootstrap/pull/11851