I have 3 divs in a row, I need 3 divs should be aligned in the center.
<div class="row">
<div class="center">
<div class="col-sm-4" id="ph-container"></div>
<div class="col-sm-4" id="do-container"></div>
<div class="col-sm-4" id="water-temperature-container"></div>
</div>
</div>
Use text-center instead of center.
<div class="row">
<div class="text-center">
<div class="col-sm-4 col-sm-offset-1" id="ph-container"></div>
<div class="col-sm-4" id="do-container"></div>
<div class="col-sm-4" id="water-temperature-container"></div>
</div>
</div>
Adding an offset will help you in making the view better.
the total number of cols is 12, if you use 12 cols (4+4+4=12) it will be not in center cose they wil be take all with of parent block.
So you must use less cols
<div class="row">
<div class="col-sm-pull-1 col-sm-3" id="ph-container"></div>
<div class="col-sm-3" id="do-container"></div>
<div class="col-sm-3" id="water-temperature-container"></div>
</div>
<div class="row">
<div class="col-sm-offset-1 col-sm-3" id="ph-container"></div>
<div class="col-sm-3" id="do-container"></div>
<div class="col-sm-3" id="water-temperature-container"></div>
</div>
This makes the three divs slightly narrower, and pushes them from the left, making them appear in the centre of the page.
Bear in mind, by making the divs narrower, your graphs may not look correct, so you'll need to correct your styling to adapt into the new div sizes.
This might help you actually: Bootstrap 3 1.5 column offset
Related
I need to style rows like in picture.
The problem is I want to have fixed elements no matter if previous or next element will disappear. Also the whole table is resizable and buttons should overlap text if text will be too long
<div class="someRow">
<div class="someText"></div>
<div class="buttonsContainer">
<div *ngIf="someExpression1" class="button1"></div>
<div *ngIf="someExpression2" class="button2"></div>
<div *ngIf="someExpression3" class="button3"></div>
<div class="button4"></div>
</div>
</div>
<div class="buttonsContainer">
<div class="row">
<div class="col-4">
<div *ngIf="someExpression1" class="button1"></div>
</div>
<div class="col-4">
<div *ngIf="someExpression2" class="button2"></div>
</div>
<div class="col-4">
<div *ngIf="someExpression3" class="button3"></div>
</div>
</div>
I want to use a push, pull in Bootstrap v5.0.0-beta2, but how?
In Bootstrap 3, I'm using it like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
I tried. But I can't. Here is my JSFiddle
In Bootstrap V5, how can I use push and pull?
Please help.
Thanks in advance.
Push/pull is a grid technique. That's now deprecated in favour of flex.
For flex the helper classes are .order-. See BS5 Columns documentation.
You can use global ordering:
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Or screen size specific ... i.e. .order-sm-*, .order-lg-*, and so on.
If you just want to shift, then use Offsetting Columns
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
EDIT:
In your case you can use:
<div class="row">
<div class="col-md-9 order-last">.col-md-9 <del>.col-md-push-3</del><ins>order-last</ins></div>
<div class="col-md-3 order-first">.col-md-3 <del>.col-md-pull-9</del><ins>order-first</ins></div>
</div>
or:
<div class="row">
<div class="col-md-9 order-2">.col-md-9 <del>.col-md-push-3</del><ins>order-2</ins></div>
<div class="col-md-3 order-1">.col-md-3 <del>.col-md-pull-9</del><ins>order-1</ins></div>
</div>
I'm designing a multi filed search bar for a new website. The website is made in PHP/Javascript/Bootstrap
I need to create 4 fields (3 text field + 1 search button) and they should be aligned in a
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
..here the fields plus button...
</div>
</div>
How can I do that? I tried form-inline but this is the result:
If you do not have particularly problematic requirements like old browser support, you could have fun with Flex.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You have to distribute until 12 cols and center your div like:
Change Your code:
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
..here the fields plus button...
</div>
</div>
For:
<!--Adding some styles for center the row-->
<div class="row" style="margin: 0 auto; display:block; width: 100%;">
<div class="col-lg-2">Field One</div>
<div class="col-lg-2">Field Two</div>
<div class="col-lg-2">Field Tree</div>
<div class="col-lg-6">Your search field</div>
</div>
Please see this for: http://getbootstrap.com/css/#grid more about it.
I want to place 3 d3 charts in a row I tried doing it using bootstrap fro html but it does not help id there a better way to do this
My current code
<div class="row">
<div class="span4" id="chart_1">23</div>
<div class="span4" id="chart_2">45</div>
<div class="span4" id="chart_3">34</div>
</div>
Fiddle: https://jsfiddle.net/r2qepmk0/3/
If I change bootstrap class to col-xs-4 which otherwise place divs in row but somehow the charts do not render.
js fiddle with the col-xs-4 class https://jsfiddle.net/r2qepmk0/4/
I have updated your https://jsfiddle.net/r2qepmk0/5/ have a look.
<div class="row">
<div class="col-xs-4">
<div class="span4" id="chart_1">23</div>
</div>
<div class="col-xs-4">
<div class="span4" id="chart_2">45</div>
</div>
<div class="col-xs-4">
<div class="span4" id="chart_3">34</div>
</div>
</div>
Just in case if you want remove white space between columns you can try this link
I am trying to create a layout like this :
I wrote html like this :
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-lg-3 col-md-3">
<div class="row">
<div style="height:400px">
container of menu item, which should be fix on top
<div>
</div>
</div>
<!-- Right side -->
<div class="col-lg-9 col-md-">
<div class="row">
<div class="row">
<div style="height:900px">
Div Scrollable <div>
</div>
</div>
</div>
</div>
</div>
How could i achieve this ?? please help me
The Bootstrap Affix may be what you are looking for. It's what the Bootstrap documentation itself uses to keep the menu fixed to the top while the page scrolls.
One of the possible way:
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<!-- Left side -->
<div class="col-xs-3 clearfix" style="height:400px; background: #f00; position: fixed;">
container of menu item, which should be fix on top
</div>
<!-- Right side -->
<div class="col-xs-offset-3 col-xs-9">
<div style="height:900px">
Div Scrollable
<div>
</div>
</div>
</div>
</div>
</div>
+Fiddle
EDIT
I made just simple demo to keep bootstrap padding you need to add one more container inside of left column.