I understand how the Bootstrap grid layout works, but I did not see how to handle the rows.
On a medium screen, given rows with col-md-2 there are six columns of data. As I shift to smaller screens I would like a col-sm-3 to show four columns of data, and consequently col-xs-6 to reduce that down to two columns of data on mobile.
The data is pulled from mysql, so each column will be different in length (and thus also height). How am I supposed to handle the row <div class="row">? Since in xs the row will be for two columns, in sm it will be for four columns and in md it will handle six columns?
I tried removing the row completely and things do not line up properly. Any ideas?
Bootstrap handles this exactly the way you want - it will wrap the 'extra' div columns on the smaller devices. So, the term 'row' is a bit misleading in that it might span several horizontal rows if you are on a smaller device.
You can optionally insert a special clear in between the columns if you have varying heights and you want the tops of the next HORIZONTAL row to line up, e.g.:
<div class="clearfix visible-xs-block"></div>
Note that the above would insert a clear ONLY on XS devices since 'visible-xs-block' is included in the class list. If you column elements are the same height, however, this is superflous as the next row will just wraps pleasantly under the previous.
here is a helptile to the the bootstrap documentation example you are looking for:
I've created a Plunkr for discussion: https://plnkr.co/edit/VlnWhSqyKUdbPCKz4IMh?p=preview (resize to see the responsive behavior)
<div class="row">
<div class="col-md-2 col-sm-3 col-xs-6"><b>Col 1: </b>Lorem Ipsum is simply dummy...</div>
<div class="col-md-2 col-sm-3 col-xs-6"><b>Col 2: </b>Lorem Ipsum is simply dummy...</div>
<div class="col-md-2 col-sm-3 col-xs-6"><b>Col 3: </b>Lorem Ipsum is simply dummy...</div>
<div class="col-md-2 col-sm-3 col-xs-6"><b>Col 4: </b>Lorem Ipsum is simply dummy...</div>
<div class="col-md-2 col-sm-3 col-xs-6"><b>Col 5: </b>Lorem Ipsum is simply dummy...</div>
<div class="col-md-2 col-sm-3 col-xs-6"><b>Col 6: </b>Lorem Ipsum is simply dummy...</div>
</div>
I'm not sure, but I think your question is about how to distribute content into different divs. So, in
md: all content in 6 columns
sm: all content in just 4 columns
xs: all content in just 2 columns
Is this the right understanding? If so, it's not possible to achieve this with Bootstrap 3's grid system.
Related
I am trying to create a vba macro that could copy data from excel file to a webpage.
However, the 2 input boxes where I am going to paste data doesn't have ID name.
The 2 input boxes where I need to paste data is just within the same row.
Input Box 1 - Row 3, Col 3
Input Box 2 - Row 3, Col 5.
<input class="JSTextfield" maxlength="29" autocomplete="off" type="text" tabindex="2" style="width: 186px; text-align: left;" originalstring="" prevwidth="186">
this html element
<input type="month" class="form-control" aria-describedby="" placeholder="From" id="id_From_Duration1" name="From_Duration1" value="" maxlength="7" onfocus="(this.type='month')" min="1940-01" max="2025-12">
<small class="text-muted"> Format:YYYY-MM</small>
i tried to do this way
self.webdriver.find_element_by_name("From_Duration1").click()
self.webdriver.find_element_by_name(i).send_keys("032019", Keys.ENTER)
there is no day needed ,the form should be filled like this eg. March 2019
Hi I create team (It works), but I want to calculate prices. When you choose player (his price is available), I want to subtract from default price. So default price is 100 and if you choose player who cost 5, angular calculate to 95 and then send to database.
extract of HTML of one player:
<mat-form-field>
<mat-select placeholder="Goalkeepers" formControlName="goalkeeper">
<mat-option *ngFor="let player of goalkeepers" [value]="player.id">
{{player.name}} {{player.surename}} ({{player.price}}M)
</mat-option>
</mat-select>
<mat-error *ngIf="form.get('goalkeeper').invalid">Pleasse enter a goalkeeper.</mat-error>
</mat-form-field>
And than I have badget of team:
<p *ngFor="let userTeam of userTeamDetails">
<span *ngIf="userTeam.badget">
Tvoje dostupne peniaze: {{userTeam.badget}}M €
</span>
</p>
I tried to make {{userTeam.badget - player.price}}, but userTeam was not known and I don´t want to see in every player price.
What possibilities I have to calculate this? I don´t have any idea. Thanks.
You can use ng-container in conjunction with ngIf to conditionally display the calculated price only when the team and its budget exists. Example:
<mat-option *ngFor="let player of goalkeepers" [value]="player.id">
{{player.name}} {{player.surename}} ({{player.price}}M)
<ng-container *ngIf="userTeam?.badget">{{userTeam.badget - player.price}}</ng-container>
</mat-option>
I am getting started with bootstrap grid and am trying to get this layout ready.[![enter image description here][1]][1]
I am a bit confused about how to divide the the three main columns into separate parts so I can place the corresponding text/images as shown in the figure
I started creating a basic layout but I am not able to get it to the right point:
<div class="row" style="border: 1px solid;">
<div class="col-xs-4">
<div class="col-xs-12 col-md-offset-4">
XXX
</div>
<div class="col-xs-12 ">
<div class="col-xs-12 ">
first column second
</div>
<!--<div class="col-xs-12 ">
first column second
</div>-->
</div>
</div>
<div class="col-xs-4" style="border: 1px solid;">
<div class="col-xs-12 ">
second column first
</div>
<div class="col-xs-12 ">
second column second
</div>
</div>
<div class="col-xs-4" style="border: 1px solid;">
<div class="col-xs-12 ">
third column first
</div>
</div>
</div>
I tried to centralize the first row in the first column which seem to look OK. But then, I am not able to divide the second row into separate columns. And similar issues will be there for 2nd and 3rd columns. Can you give some pointers on how to go about getting the attached layout?
Bootstrap works using a 12 column layout. So if you would like 2 equal columns you would need to set each value as 6.
Using your example for the second column you would put
<div class="col-xs-4" style="border: 1px solid;">
<div class="col-xs-6 ">
second column first
</div>
<div class="col-xs-6 ">
second column second
</div>
</div>
Thanks
How much row do you recommend to use in this layout?. I think I'm doing something wrong because I can not get the location of the SPAN 4 SPAN 4 INTO ROW
http://imgur.com/ZdrHrTN
There is no problem doing what you want, you just need to be carful with the HTML when you have nested columns. Here's a working example with fluid rows http://jsfiddle.net/panchroma/yYFMT/
When using fluid rows, note that spans of the nested columns add to 12 and the HTML is
<div class="row-fluid">
<div class="span8">
<div class="row-fluid">
<div class="span6">nested col</div>
<div class="span6">nested col</div>
</div> <!-- end nested row -->
</div> <!-- end span 8 parent -->
<div class="span4">
span 4
</div>
</div> <!-- end row -->
If you don't have fluid rows, the spans of the nested columns add up to the width of the parent, eg
<div class="row">
<div class="span8">
<div class="row">
<div class="span4">nested col</div>
<div class="span4">nested col</div>
</div> <!-- end nested row -->
</div> <!-- end span 8 parent -->
<div class="span4">
span 4
</div>
</div> <!-- end row -->
Here's a working example of with non-fluid rows: http://jsfiddle.net/panchroma/MX6GK/
Good luck!