I don't know if my approach makes sense, however, I need to achieve a layout like this picture:
Now, I'm writing just a single <div class="row"></div> and representing each area with a column inside of it, e.g. <div class="col-sm-4></div>.
Without the yellow area, this works fine:
<div class="row">
<div class="col-sm-4 col-sm-push-8">green</div>
<div class="col-sm-4 col-sm-pull-4">red</div>
<div class="col-sm-4 col-sm-pull-4">blue</div>
</div>
How can I add the yellow area? There's no col-pull-16 or things like that, what's the way to go?
Thank you.
you need to check the Flexbox and sepcially the order property (http://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Have a look at this. Hope it helps.
<div class="row">
<div class="hidden-xs col-sm-4 col-md-4 col-lg-4">
RED
</div>
<div class="hidden-xs col-sm-4 col-md-4 col-lg-4">
BLUE
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
Green
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 navbar-fixed-bottom">
<div class="row">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">
Red
</div>
</div>
<div class="row">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">
BLUE
</div>
</div>
</div>
</div>
JSFIDDLE
http://jsfiddle.net/68n54p47/2/
Related
I have a section which looks like this:
The fields Budget and Status should be more on the right side, but I don't know how to achieve this without breaking it. The issue doesn't appear in JSFiddle: https://jsfiddle.net/om6jd4pn/
I tried putting the text to the right using padding-left:20em; in CSS and this HTML, but it's breaking after the first letter.
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-4">
<span class="bsprojectGroupTitle" id="indentBudget">Budget</span>
</div>
<div class="col-sm-12 col-md-9" id="projectBudget">
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div class="col-sm-6 col-md-3">
<span id="indentStatus">Status </span>
</div>
<div id="bsprojectProjectPhaseLine">
</div>
</div>
</div>
Any help is appreciated!
I am iterating over the array and displaying values using HTML component.
Please find my HTML markup below:
<div ng-show="showHistory" class="history-log">
<h5> {{'claim.group.history.label'|translate}}×</h5>
<ul class="history-items">
<li ng-repeat="history in claimGroupingHistories | orderBy : 'lastModifiedAt'">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<label>{{'users.history.dateTime'|translate}}:</label>
</div>
<div id="historyActionTime_{{$index}}" class="col-lg-8 col-md-8 col-sm-8 col-xs-8">{{history.lastModifiedAt | date:'d MMM yyyy HH:mm:ss'}}</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<label>{{'users.history.user'|translate}}:</label>
</div>
<div id="historyUser_{{$index}}" class="col-lg-8 col-md-8 col-sm-8 col-xs-8">{{history.createdBy}}</div>
</div>
<div class="row">
<div class="col-lg-4 col-md col-sm-4 col-xs-4">
<label>{{'claimgroup.history.oldvalueselected'|translate}}:</label>
</div>
<div layout="column">
<div ng-repeat="oldValue in history.oldValueSelected.split(',')" class="col-lg-8 col-md-8 col-sm-8 col-xs-8">{{oldValue}}</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md col-sm-4 col-xs-4">
<label>{{'claimgroup.history.newvalueselected'|translate}}:</label>
</div>
<div id="historyNewValueSelected_{{$index}}" class="col-lg-8 col-md-8 col-sm-8 col-xs-8">{{history.newValueSelected}} </div>
</div>
</li>
</ul>
</div>
While displaying values, if more values are available then, the alignment is getting collapsed.
Please find the attached screenshot.
Some of the values are coming in left hand side, actually all values should come on the Right Hand Side itself.
If i have to show the label & value inside the table means. How to bring the iterating values inside table.?
Is there a way to stack a various number of divs in multiple rows when theres not enough space to show them in a single row?
So what I mean is, imagine you have 20 divs but only 5 fit in the first row. Then there should be 4 rows with 5 items.
On the other hand when we only have 3 items then there should only be one row with 3 items.
Flexbox makes this easy. Have a look here.
The Bootstrap has 12 columns per rows. You can nest columns/rows but not recommend that you nest containers.
With that being said, you can have up to 12 columns per row. To control how it is 'stacked' you classify which type of columns it belongs to. See the demo.
https://codepen.io/pkshreeman/pen/LLYZqm
Resize the window, and you will see what it does for different settings.
Hope this helps.
This is the code used in demo:
<div class="container">
<div class="row">
<div class="col-md-6"> col-md-6 </div>
<div class="col-md-6"> col-md-6 </div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6"> col-md-6 col-sm-6 </div>
<div class="col-md-6 col-sm-6"> col-md-6 col-sm-6 </div>
</div>
<div class="row">
<div class="col-md-6 col-sm-2"> col-md-6 col-sm-2 </div>
<div class="col-md-6 col-sm-2"> col-md-6 col-sm-2 </div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">col-md-4 col-sm-6
</div>
<div class="col-md-4 col-sm-6">col-md-4 col-sm-6
</div>
<div class="col-md-4 col-sm-6">col-md-4 col-sm-6
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-2">col-md-4 col-sm-2
</div>
<div class="col-md-4 col-sm-2">col-md-4 col-sm-2
</div>
<div class="col-md-4 col-sm-2">col-md-4 col-sm-2
</div>
</div>
</div>
I'm using Bootstrap right now and i'm having an issue.
This is my code:
<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">...</div>
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">...</div>
<div id="fotos" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">...</div>
<div id="secciondos" class="col-xs-12 col-sm-8 col-md-9 col-lg-6 col-lg-push-3">...</div>
My layouts look like this:
But when my calendar height is bigger, this is what happens:
What can I do to fix it?.
I have fixed it! :)
<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
CALENDAR
</div>
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">
SECTION 1
</div>
<div class="clearfix visible-sm-block"></div>
<div class="clearfix visible-md-block"></div>
<div id="fotos" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
PICTURES
</div>
<div class="clearfix visible-lg-block"></div>
<div id="secciondos" class="col-xs-12 col-sm-8 col-md-9 col-lg-6 col-lg-push-3">
SECTION 2
</div>
Just putting clearfix class where before the layout that is moved worked!
Thanks for the answers!!.
I can't vote up your comments because I don't have enough reputation :(.
Using containers and rows as the Bootstrap team intended, it's easy to keep things aligned:
<div class="container-fluid">
<div class="row">
<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">Calendar
<br>Calendar</div>
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">Section One</div>
</div>
<div class="row">
<div id="fotos" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">Section Two</div>
<div id="secciondos" class="col-xs-12 col-sm-8 col-md-9 col-lg-6 col-lg-push-3">Section Three</div>
</div>
</div>
Demo
You should use a wrapper around your calendar and make it .col-md-6 and then another around your second section and add the .col-md-6 class also. Like this, you would make sure that both your section will always talke half the screen. (You can also use other classes sm, xs and etc depeding on the layout you want to have)
For example:
<div class="col-md-6">
<div id="calendario" class="col-xs-12 col-sm-4 col-md-3 col-lg-3">...</div>
</div>
<div class="col-md-6">
<div id="seccion" class="col-xs-12 col-sm-8 col-md-9 col-lg-6">...</div>
</div>
This way, you'd have to review also for example your seccion and calendar, because now the whol col-md-6 will contains 12 columns also. Hope it helped. You might want to review the Grid system in there also:
http://getbootstrap.com/css/#grid
I'm new to Bootstrap and i have a six columns contact form, when I'm looking it on my smartphone i see the button on top, or in general i see the order in revers to what i need, this is the code:
i see samples of push,
<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>
but how to do it with six columns?
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div1</div>
<div class="col-sm-12 col-md-6" >div2</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div3</div>
<div class="col-sm-12 col-md-6" >div4</div>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="row">
<div class="col-sm-12 col-md-6" >div5</div>
<div class="col-sm-12 col-md-6" >div6</div>
</div>
</div>
how can i reverse the ordering
What you are doing is much simpler when written with right way in Bootstrap.
Try the following snippet:
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4">div1</div>
<div class="col-md-2 col-sm-4">div2</div>
<div class="col-md-2 col-sm-4">div3</div>
<div class="col-md-2 col-sm-4">div4</div>
<div class="col-md-2 col-sm-4">div5</div>
<div class="col-md-2 col-sm-4">div6</div>
</div>
</div>
When on medium size screen the divs will show in a single line, but when you go on small screen, then will stack up to show 3 divs in a row, when you go on extra small screen the divs will stack up to show only one in a row.
Try this and inform me, if you are able to achieve the right layout or not.
Updated Code:
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div1</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div2</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div3</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div4</div>
<div class="col-md-2 col-sm-4 visible-lg visible-md visible-sm">div5</div>
<div class="col-md-2 col-sm-4">div6</div>
<div class="col-md-2 col-sm-4 visible-xs">div5</div>
<div class="col-md-2 col-sm-4 visible-xs">div4</div>
<div class="col-md-2 col-sm-4 visible-xs">div3</div>
<div class="col-md-2 col-sm-4 visible-xs">div2</div>
<div class="col-md-2 col-sm-4 visible-xs">div1</div>
</div>
</div>
You can't reverse the order but you can use some extra divs to achieve this functionality. Lets take extra 5 divs below 6th div and put them in reverse order. These divs will only show up on mobile screen. At the same time hide the above 5 divs at mobile screen. So now on mobile screen you are seeing divs in reverse order.
As users in comments said, please move your CSS to external .css file, that way it it easier to read and help,
Please use Plunkr or similar so people can better understand your question.
Try removing dir=rtl from outer div,
also you might want to read about Twitter Bootstrap's Helper Classes
This is a simple bootstrap grid example,
where on 'xs' screen each div will take 6 (1/2) of available space.
<div class="container">
<div class="row">
<div class="col-sm-8 col-xs-6">.col-md-1</div>
<div class="col-sm-4 col-xs-6">.col-md-2</div>
</div>
</div>
see this plunkr for example