I am working inside a panel and am not able to left align or remove the margins for a horizontal list in Bootstrap.
i.e.
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
<strong>testing</strong>
</h3>
</div>
<div class="panel-body">
<dl class="dl-horizontal">
<dt>term 1</dt>
<dd>foo</dd>
<dt>term 2</dt>
<dd>bar</dd>
</dl>
</div>
</div>
</div>
https://jsfiddle.net/srzyL86g/
Solved here . https://jsfiddle.net/adityap708/9k0qg8jn/
.container dt,.container dd {
width:auto;
margin-left:auto;
display:inline-block;
}
Add this to your css. Boostrap is giving dt and dd width and margin you need to overwrite it.
Related
I have a screen split in two, using two columns.
<div class="row">
<div class="col-md-6 well">
Left Box
</div>
<div class="col-md-6 well">
Right
</div>
</div>
I need a small (approx 10px) gap between the two columns.
http://www.bootply.com/vaOb1WdR5I
Can this be done?
Both boxes would need to reduce by 5 pix (in the above example), as I need the total width to remain.
Edit: Some ideas nearly work, but I am getting an extra Well that I don't want. With this:
<div class="row">
<div class="col-md-6">
#Html.Action("ShowDuePayments", "Transaction")
</div>
<div class="col-md-6">
#Html.Action("ShowRecentTransactions", "Transaction")
</div>
</div>
I get this:
The 'under' well div shouldn't be visible.
A couple of points:
You shouldn't add extra classes to the Bootstrap columns (that's not a hard and fast rule, but a good recommendation)
You are missing the container wrap.
Make changes using those rules and it looks like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well">Left Top Box</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well">Left Bottom Box</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="well">Right Box</div>
</div>
</div>
</div>
How about this?
<div class="row">
<div class="col-md-6" style='padding-right:5px'>
<div class='well'>
Left Box
</div>
</div>
<div class="col-md-6" style='padding-left:5px'>
<div class='well'>
Right
</div>
</div>
</div>
http://www.bootply.com/Ogrte6IQzw
If you remove the inline styling, you will have the natural spacing provided by bootstrap, which is 15px padding.
You can change the class of col-md-6 and add width:49%, and to the 2nd div add pull-right class like:
HTML:
<div class="row">
<div class="col-md-6 well">
Left Box
</div>
<div class="col-md-6 well pull-right">
Right
</div>
</div>
CSS:
.col-md-6{
width:49%;
}
You can also try to add padding to the two div tags ie:
.col-md-6{
padding:5px;
}
This would add a bit of padding to all the sides - unless you use padding-left & padding-right and assign different class names to the divs - depending on how you want your code to be layed out.
You could also use an additional class so you only modify special column-6 elements and not all on your site. This example also uses percentage based widths as Flopet17s. You could tweak the percentage number to better fit your desired gap width.
.withgap {
width: 49%;
margin-right:1%;
}
<div class="row">
<div class="col-md-6 well withgap">
Left Box
</div>
<div class="col-md-6 well">
Right
</div>
</div>
Above snippet is a result of the following code-(i have used bootstrap for the css)
<div class="container" >
<div id=" row" style="margin-top: 140px;">
<div class="panel col-md-6" style="background-color: yellow">
<div class="panel-heading" style="background-color: gray">
</div>
</div>
<div class="panel col-md-6" style="background-color: greenyellow">
<div class="panel-heading" style="background-color: sienna;width:fit-content;"></div>
</div>
</div>
</div>
Here Green and yellow are panels; Sienna and grey are panel headers. Why does panel header leave padding on both ends? how to fit header here to panel width?
You shouldn't use col-md-* with other classes. It's part of the grid system and the "cells" are padded to the left and right.
This should be your code, although it doesn't fix your problem:
You shouldn't use col-md-* with other classes. It's part of the grid system.
You need to use some more div elements like so:
<div class="container" >
<div id=" row" style="margin-top: 140px;">
<div class="col-md-6" style="background-color: yellow">
<div class="pannel">
<div class="panel-heading" style="background-color: gray">
</div>
</div>
</div>
<div class="col-md-6" style="background-color: greenyellow">
<div class="pannel">
<div class="panel-heading" style="background-color: sienna">
</div>
</div>
</div>
</div>
</div>
.row class add a negative padding of 15px.
.col-xx-xx class add a positive padding of 15px.
To don't have this padding, just remove it in your specific class.
Here :
.panel{
padding: 0px;
}
Would it be possible to achieve the attached grid in bootstrap? Each of the squares would probably be an image... or perhaps text!
I've had a go, but hit a wall when it comes to the top-left box for example that spans over two rows.
Grid:
Use nested blocks whenever you need your grid to span several rows.
Something like this:
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-8"></div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8"></div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
Then you can set the height for your blocks and your grid is good to go.
A newbie here.
So I was learning to make nested grids when I stumble on this question.
My Rules for making nested grids:
1.The entire grid will be in parent container .row (parent wrapper)
2.Columns are always nested in columns, however all nested columns must have a .row(column wrapper) wrapper to align items horizontally e.g.:
<div class='col-md-12'>
<div class='row'>This is the column wrapper.
<div class='col-md-9'></div>
<div class='col-md-3'></div>
</div>
</div>
3.Breakpoints are very key
4.You may have to use custom css to fine tune your grid.
This is my solution to the problem:
<div class='row parent-wrap'>
<div class='col-sm-6 big-left'>Top Left big</div>
<div class='col-sm-6 quarter-grid'>
<div class='row top-wrap'>
<div class='col-sm-6 top-left'>top-left</div>
<div class='col-sm-6 top-right'>top-right</div>
<div class='col-sm-6 bottom-left'>bottom-left</div>
<div class='col-sm-6 bottom-right'>bottom-right</div>
</div>
</div>
<div class='col-sm-12'>
<div class='row mid-wrap'>
<div class='col-sm-3 mid-start'>mid-start</div>
<div class='col-sm-6 mid-center'>mid-center</div>
<div class='col-sm-3 mid-end'>mid-end</div>
</div>
<div class='col-sm-9'>
<div class='row bottom-wrap'>
<div class='col-sm-8 bottom-start'>bottom-start</div>
<div class='col-sm-4 bottom-center'>bottom-center</div>
</div>
</div>
</div>
Rudimentary custom css:
.parent-wrap{
margin:100px;
}
.big-left{
background-color: aqua;
height:300px;
}
.top-left{
background-color:black;
height:150px;
}
.top-right{
background-color: blue;
height:150px;
}
.bottom-left{
background-color:brown;
height:150px;
}
.bottom-right{
background-color:crimson;
height:150;
}
.mid-start{
background-color:grey;
height:200px;
}
.mid-center{
background-color: red;
height:200px;
}
.mid-end{
background-color: pink;
height:400px;
}
.bottom-start{
background-color:blueviolet;
margin-left:-15px;
height:200px;
margin-top:-200px;
}
.bottom-center{
background-color:burlywood;
height:200px;
margin-top:-200px;
}
It seems like a simple question, but I simply can't find an answer.
This fiddle should be fairly straightforward:
http://fiddle.jshell.net/52VtD/4040/
<div class="panel panel-default entete" >
<div class="row">
<div class="col-md-6">
<div class="title">
to be centered vertically
</div>
</div>
<div class="col-md-2">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
<div class="col-md-2">
Text
</div>
<div class="col-md-2">
Text
</div>
</div>
</div>
I'm trying to align vertically the contents of the first column relatively to the others.
If the window is resized (and there is no column to its right), the first column should be as high as its content (cannot use a fixed height).
The correct way to do this using Bootstrap 4 Grid is by using one of then align-items-... classes on the .row element, or align-self-... on the .col elements.
In the case of the OP's original request, the best implementation would be
<div class="col-md-6 align-self-center">
<div class="title">
to be centered vertically
</div>
</div>
If you wanted to, for example, set all of the .col elements to be aligned to the bottom vertically, you would set align-items-end on the .row element like so:
<div class="row align-items-end">
Source: https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment
Check out this http://fiddle.jshell.net/52VtD/4043/
<div class="panel panel-default entete" >
<div class="row" style="display:table">
<div class="col-md-6" >
<div class="title" style="display:cell;vertical-align:middle">
to be centered vertically
</div>
</div>
<div class="col-md-2">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
<div class="col-md-2">
Text
</div>
<div class="col-md-2">
Text
</div>
</div>
</div>
http://fiddle.jshell.net/8uzn7fou/2/
HTML:
<div class="panel panel-default entete" >
<div class="row" >
<div class="col-md-6 title_div" >
<div class="title" >
to be centered vertically<br/> to be centered vertically
</div>
</div>
<div class="col-md-2">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
<div class="col-md-2">
Text 2
</div>
<div class="col-md-2">
Text 3
</div>
</div>
</div>
CSS:
.title_div{
display: table;
}
.title{
height:100%; display: table-cell!important;
vertical-align: middle;
}
JQ:
function setHeight()
{
var max=0;
$('.entete .col-md-2').each(function(){
var h=$(this).height();
if(h>max) max=h;
})
$('.title_div').height(max);
}
setHeight()
Note: In function setHeight () should be added to check the width of the window in order not executed for smaller screens
I would like to be able to align different sized images to the bottom of a div.
I have the following markup:
<div class="container">
<div class="container">
<div class="footer-images">
<img src="img1">
<img src="img2">
<img src="img3">
</div>
</div>
<div class="container">
<div class="copyright">
<p>© Some Company YYYY</p>
</div>
</div>
</div>
I can't figure out how to have all the images aligned to the bottom of the footer-images div. Any help would be greatly appreciated.
try this
.footer-images img{
vertical-align:bottom;
border:0;
}
In Bootstrap v4 you can use the class align-items-end to achieve bottom alignment in a div. You can use this class on the row or on the column.
Example with all column content aligned to the bottom.
<div class="container">
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
Example with first column top, second colum middle and third colunm bottom alignment.
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Source: Bootstrap documentation.
Does this help?
<style type="text/css">
.footer-images {
margin: auto;
display: block;
position: absolute;
bottom: 0;
}
.footer-images .copyright {
text-align: center;
}
</style>
Using this HTML
<div class="container">
<div class="container">
<div class="footer-images">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/640x480">
<img src="http://placehold.it/120x120">
<div class="container">
<div class="copyright">
<p>© Some Company YYYY</p>
</div>
</div>
</div>
</div>
</div>
used to this css and apply
.footer-images img{
width:xxpx;
height:xxpx; // add here your style as like with height border etc.
vertical-align:top;
border:0;
}
More about bootstrap
It would be enough:
margin-top: auto;
See https://jsfiddle.net/d3jau1gx/