I need to center align every divs in Bootstrap3. To make it an accounting report. There're 3 level of divs - Header, subheader and detail list. Each level I use col-md-* to limit the width. I've tried text-align but it's not help.
Here's the code :
<div class="container">
<div class="header text-info">
<h1>Heading</h1><br />
<h2>Acc. Type</h2><br />
<h3>Month</h3>
</div>
<legend>Income</legend>
<div class="acc-content row">
<div class="col-md-12">
<b>col-md-12</b>
<span class="pull-right">###</span>
</div>
</div>
<legend>Expense</legend>
<div class="acc-content row">
<div class="col-md-12">
<b>col-md-12</b>
<span class="pull-right">###</span>
</div><!-- /col-md-12 -->
<div class="col-md-10">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
</div><!-- /acc-content -->
</div>
DEMO : http://fiddle.jshell.net/nobuts/mshwa1yt/1/show/ (please view in desktop).
I expect all the divs to center aligned like this : (red border is just a test)
Please be adviced.
Add col-md-offset-*. For example:
<div class="col-md-10 col-md-offset-1">
and
<div class="col-md-8 col-md-offset-2">
You must also change your margin: 5px on .acc-content div[class*='col-md-'] to margin-top: 5px; margin-bottom: 5px because it overwrites Bootstrap's margin-left for col-md-offset-*.
DEMO: http://jsfiddle.net/mshwa1yt/5/embedded/result/
DOCS: http://getbootstrap.com/css/#grid-offsetting
using block-center class wrapping using row
all the col classes from bootstrap have the float left property. either remove them (not adivsed) and add margin:auto to the divs...or add more divs:
if u have a col-8 add col-2 left and col-2 right (offsets)...so you keep the grid system in place
You need to add this to the divs:
.acc-content div[class*='col-md-'] {
float: none;
margin: 5px auto;
}
First one overwrites the float: left rule that's pretty much the opposite of center aligning it, the second one actually aligns it to center.
Bootstrap 3 has a mixin called center-block found in utilities.less.
First, add class center-block to elements that should be centered.
Then, if using Less, add to CSS:
.center-block {
.center-block();
}
If using plain CSS, add:
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
in this example replace this
<div class="col-md-10">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
with this
<div class="col-md-10 col-md-offset-1">
<b>col-md-10</b>
<span class="pull-right">###</span>
</div><!-- /col-md-10 -->
<div class="col-md-8 col-md-offset-2">
<b>col-md-8</b>
<span class="pull-right">###</span>
</div><!-- /col-md-8 -->
add class col-md-offset-"number of cols" to col- divs
Related
I would need to make sure that when the page is scrolled the div ".col-left" is placed in the fixed position (it must start from the top ".ctn-parte-iniziale").
Also, when it gets to the bottom of the footer ".bg-orange" it must stop and it must no longer be in the fixed position.
How can I do?
A thousand thanks!
This is my code:
<div class="ctn-parte-iniziale">...</div>
<div id="main-site">
<div class="bg-white">
<div class="container">
<div class="page_layout page_margin_top clearfix cnt-corsi-gen">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-12">
<div class="col-left">
...
</div>
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
...
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-orange"></div>```
Try adding this to col-left. In 2021 you may not need the webkit line but try it first.
So, in CSS
div.sticky {
position: -webkit-sticky; <!-- Safari/Chrome --->
position: sticky;
top: 0;
}
And then in your HTML
<div class="col-left sticky">
I have an HTML table which is as following
Some of the code is below:
<table>
<tr>
<td>
<div style="width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 103px; width:80px;" class="location-block">
<div class="city-img">
<img src="worldwide-location.png" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
<td>
<div style=" width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 50px; width:80px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
<div style="height: 50px; width:80px; margin-top: -27px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
the table looks like the following:
enter image description here
As you can see the white space between each column, I am trying to reduce the white spaces between them, but this is not happening, I have tried padding-left and also gave cell spacing to the table, its not changing, can anyone tell me whats wrong with my code? Thanks in advance.
If you decide to use Bootstrap grid you can avoid to use HTML table tag, and use a structure like this:
<div class="row">
<div class="col margin-col">
<div>Images and content 1</div>
</div>
<div class="col margin-col">
<div>Images and content 2</div>
</div>
</div>
usign a proper CSS rule like this to set padding (inside columns) and margin (outside columns):
.margin-col{
padding: 10px;
margin: 20px;
}
I have a bootstrap row with n number of 150x150 images. I have this js fiddle here: https://jsfiddle.net/tzachary89/4dnva3p4/
Whenever one of these images is clicked I'm trying to have something that looks like this: https://i.imgur.com/j7gaLLt.png
So whenever I have an image that is clicked I want a div to show that covers the underlying rows. The div may end up being taller than the one in the picture.
how can I get my dropdown menu to span the entire row and to cover the row beneath it? (without pushing the below row down)
<div class="container">
<div class="row" style="background-color:#8faad8;">
<div class="col-xl-2 col-lg-2 col-md-3 col-sm-4 col-5" style="margin: 2px 0px 0px 0px;" id="tile1">
<img src="https://rfclipart.com/image2/thumbnail/3b-3b-f2/head-with-beard-and-hair-Download-Royalty-free-Vector-File-EPS-359793.jpg">
<div class="container" style="background-color: white;">
<div class="row">
<div class="col-md-2">
<button class="btn btn-primary">asdf</button>
<button class="btn btn-primary">asdf</button>
</div>
</div>
</div>
</div>
</div>
</div>
I'm having an issue trying to get two divs that are side by side the same height when the content for each of the divs are generated using an ng-repeat.
Flex box stops the site being responsive and i can't work out when would be a suitable time to call a Jquery function as the views are nested and the page doesn't actually load when the new html is displayed. I have tried ng-repeat-start and end to no avail.
Ideally once the content has loaded i would the div on the right to be the same height as the div on the left.
Would really appreciate any help with the problem.
Cheers
EDIT - Code Included
<div class="row">
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing rottnestGreen">
<div ng-repeat="bh in bikeHire" class="row">
<p class="col-xs-6">{{bh.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="bikeHire[$index].quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(bh.type, bikeHire[$index].quantity, bh.price)"></select>
<p class="col-xs-3 blueText">{{bh.price | currency}}</p>
</div>
</div>
</div>
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing np rottnestGreen">
<div ng-repeat="sf in sAndF" class="row">
<p class="col-xs-6">{{sf.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="sf.quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(sf.type, sf.quantity, sf.price)"></select>
<p class="blueText col-xs-3">{{sf.price | currency}}</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
Is it something like this you are looking for? https://jsfiddle.net/yczgaLgm/2/
Wrapping everything in a container:
<div class="row container">
And then styling the container to use flexing is the way I usually do this
.container {
display: flex;
flex-wrap: wrap;
}
The biggest downside though is IE support, I dont hope you are supporting below IE10?
I am using bootstrap 3 for my columns and I am trying to have two columns together, the one on the left to have a big text h4 title and the one on the right a small text comments count.
The problem is when adding the h4 tags around the title the "1 comments" bit seems to jump up to the top of the div it is in, I want it aligned to the bottom. Ideally I would want it aligned the same as the h4 and to the right.
Image to show:
see the comments bit is higher than the bigger title text :(
<!-- main content -->
<div class="row">
<!-- Articles -->
<div class="col-md-9">
<!-- notification -->
<div class="alert alert-warning text-center">
You have <span class="badge badge-important">3</span> admin items needing review!
</div>
<!-- new sales -->
<div class="alert alert-success text-center">
<strong>Latest Games On Sale:</strong> <span class="label label-info">Steam</span> Sparkle 2 Evo, <span class="label label-info">Steam</span> Shadow Warrior Classic Redux, <span class="label label-info">Steam</span> Redshirt, <span class="label label-info">Steam</span> Gravity Badgers - See all
</div>
<div id="maincontent">
<!-- Article -->
<div class="row">
<div class="col-md-8"><h4>Sdasd Asdasdasdasdasdasdasdasd</h4></div>
<div class="col-md-4"><p class="small muted"><span class="glyphicon glyphicon-comment"></span> 1 Comments</p></div>
</div>
This is because, in Bootstrap an <h4> has a top margin of 10px and a <p> has a top margin of 0. Not that I am condoning inline styles, but this should give you an idea of how to get around it:
<div class="row">
<div class="col-md-8">
<h4>Sdasd Asdasdasdasdasdasdasdasd</h4>
</div>
<div class="col-md-4">
<p class="small muted" style="margin-top:14px;"><span class="glyphicon glyphicon-comment"></span> 1 Comments</p>
</div>
</div>
I used 14px instead of 10px to compensate for the difference in font-size. I also