<div class="col-sm-6 col-md-4">
The above bootstrap element has 2 columns(col-sm-6 & col-md-4) within its element.
What does that mean?
Each bootstrap element can have another row and columns in it. For example if your element is 100px wide and you have 4 and 6 columns then you get 40px and 60px, minus padding of course.
See Two columns with two nested columns on https://getbootstrap.com/examples/grid/
The .col-md- prefix takes effect on medium devices (≥992px)
The .col-sm- prefix takes effect on small devices (≥768px)
You can read more about this on http://getbootstrap.com/css/#grid-options
Using both classes at the same time will let you achieve different behavior depending on the the device/resolution of the user.
For example, with the same markup and no additional CSS, you may achieve three columns side by side on bigger resolutions and 2 columns side by side and one beneath them on smaller resolutions
You can view and play around with this example on codepen: http://codepen.io/rebagliatte/pen/GNKvOB
col-xs-* ---> Extra small devices (phones, up to 480px)
col-sm-* ---> Small devices (tablets, 768px and up)
col-md-* ---> Medium devices (desktops, 992px and up)
col-lg-* ---> Large devices (large desktops, 1200px and up)
Each class above kicks in depending on the screen size.
So in your case col-sm-6 & col-md-4 .
Your container takes up 6 columns for small devices and 4 columns for medium devices and up.
Let's say if the screen size goes to extra small devices since we dont have anything specified by default it takes up full width available that being 12 columns.
Hope this helps :)
Related
I have added data using vue-editor and when I try to display it is displaying as
<p class="ql-align-justify">A total of 51 plant species were recorded in the sampled area (0.16 ha). The average GBH and height recorded were 75.41 cm and 15.59 metres respectively. Average tree density was 330 trees per ha. <em>Tectona grandis, Shorea robusta, Cassia fistula, Ehretia laevis, Mallatus phillipensis </em>and <em>Trewia nudiflora </em>were the dominant tree species in the corridor. The ground cover was dominated by shrubs (64.87 %), herbs (29.93%) and grasses (3.2%). The remaining area was barren ground.</p><p class="ql-align-justify"><br></p><p><br></p>
The html tags are not working. So how can I able to format this in the form of html. Please help me to have a solution.
I am getting the data as json format. Is "" causes the problem? Please help me to have a solution
Use v-html directive to output real html from html string; Say if content is the content added from vue-editor:
<span v-html="content"></span>
The bootstrap 3 grid system targets 4 different screen resolutions, depending on their width:
Large / col-lg (>= 1200px width)
Medium / col-md (992px - 1199px)
Small / col-sm (768px - 991px)
Extra Small / col-xs (<768px)
I find that these resolutions do not represent the user group of my webapp. For example Medium and Small combined is used by less than 5 % of my user base (meaning less than 5 % of my users have a screen resolution width of 768px to 1199px).
I would rather target the following 4 different resolutions:
ExtraLarge (>= 1600px width)
Large (1200px - 1599px)
SmallMedium (600 - 1199px)
MobileSmall (<= 599px)
So I not only like to add an extra large set but also change / replace the medium, small and extra small one.
Has anybody run into similiar issues? I would love to use a grid generator where I input my custom grid widths and get out the CSS code.
You can customize pretty much every aspect of Bootstrap using the customization section of the official site.
http://getbootstrap.com/customize/#grid-system
That link takes you directly to the grid system items.
Enter your values, and download your custom version of Bootstrap. Even includes a JSON file with your settings so you can re-import them later and make adjustments.
This is for the Bootstrap 4 users, who are using SCSS and like to create their own grid system using bootstrap mixins and variables.
#import '../../../bower_components/bootstrap/scss/variables';
#import '../../../bower_components/bootstrap/scss/mixins';
// Create custom variables to supply it for bootstrap's mixins
$grid-gutter-width-10: 10px;
$grid-gutter-widths-10: (
xs: $grid-gutter-width-10,
sm: $grid-gutter-width-10,
md: $grid-gutter-width-10,
lg: $grid-gutter-width-10,
xl: $grid-gutter-width-10
);
.row-xs {
#include make-row($gutters: $grid-gutter-widths-10);
#include make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths-10, $breakpoints: $grid-breakpoints)
}
I am trying to use separate media queries for Desktop / Normal tablets / Retina based tablets.
I have one set of visual design & icons for desktop, another set for tablets.
What is the best possible way to write a less mixin so that i can give one set of icons to desktop, another set to normal tablets and the 2X ones to retina based ones?
Right now, i am trying using the following snippet, but this one cant handle the normal tablet query. The less than, greater than symbol cant be used in media queries, else it would have been easy to write one mixin for device-pixel-ratio: 2 and another for device-pixel-ratio < 2 .
I tried with min-device-pixel-ratio:1 , but then, that gets applied to the desktop as well.
I need a query which can uniquely identify the normal tablets excluding the retina ones & desktop.
Is it correct to write like this for normal tablets? Putting a breakpoint just under 2 so that 2 and above will take the retina based query and 1.9 and below takes the normal tablet. But then, this query is applicable to desktops as well?
#media
only screen and (-webkit-max-device-pixel-ratio: 1.9),
only screen and ( max--moz-device-pixel-ratio: 1.9),
only screen and ( -o-max-device-pixel-ratio: 1.9),
only screen and ( max-device-pixel-ratio: 1.9),
{
Query that i have now.
.retina-image(#file-1x, #file-2x, #width-1x, #height-1x) {
background-image:~"url('#{imgPath}/#{file-1x}')";
width:#width-1x;
height: #height-1x;
#media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx)
{
background-image:~"url('#{imgPath}/#{file-2x}')";
background-size: #width-1x, #height-1x;
}
}
Any pointers will be of great help!
TIA
In Allan Jardine's DataTables plugin, what's the option by which no. of rows to display in table can be altered?
I know about iDisplayLength for server-side function. I am using it successfully.
When the database has sufficient rows, it shows those many rows.
But when, for example, if I set it to 10 (rows), it should display those many rows (even if there are only 3 rows in the database & the rest 7 blank rows should be displayed).
Basically I want to control the height of table, irrespective of how many records are there in the database.
I found out.
Just set this property in table initialisation
"sScrollY": "100px",
In place of 100px, put the size as required.
Wel one thing you could consider doing is controlling the minHeight of the class dataTables_wrapper wich is set at 302 px by default
.dataTables_wrapper {
clear: both;
min-height: 302px;
position: relative;
}
This usually is enough for everyone, but if you override the settings you could set it higher.
I am using DOJO for data grid presentation
<div id="grid_log" dojoType="dojox.grid.DataGrid" store="log" structure="window.layout_log" queryOptions="{deep:true}" query="{}" clientSort="true" rowsPerPage="5"> </div>
but problem is that grid_log doesn't show just 5 rows per page. What is wrong with this tag ? Why ignores rowsPerPage="5" ?
It's look like the rowsPerPage value isn't pages that are "viewed" - but rather, "virtual" pages. That is, the grid only renders portions of itself at a time (in order to improve performance for very large data sets) - and the rowsPerPage value is used to determine how many rows to render at a time.
If you scroll to a position on the grid that it outside the rendered pages, it will render it on demand.
If you are displaying more than 5 rows (due to the height that you have set on your grid) - then setting rowsPerPage to 5 will just cause the viewable portion to be rendered in batches of 5 rows at a time. i.e. there will be a query called to your datastore with start=0 and count=5, and another query sent with start=5 and count=5, etc - until all the visible rows are rendered.
However you can see on this page - it is example of grid with paging. May be it helps you.
As far as new dojo is concerned dojo 1.7.2 here you have the pagination feature where in the pages can be set for the enhanced datagrid.If that is what you want that you will have to import the pagination plugin from new dojo and set it in the grid.You can set the pages in the grid