Actually I have a layout build with one row class and two column by using bootstrap grid system.
Now I need to add another one item inside that grid system but I'm unable to position it properly inside the layout as it's going under all other columns.
As you can see on the screenshot
As you can see the third column I'm trying to add goes under all other while I would to place it in the red rectangle position
The layout is build as the following:
<div class="container-fluid">
<div class="row">
<div class="col-md-4 mb-4 mt-1"></div>
<div class="col-md-8 mb-4 mt-1"></div>
</div>
</div>
I was trying to add something like that to put the 3rd column but the result was as described above
<div class="container-fluid">
<div class="row">
<div class="col-md-4 mb-4 mt-1"></div>
<div class="col-md-8 mb-4 mt-1"></div>
<div class="col align-self-start"><div>
</div>
</div>
You should use the following approach
<div class="container-fluid">
<div class="row">
<!-- There will be column with 2 right box -->
<div class="col-md-4">
<div class="row">
<div class="col-md-12 mb-4 mt-1">
</div>
<div class="col-md-12">
ITEM UNDER 1ST BOX
</div>
</div>
</div>
<!-- This will be your larger left box -->
<div class="col-md-8">
<div class="row">
<div class="col-md-12 mt-1">
</div>
</div>
</div>
</div>
</div>
Related
I have below text link list appearing in a col-md-3. I want to appear them as right-justified. See attached image below.
Current Coding is like below with "text-right" in the col-md-3, I tried text-justify too didn't seem to be working,
Any idea on how to make this the way i wanted as the image?Should i use a '<ul>' or '<li>' instead?
<div class="col-md-3 mt-2 text-right">
<div class="row mt-3">
<div class="col-md-12">
<b>View Profile</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-12">
<b>Send Message</b>
</div>
</div>
....
<div class="row mt-3">
<div class="col-md-12">
<b> View Proposal </b>
</div>
</div>
</div>
Don't use text-right on the container. Instead, turn the col-md-12 divs into col-md-6 and use an offset i.e. offset-6. Now the element takes up 6 columns and is offset 6 columns, which puts it to the right of it's parent element.
More information about offsets can be found about halfway down the Bootstrap Grid documentation.
Here's the code demonstrating how to do this:
<div class="col-md-3 mt-2 container">
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b>View Profile</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b>Send Message</b>
</div>
</div>
<div class="row mt-3">
<div class="col-md-6 offset-6 inner">
<b> View Proposal </b>
</div>
</div>
</div>
Here it is on Codepen
I Just updated my Codepen: https://codepen.io/shnigi/pen/jOWmqLe
It really depends how you want to place your grids and how much content they are going to have.
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>View Profile</b>
</div>
</div>
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>Send Message</b>
</div>
</div>
<div class="col-md-12 row">
<div class="col-md-3 offset-9 text-right">
<b>View Proposal</b>
</div>
</div>
Here I have created three rows which all span 12 columns. Then inside the rows I have element which spans 3 columns and has offset of 9 totalling 12 columns. Then I have placed text-right to make the text float on right inside the 3 column element.
I have a table like display made using the bootstrap grid classes.
The body rows of which are populated dynamically with javascript.
The table is hidden or shown depending upon the state of the application.
I have a div with an id which contains a row for the header columns and another div with another id to hold the body rows like this:
<div id="myDynamicList" style="display:none;">
<div class="row" id="myHeaderRow">
<div class="col-sm-4 tabledHeader">Service Id</div>
<div class="col-sm-4 tabledHeader">Service Type</div>
<div class="col-sm-1 tabledHeader">Synchronised</div>
<div class="col-sm-1 tabledHeader">Singleton</div>
<div class="col-sm-2 tabledHeader"></div>
</div>
<div id="myListOutput"></div>
</div>
In bootstrap 3.5 this works fine. In 4 every col is on a new line when they should be in-line.
If I remove the wrapping divs such as the myListOutput and myDynamicList the layout is corret. Cols side by side filling the comlete row and each row on a new line.
I need the wrapping divs in order to get a hook in the DOM to append my child elements to but this throws the layout
How should this be done in bootstrap 4.
why don't you wrap each line of the table body (inside the div with id="myListOutput") with a div that has a 'row' class and set flex-wrap to nowrap :
<div id="myDynamicList">
<div class="row flex-nowrap" id="myHeaderRow">
<div class="col-4 tabledHeader">Service Id</div>
<div class="col-4 tabledHeader">Service Type</div>
<div class="col-2 tabledHeader">Synchronised</div>
<div class="col-1 tabledHeader">Singleton</div>
<div class="col-1 tabledHeader"></div>
</div>
<div id="myListOutput">
<div class="row flex-nowrap">
<div class="col-4"> first </div>
<div class="col-4"> second </div>
<div class="col-2"> third </div>
<div class="col-1"> fourth </div>
<div class="col-1"> fifth </div>
</div>
<div class="row flex-nowrap">
...
</div>
...
</div>
</div>
The way I got it to work in the end was to add another set of row and col classes like this...
<div id="myDynamicList" style="display:none;" class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-4 tabledHeader">Service Id</div>
<div class="col-sm-4 tabledHeader">Service Type</div>
<div class="col-sm-1 tabledHeader">Synchronised</div>
<div class="col-sm-1 tabledHeader">Singleton</div>
<div class="col-sm-2 tabledHeader"></div>
</div>
</div>
</div>
<div class="row" id="listBody">
<div class="col-sm-12" id="myListOutput"></div>
</div>
I want to have 2 divs besides each other for col-md and higher, while having them above each other for col-sm and lower. So I tried to use the push and pull feature as mentioned in the docs but somehow it's not working. What I'm trying to do is get the RIGHT div above the LEFT div on col-sm and lower, basically reversing the order.
What am I doing wrong?
<div class="container">
<div class="row">
<div class="col-sm-12 col-sm-push-12 col-md-7">LEFT</div>
<div class="col-sm-12 col-sm-pull-12 col-md-5">RIGHT</div>
</div>
</div>
Here's a fiddle: https://jsfiddle.net/ko7euh77/1/
You just need to think "mobile-first"..
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-push-7 col-md-5">RIGHT</div>
<div class="col-sm-12 col-md-pull-5 col-md-7">LEFT</div>
</div>
</div>
Demo: http://www.codeply.com/go/2SN4r7KGwV
Bootstrap 4 Update
The push pull class are now order-* (using flexbox) in Bootstrap 4.
https://www.codeply.com/go/l3BOOH6JM9
<div class="row">
<div class="col-md-5 order-md-2">
<div class="card card-body">RIGHT</div>
</div>
<div class="col-md-7 order-md-1">
<div class="card card-body">LEFT</div>
</div>
</div>
It totally depends on the version you are using, for bootstrap 4 and above you can push and pull like this:
one more thing here order doesn't mean to the grid of the scree it will be the no.
<div class="row">
<div class="col-sm-2 order-md-2 order-sm-1" >
<div >RIGHT</div>
</div>
<div class="col-sm-10 order-md-1 order-sm-2 ">
<div >LEFT</div>
</div>
</div>
Here are the bootstrap docs for further reading
I have such code:
<div class="row inner">
<div class="col-md-6 col-sm-12 col-xs-12">
<h1>image is here...</h1>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<h2>Add</h2>
<div class="row">
<h3>text1</h3>
<p><span>BlaBlaBla1</span></p>
</div>
<div class="row">
<h3>text2</h3>
<p><span>BlaBlaBla2</span></p>
</div>
</div>
</div>
and so it looks like on mobile:
link
but i need that my second column appears on the top on mobile (not on the bottom)...
can i achieve it somehow without changing html code?
plunker: https://plnkr.co/edit/BKPhHxbZO0VQnubblh7f?p=preview
If using bootstrap why not just add push and pull classes? If you do not want to modify the markup you could do this javascript also. Why would you not want to modify the markup?
<div class="row inner">
<div class="col-md-6 col-md-push-6">
<h2>Add</h2>
<div class="row">
<h3>text1</h3>
<p><span>BlaBlaBla1</span></p>
</div>
<div class="row">
<h3>text2</h3>
<p><span>BlaBlaBla2</span></p>
</div>
</div>
<div class="col-md-6 col-md-pull-6">
<h1>image is here...</h1>
</div>
</div>
edit
Also, If you want to right align something in bootstrap for a particular media query add it to the stylesheet. So on mobile it would be text-align: right and on your next media to reset it you can add text-align: left
I am trying to build a mobile-first header. I have a single div class="row" with 4 columns on a single line for viewports of md, lg, but when the viewport drops to sm, xs I push 2 columns to a new row, and at this point the row and/or fluid-container does not resize (grow in height) causing a cut-off that only shows the top two columns.
Is there a way to prevent this, or to tell Bootstrap 3's row or container to grow?
Customer and total are cut off on xs and sm views, the gray area is a new div with the main page's content:
<div class="container-fluid">
<div class="row">
<!-- Sales Order # -->
<div class="col-xs-6 col-md-2 sp-sales-order">
<div ng-controller="tabTitleCtrl">
<div class="sp-header-text">
{{subtitle}}
</div>
<div>
{{title}}
</div>
</div>
</div>
<!-- Button Block -->
<div class="col-xs-6 col-md-4 col-md-push-4 sp-sales-button">
<div ng-include="toolbarPath">
</div>
</div>
<!-- Totals -->
<div class="col-xs-6 col-xs-push-6 col-md-2 col-md-push-4 sp-sales-total">
<div class="row">
<div class="col-sm-12 sp-header-text">
Total
</div>
<div class="col-sm-12">
{{Total | currency}}
</div>
</div>
</div>
<!-- Customer Input Box -->
<div class="col-xs-6 col-xs-pull-6 col-md-3 col-md-offset-1 col-md-pull-6 sp-sales-customer">
<div ng-include="headerPath"></div>
</div>
</div>
</div>
Try this. I built it from scratch to get away from the extra classes in your code so you could clearly see what's going on. I'm basically just relying on Bootstrap to stack the cols for me at different display widths - without overdoing the classes.
I think this is what you're going for.
Here's a Fiddle
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6">
Invoice
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<button class="btn btn-default">Void</button>
<button class="btn btn-default">Post</button>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="form-group">
<select class="form-control">
</select>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6">
Totals
</div>
</div>
</div>