{"id":11941,"date":"2015-12-20T08:15:33","date_gmt":"2015-12-20T13:15:33","guid":{"rendered":"http:\/\/bangla.salearningschool.com\/?page_id=11941"},"modified":"2017-09-25T08:52:50","modified_gmt":"2017-09-25T12:52:50","slug":"bootstrap-grid-small-devices","status":"publish","type":"page","link":"http:\/\/bangla.sitestree.com\/?page_id=11941","title":{"rendered":"Bootstrap Grid \u2013 Small Devices"},"content":{"rendered":"

<code>
\nEqual Width
\n<pre>
\n<div class=”container”>
\n<div class=”row”>
\n<div class=”col”>
\n1 of 2
\n<\/div>
\n<div class=”col”>
\n1 of 2
\n<\/div>
\n<\/div>
\n<div class=”row”>
\n<div class=”col”>
\n1 of 3
\n<\/div>
\n<div class=”col”>
\n1 of 3
\n<\/div>
\n<div class=”col”>
\n1 of 3
\n<\/div>
\n<\/div>
\n<\/div>
\n<\/pre><\/p>\n

 <\/p>\n

Setting One Column Width
\n<pre>
\n<div class=”container”>
\n<div class=”row”>
\n<div class=”col”>
\n1 of 3
\n<\/div>
\n<div class=”col-6″>
\n2 of 3 (wider)
\n<\/div>
\n<div class=”col”>
\n3 of 3
\n<\/div>
\n<\/div>
\n<div class=”row”>
\n<div class=”col”>
\n1 of 3
\n<\/div>
\n<div class=”col-5″>
\n2 of 3 (wider)
\n<\/div>
\n<div class=”col”>
\n3 of 3
\n<\/div>
\n<\/div>
\n<\/div>
\n<\/pre><\/p>\n

 <\/p>\n

Variable Width Content
\n<pre><\/p>\n

<div class=”container”>
\n<div class=”row justify-content-md-center”>
\n<div class=”col col-lg-2″>
\n1 of 3
\n<\/div>
\n<div class=”col-12 col-md-auto”>
\nVariable width content
\n<\/div>
\n<div class=”col col-lg-2″>
\n3 of 3
\n<\/div>
\n<\/div>
\n<div class=”row”>
\n<div class=”col”>
\n1 of 3
\n<\/div>
\n<div class=”col-12 col-md-auto”>
\nVariable width content
\n<\/div>
\n<div class=”col col-lg-2″>
\n3 of 3
\n<\/div>
\n<\/div>
\n<\/div>
\n<\/pre><\/p>\n

 <\/p>\n

Equal Width Multi Row<\/p>\n

<pre>
\n<div class=”row”>
\n<div class=”col”>col<\/div>
\n<div class=”col”>col<\/div>
\n<div class=”w-100″><\/div>
\n<div class=”col”>col<\/div>
\n<div class=”col”>col<\/div>
\n<\/div>
\n<\/pre><\/p>\n

 <\/p>\n

Responsive Classes
\n<pre><\/p>\n

<div class=”row”>
\n<div class=”col”>col<\/div>
\n<div class=”col”>col<\/div>
\n<div class=”col”>col<\/div>
\n<div class=”col”>col<\/div>
\n<\/div>
\n<div class=”row”>
\n<div class=”col-8″>col-8<\/div>
\n<div class=”col-4″>col-4<\/div>
\n<\/div>
\n<\/pre><\/p>\n

 <\/p>\n

Stacked to Horizontal
\n<pre><\/p>\n

<div class=”row”>
\n<div class=”col-sm-8″>col-sm-8<\/div>
\n<div class=”col-sm-4″>col-sm-4<\/div>
\n<\/div>
\n<div class=”row”>
\n<div class=”col-sm”>col-sm<\/div>
\n<div class=”col-sm”>col-sm<\/div>
\n<div class=”col-sm”>col-sm<\/div>
\n<\/div>
\n<\/pre><\/p>\n

 <\/p>\n

Mix and Match
\n<pre><\/p>\n

<!– Stack the columns on mobile by making one full-width and the other half-width –>
\n<div class=”row”>
\n<div class=”col col-md-8″>.col .col-md-8<\/div>
\n<div class=”col-6 col-md-4″>.col-6 .col-md-4<\/div>
\n<\/div><\/p>\n

<!– Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop –>
\n<div class=”row”>
\n<div class=”col-6 col-md-4″>.col-6 .col-md-4<\/div>
\n<div class=”col-6 col-md-4″>.col-6 .col-md-4<\/div>
\n<div class=”col-6 col-md-4″>.col-6 .col-md-4<\/div>
\n<\/div><\/p>\n

<!– Columns are always 50% wide, on mobile and desktop –>
\n<div class=”row”>
\n<div class=”col-6″>.col-6<\/div>
\n<div class=”col-6″>.col-6<\/div>
\n<\/div>
\n<\/pre><\/p>\n

 <\/p>\n

Vertical Alignment
\n<pre><\/p>\n

<div class=”container”>
\n<div class=”row align-items-start”>
\n<div class=”col”>
\nOne of three columns
\n<\/div>
\n<div class=”col”>
\nOne of three columns
\n<\/div>
\n<div class=”col”>
\nOne of three columns
\n<\/div>
\n<\/div>
\n<div class=”row align-items-center”>
\n<div class=”col”>
\nOne of three columns
\n<\/div>
\n<div class=”col”>
\nOne of three columns
\n<\/div>
\n<div class=”col”>
\nOne of three columns
\n<\/div>
\n<\/div>
\n<div class=”row align-items-end”>
\n<div class=”col”>
\nOne of three columns
\n<\/div>
\n<div class=”col”>
\nOne of three columns
\n<\/div>
\n<div class=”col”>
\nOne of three columns
\n<\/div>
\n<\/div>
\n<\/div>
\n<\/pre><\/p>\n

Another
\n<pre>
\n<div class=”container”>
\n<div class=”row”>
\n<div class=”col align-self-start”>
\nOne of three columns
\n<\/div>
\n<div class=”col align-self-center”>
\nOne of three columns
\n<\/div>
\n<div class=”col align-self-end”>
\nOne of three columns
\n<\/div>
\n<\/div>
\n<\/div>
\n<\/pre><\/p>\n

 <\/p>\n

Horizontal Alignment<\/p>\n

<pre><\/p>\n

<div class=”container”>
\n<div class=”row justify-content-start”>
\n<div class=”col-4″>
\nOne of two columns
\n<\/div>
\n<div class=”col-4″>
\nOne of two columns
\n<\/div>
\n<\/div>
\n<div class=”row justify-content-center”>
\n<div class=”col-4″>
\nOne of two columns
\n<\/div>
\n<div class=”col-4″>
\nOne of two columns
\n<\/div>
\n<\/div>
\n<div class=”row justify-content-end”>
\n<div class=”col-4″>
\nOne of two columns
\n<\/div>
\n<div class=”col-4″>
\nOne of two columns
\n<\/div>
\n<\/div>
\n<div class=”row justify-content-around”>
\n<div class=”col-4″>
\nOne of two columns
\n<\/div>
\n<div class=”col-4″>
\nOne of two columns
\n<\/div>
\n<\/div>
\n<div class=”row justify-content-between”>
\n<div class=”col-4″>
\nOne of two columns
\n<\/div>
\n<div class=”col-4″>
\nOne of two columns
\n<\/div>
\n<\/div>
\n<\/div>
\n<\/pre><\/p>\n

 <\/p>\n

No Gutters
\n<pre><\/p>\n

.no-gutters {
\nmargin-right: 0;
\nmargin-left: 0;<\/p>\n

> .col,
\n> [class*=”col-“] {
\npadding-right: 0;
\npadding-left: 0;
\n}
\n}
\n<\/pre><\/p>\n

 <\/p>\n

Column Wrapping
\n<pre><\/p>\n

<div class=”row”>
\n<div class=”col-9″>.col-9<\/div>
\n<div class=”col-4″>.col-4<br \/>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.<\/div>
\n<div class=”col-6″>.col-6<br \/>Subsequent columns continue along the new line.<\/div>
\n<\/div>
\n<\/pre><\/p>\n

Column Reset<\/p>\n

<pre><\/p>\n

<div class=”row”>
\n<div class=”col-6 col-sm-3″>.col-6 .col-sm-3<\/div>
\n<div class=”col-6 col-sm-3″>.col-6 .col-sm-3<\/div><\/p>\n

<!– Add the extra clearfix for only the required viewport –>
\n<div class=”clearfix hidden-sm-up”><\/div><\/p>\n

<div class=”col-6 col-sm-3″>.col-6 .col-sm-3<\/div>
\n<div class=”col-6 col-sm-3″>.col-6 .col-sm-3<\/div>
\n<\/div>
\n<\/pre><\/p>\n

 <\/p>\n

Reordering – Flex order
\n<pre>
\nCopy
\n<div class=”container”>
\n<div class=”row”>
\n<div class=”col flex-unordered”>
\nFirst, but unordered
\n<\/div>
\n<div class=”col flex-last”>
\nSecond, but last
\n<\/div>
\n<div class=”col flex-first”>
\nThird, but first
\n<\/div>
\n<\/div>
\n<\/div>
\n<\/pre><\/p>\n

 <\/p>\n

Offsetting Columns<\/p>\n

<pre><\/p>\n

<div class=”row”>
\n<div class=”col-md-4″>.col-md-4<\/div>
\n<div class=”col-md-4 offset-md-4″>.col-md-4 .offset-md-4<\/div>
\n<\/div>
\n<div class=”row”>
\n<div class=”col-md-3 offset-md-3″>.col-md-3 .offset-md-3<\/div>
\n<div class=”col-md-3 offset-md-3″>.col-md-3 .offset-md-3<\/div>
\n<\/div>
\n<div class=”row”>
\n<div class=”col-md-6 offset-md-3″>.col-md-6 .offset-md-3<\/div>
\n<\/div>
\n<\/pre><\/p>\n

 <\/p>\n

Push and Pull<\/p>\n

<pre><\/p>\n

<div class=”row”>
\n<div class=”col-md-9 push-md-3″>.col-md-9 .push-md-3<\/div>
\n<div class=”col-md-3 pull-md-9″>.col-md-3 .pull-md-9<\/div>
\n<\/div>
\n<\/pre><\/p>\n

 <\/p>\n

Nesting
\n<pre><\/p>\n

<div class=”row”>
\n<div class=”col-sm-9″>
\nLevel 1: .col-sm-9
\n<div class=”row”>
\n<div class=”col-8 col-sm-6″>
\nLevel 2: .col-8 .col-sm-6
\n<\/div>
\n<div class=”col-4 col-sm-6″>
\nLevel 2: .col-4 .col-sm-6
\n<\/div>
\n<\/div>
\n<\/div>
\n<\/div>
\n<\/pre><\/p>\n

 <\/p>\n

SaSS Mixins
\n<pre><\/p>\n

$grid-columns: 12;
\n$grid-gutter-width-base: 30px;<\/p>\n

$grid-gutter-widths: (
\nxs: $grid-gutter-width-base, \/\/ 30px
\nsm: $grid-gutter-width-base, \/\/ 30px
\nmd: $grid-gutter-width-base, \/\/ 30px
\nlg: $grid-gutter-width-base, \/\/ 30px
\nxl: $grid-gutter-width-base \/\/ 30px
\n)<\/p>\n

$grid-breakpoints: (
\n\/\/ Extra small screen \/ phone
\nxs: 0,
\n\/\/ Small screen \/ phone
\nsm: 576px,
\n\/\/ Medium screen \/ tablet
\nmd: 768px,
\n\/\/ Large screen \/ desktop
\nlg: 992px,
\n\/\/ Extra large screen \/ wide desktop
\nxl: 1200px
\n);<\/p>\n

$container-max-widths: (
\nsm: 540px,
\nmd: 720px,
\nlg: 960px,
\nxl: 1140px
\n);
\n<\/pre><\/p>\n

 <\/p>\n

Mixins<\/p>\n

<pre><\/p>\n

\/\/ Creates a wrapper for a series of columns
\n@mixin make-row($gutters: $grid-gutter-widths) {
\ndisplay: flex;
\nflex-wrap: wrap;<\/p>\n

@each $breakpoint in map-keys($gutters) {
\n@include media-breakpoint-up($breakpoint) {
\n$gutter: map-get($gutters, $breakpoint);
\nmargin-right: ($gutter \/ -2);
\nmargin-left: ($gutter \/ -2);
\n}
\n}
\n}<\/p>\n

\/\/ Make the element grid-ready (applying everything but the width)
\n@mixin make-col-ready($gutters: $grid-gutter-widths) {
\nposition: relative;
\n\/\/ Prevent columns from becoming too narrow when at smaller grid tiers by
\n\/\/ always setting `width: 100%;`. This works because we use `flex` values
\n\/\/ later on to override this initial width.
\nwidth: 100%;
\nmin-height: 1px; \/\/ Prevent collapsing<\/p>\n

@each $breakpoint in map-keys($gutters) {
\n@include media-breakpoint-up($breakpoint) {
\n$gutter: map-get($gutters, $breakpoint);
\npadding-right: ($gutter \/ 2);
\npadding-left: ($gutter \/ 2);
\n}
\n}
\n}<\/p>\n

@mixin make-col($size, $columns: $grid-columns) {
\nflex: 0 0 percentage($size \/ $columns);
\nwidth: percentage($size \/ $columns);
\n\/\/ Add a `max-width` to ensure content within each column does not blow out
\n\/\/ the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
\n\/\/ do not appear to require this.
\nmax-width: percentage($size \/ $columns);
\n}<\/p>\n

\/\/ Get fancy by offsetting, or changing the sort order
\n@mixin make-col-offset($size, $columns: $grid-columns) {
\nmargin-left: percentage($size \/ $columns);
\n}<\/p>\n

@mixin make-col-push($size, $columns: $grid-columns) {
\nleft: if($size > 0, percentage($size \/ $columns), auto);
\n}<\/p>\n

@mixin make-col-pull($size, $columns: $grid-columns) {
\nright: if($size > 0, percentage($size \/ $columns), auto);
\n}
\n<\/pre>
\n<\/code>
\nReference: https:\/\/v4-alpha.getbootstrap.com\/layout\/grid\/<\/p>\n","protected":false},"excerpt":{"rendered":"

<code> Equal Width <pre> <div class=”container”> <div class=”row”> <div class=”col”> 1 of 2 <\/div> <div class=”col”> 1 of 2 <\/div> <\/div> <div class=”row”> <div class=”col”> 1 of 3 <\/div> <div class=”col”> 1 of 3 <\/div> <div class=”col”> 1 of 3 <\/div> <\/div> <\/div> <\/pre>   Setting One Column Width <pre> <div class=”container”> <div class=”row”> <div … <\/p>\n

Continue reading<\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11941","page","type-page","status-publish","hentry","nodate","item-wrap"],"jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":11939,"url":"http:\/\/bangla.sitestree.com\/?page_id=11939","url_meta":{"origin":11941,"position":0},"title":"Bootstrap (\u09ac\u09c1\u099f\u09b8\u09cd\u099f\u09cd\u09b0\u09cd\u09af\u09be\u09aa) Button (\u09ac\u09be\u099f\u09a8) Groups","author":"Rafiqul Islam","date":"December 20, 2015","format":false,"excerpt":"Article By: Protap Chandra \u09ac\u09c1\u099f\u09b8\u09cd\u099f\u09cd\u09b0\u09cd\u09af\u09be\u09aa\u09c7\u09b0 \u09b8\u09be\u09b9\u09be\u09af\u09cd\u09af\u09c7 \u09ac\u09be\u099f\u09a8\u09c7\u09b0 \u098f\u0995\u099f\u09bf \u09b8\u09bf\u09b0\u09bf\u099c\u0995\u09c7 \u098f\u0995\u099f\u09bf \u09b2\u09be\u0987\u09a8\u09c7 \u098f\u0995\u09a4\u09cd\u09b0\u09c7 \u0997\u09cd\u09b0\u09c1\u09aa\u09bf\u0982 \u0995\u09b0\u09c7 \u09b8\u09be\u099c\u09be\u09a8\u09cb \u09af\u09be\u09df\u0964 \u098f\u0995\u09c7 \u09ac\u09be\u099f\u09a8 \u0997\u09cd\u09b0\u09c1\u09aa \u09ac\u09b2\u09be \u09b9\u09df\u0964 \u09ac\u09be\u099f\u09a8 \u0997\u09cd\u09b0\u09c1\u09aa \u09a4\u09c8\u09b0\u09c0 \u0995\u09b0\u09a4\u09c7

element \u098f\u09b0 \u09b8\u09be\u09a5\u09c7 .btn-group \u0995\u09cd\u09b2\u09be\u09b8 (class) \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0 \u0995\u09b0\u09a4\u09c7 \u09b9\u09ac\u09c7\u0964 \u09a8\u09bf\u099a\u09c7\u09b0 \u0989\u09a6\u09be\u09b9\u09b0\u09a3 \u09a5\u09c7\u0995\u09c7 \u09ac\u09bf\u09b7\u09df\u099f\u09bf \u09aa\u09b0\u09bf\u09b7\u09cd\u0995\u09be\u09b0 \u09a7\u09be\u09b0\u09a3\u09be \u09aa\u09be\u0993\u09df\u09be \u09af\u09be\u09ac\u09c7\u0964