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!
Related
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 have two rows of three columns that I have set up with Twitter Bootstrap like so:
<div class="row">
<div class="col-md-4">
Some Stuff
</div>
<div class="col-md-4">
Some more stuff
</div>
<div class="col-md-4">
Even more stuff
</div>
</div>
<div class="row">
<div class="col-md-4">
Some Stuff
</div>
<div class="col-md-4">
Some more stuff
</div>
<div class="col-md-4">
Even more stuff
</div>
</div>
This works fine for a certain pixel width (two rows of three nice columns), but when I reduce the screen size, it has 2 in one row, and then 1 on another row (for 1 row). And then when an iPhone screen size they are each in their own row, but they are off center.
How do I make it so that these rows are responsive so that, when the screen size is reduced, 2 columns are displayed as 50% of the container width? And then when the screen is reduced to a phone device width, each column takes up 100% of the container width.
See Example:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
</div>
Please try this,
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
</div>
use phone size css instead of desktop so it will remain same on all screen sizes.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-4">
Some Stuff
</div>
<div class="col-xs-4">
Some more stuff
</div>
<div class="col-xs-4">
Even more stuff
</div>
</div>
<div class="row">
<div class="col-xs-4">
Some Stuff
</div>
<div class="col-xs-4">
Some more stuff
</div>
<div class="col-xs-4">
Even more stuff
</div>
</div>
I am trying to keep some Bootstrap columns centered when the columns wrap around when the screen is shrunk.
My code looks like this:
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8 text-center">
<div style="font-size:36px;">Page Title</div>
</div>
<div class="col-md-2">
</div>
</div>
<div class="row text-center">
<div class="col-md-2">
</div>
<div class="col-md-2">
<div class="text-left" style="float:left;width:25%;">WWW</div>
</div>
<div class="col-md-2">
<div class="text-left" style="float:left;width:25%;">XXX</div>
</div>
<div class="col-md-2">
<div class="text-left" style="float:left;width:25%;">YYY</div>
</div>
<div class="col-md-2">
<div class="text-left" style="float:left;width:25%;">ZZZ</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
In the code above the 'Page Title' text stays centered horizontally on the screen as the screen width is reduced which is exactly what I want. I also want the four columns to stay centered horizontally when collapsed down to two columns and then when collapsed down to one column but the code above results in the columns being left aligned in the col-md-8 when wrapped. Is it possible to ensure that however the col-md-2 columns are wrapped they stay centered horizontally?
Your content is being left-aligned within their container divs by the class text-left. If you use the Bootstrap class text-center it will be centered.
Also regarding your column layout, I think you're working against the Bootstrap styles with those inline widths. I'd remove them and try using Bootstrap's own classes, like this:
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8 text-center">
<div style="font-size:36px;">Page Title</div>
</div>
<div class="col-md-2">
</div>
</div>
<div class="row text-center">
<div class="col-xs-12 col-sm-6 col-md-2 text-center">???
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">WWW</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">XXX</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">YYY</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">ZZZ</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 text-center">???
</div>
</div>
</div>
This will give you full-width columns on each div at the "xs" size (extra small, or mobile), then at the "sm" size (small) they'll grow to be 50%, then at md (medium) they'll shrink to be 1/6th.
Here's a bootply for your reference: http://www.bootply.com/t9XqPsBOpB
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/