I am studying this tutorial to convert columns into rows for small devices. Please click it
Problem is: it shows all columns and rows in in line. Am I missing anything?
Plunker link
HTML
<div class="container">
<div class="row">
<div class="col">
User Name
</div>
<div class="col">
Email Address
</div>
<div class="col">
First Name
</div>
<div class="col">
Last Name
</div>
<div class="col">
Is Active
</div>
</div>
<div class="row">
<div class="col">
User Name 1
</div>
<div class="col">
Email Address 1
</div>
<div class="col">
First Name 1
</div>
<div class="col">
Last Name 1
</div>
<div class="col">
Is Active 1
</div>
</div>
</div>
js dependencies
angular.min.js
angular-route.min.js
angular-animate.js
angular-touch.js
ui-bootstrap-tpls.min.js
Css
bootstrap.min.css
The .col class (Auto-layout column) is new to Bootstrap 4.x, and the plunker is including Bootstrap 3.x.
Use .col in 4.x: Demo
or, use of the specific grid units (.col-md-*) in 3.x
Related
This is a simple question, but for some reason, I'm not getting the desired result.
Here's a snippet of the code inside my index.html file
<div class="container">
<div class="row">
<div class="col-xs-1">
<div ui-view="sidebar"></div>
</div>
</div>
<div class="row">
<div class="col-xs-11">
<div ui-view="content"></div>
</div>
</div>
</div>
What I'm hoping will happen is that the sidebar will take up 1 column and the rest of it will take up the remaining columns. However, when I view the page, the sidebar and the content are shown stacked on top of each other. Am I not allowed to put a ui-view inside a div container?
Try to write 2 columns in same row:
<div class="container">
<div class="row">
<div class="col-xs-1">
<div ui-view="sidebar"></div>
</div>
<div class="col-xs-11">
<div ui-view="content"></div>
</div>
</div>
</div>
i have this code for displaying images using slick.js.
<div>
<slick infinite="true" slides-to-show="4" slides-to-scroll="1">
<div ng-repeat="var in myArray" class="slick-item">
<div class="truckImage truck-error"></div>
</div>
</slick>
</div>
and below is the output.
if i use three different divs than it works fine but not with ng-repeat.
instead it should come in a single row as originally slick js works.
Try by adding a data attribute to your declaration
Example,
<slick infinite="true" data="myArray" slides-to-show="4" slides-to-scroll="1">
<div ng-repeat="var in myArray" class="slick-item">
<div class="truckImage truck-error"></div>
</div>
</slick>
<div>
<slick infinite="true" slides-to-show="4" slides-to-scroll="1">
<div class="row">
<div ng-repeat="var in myArray" class="slick-item">
<div class="col-md-4 truckImage truck-error"></div>
</div>
</div>
</slick>
</div>
I think it will work for you, let me know if it is not working. i have just added <div class="row"> and then <div class="col-md-4 truckImage truck-error"></div>
I have the following snippet in my AngularJS app:
<div ng-repeat="proverb in proverbs">
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
</div>
</div>
</div>
This will generate a div element with the class col-sm-6 for every proverb in my proverbs array. My intention is to display two columns whenever a screen is big enough.
Despite not using Bootstrap's .row element, the above snippet works exactly as intended.
The question is, how could I include a .row element that would only appear every second iteration of ng-repeat so that I would get the following end result:
<div class="row">
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
</div>
</div>
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
</div>
</div>
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
</div>
</div>
</div>
Also, given that whenever the sum of the spans of .col elements in Bootstrap is greater than 12 the next element gets pushed down, is there even any reason to use the .row class other than to guarantee a new row is generated before all columns are completely filled?
If you don't need the .row then you could do this
<div ng-repeat="proverb in proverbs">
<div class="col-sm-6">
<div class="alert alert-warning">
{{proverb}}
<ng-show="$index % 2 == 0" br/>
</div>
</div>
</div>
I have an array of products. I would like to display them in rows, with 4 products per row. Right now my code is
<div ng-repeat="product in products" class="col-md-3">
<p> {{product.name}} </p>
<p> {{product.price}} </p>
</div>
However, this is not displaying properly. I have tried to incorporate rows with an ng-if, but this is as close as I've come:
<div ng-repeat="product in products">
<div ng-if="$index %4 == 0" class="row">
<div class="col-md-3">
(content)
</div>
</div>
<div ng-if="$index %4 != 0" class="col-md-3">
(content)
</div>
</div>
I think I know why the above doesn't work: if index %4 != 0then the column that is created is not actually put inside of the row made before.
Is there an angular way to do this? Do I need a custom directive? Note: I have managed a solution not using angular directives but it doesn't seem clean, so I would like to do it "angularly" if possible.
You should be able to use your first method just fine, here's the html I wired up in a js fiddle:
<div ng-app="app">
<div ng-controller="ParentCtrl">
<div class="container">
<div class="row">
<div data-ng-repeat="option in options" class="col-md-3">
{{ option }}
</div>
</div>
</div>
</div>
</div>
Fiddle: http://jsfiddle.net/ubexop9p/
You will have to play around with the frame sizes if your monitor is too small, but I was able to get it do what you wanted.
Do you have that wrapped in a container or container-fluid? I believe that's required for the grid system to work.
<div class="container">
<div class="col-md-3">Col 1</div>
<div class="col-md-3">Col 2</div>
<div class="col-md-3">Col 3</div>
<div class="col-md-3">Col 4</div>
<div class="col-md-3">Col 5</div>
</div>
Turns out it was a problem with the content I was putting inside the columns, the code I posted does in fact work.
I'm having a problem in Bootstrap 3 in using col-xs-* for mobile devices..
I'm using below code for mobile..
<div class="row">
<div class="col-xs-6"> div content 1 </div>
<div class="col-xs-6"> div content 2 </div>
<div class="col-xs-6"> div content 3 </div>
<div class="col-xs-6"> div content 4 </div>
<div class="col-xs-6"> div content 5 </div>
<div class="col-xs-6"> div content 6 </div>
</div>
here, div's are equally(50%) sharing in both Mobile Horizontal/Vertical views..
But I want to get 3 div blocks in mobile Horizontal view & 2 blocks in Vertical view..
for this I tried below code also. But no Use...
<div class="row">
<div class="col-xs-6 col-sm-4"> div content 1 </div>
<div class="col-xs-6 col-sm-4"> div content 2 </div>
<div class="col-xs-6 col-sm-4"> div content 3 </div>
<div class="col-xs-6 col-sm-4"> div content 4 </div>
<div class="col-xs-6 col-sm-4"> div content 5 </div>
<div class="col-xs-6 col-sm-4"> div content 6 </div>
</div>
please check below jpg's for ref:
Please help me in this..
You need to adjust the break point for the col-sm-x classes. In bootstraps CSS file, you will find a line like:
#media (min-width: 768px) {
.col-sm-1, .col-sm-2, ....
Change the 768px to wherever you want the break point where those classes to be overridden by the col-xs-x classes.