Change bootstrap sass breaking points -


i want stack 2 columns when size of screen between 768 , 1024 pixels. how can achieve ? have change bootstrap variable ? use bootstrap-sass.

the default breakpoint in bootstrap are:

  • extra small devices phones (<768px)
  • small devices tablets (≥768px)
  • medium devices desktops (≥992px)
  • large devices desktops (≥1200px)

(source: http://getbootstrap.com/css/#grid)

when using sass can override following variables:

// small screen / phone //** deprecated `$screen-xs` of v3.0.1 $screen-xs:                  480px !default; //** deprecated `$screen-xs-min` of v3.2.0 $screen-xs-min:              $screen-xs !default; //** deprecated `$screen-phone` of v3.0.1 $screen-phone:               $screen-xs-min !default;  // small screen / tablet //** deprecated `$screen-sm` of v3.0.1 $screen-sm:                  768px !default; $screen-sm-min:              $screen-sm !default; //** deprecated `$screen-tablet` of v3.0.1 $screen-tablet:              $screen-sm-min !default;  // medium screen / desktop //** deprecated `$screen-md` of v3.0.1 $screen-md:                  992px !default; $screen-md-min:              $screen-md !default; //** deprecated `$screen-desktop` of v3.0.1 $screen-desktop:             $screen-md-min !default;  // large screen / wide desktop //** deprecated `$screen-lg` of v3.0.1 $screen-lg:                  1200px !default; $screen-lg-min:              $screen-lg !default; //** deprecated `$screen-lg-desktop` of v3.0.1 $screen-lg-desktop:          $screen-lg-min !default;  // media queries don't overlap when required, provide maximum $screen-xs-max:              ($screen-sm-min - 1) !default; $screen-sm-max:              ($screen-md-min - 1) !default; $screen-md-max:              ($screen-lg-min - 1) !default;

so need choose breakpoint change. set (in own variables.scss! never adjust bootstrap _variables.scss itself.) $screen-md 1024px. after have done can use bootstrap col classes determine when stack , when not.

<div class="col-xs-6  col-sm-12  col-md-12  col-lg-6">...</div>

this stack on sm , md size. on lg , xs take 50% of available width.

hope helps.


Comments

Post a Comment

Popular posts from this blog

searchKeyword not working in AngularJS filter -

i writing app using angularjs on front end. want search through table word/field; 1 search box everything. according article here: http://hello-angularjs.appspot.com/searchtable can use filter: searchkeyword this. this code, , not working expected. <label>search: <input ng-model="searchkeyword"></label> <table ng-repeat="post in posts | orderby: sort | filter: searchkeyword"> <tr> <td> {{index(post)}} </td> <td> {{post.title}} </td> <td> {{post.author}} </td> <td> {{post.content}} </td> <td> {{post.date | date: "d/m/yyyy"}} </td> </tr> </table> what should do? thank you try this: controller $scope.posts = [ {title:'title one', author:'author one', content: 'content one'}, {title:'title two', author:'author two', content: 'cont...
Read more

sequelize.js - Sequelize: sort by enum cases -

i have model ( article ) field (the name type ) of type enum('source', 'translated') , return 1 article ordered type field. source articles should returned before translated articles. like: article.findone(order: [ { type: [ 'source', 'translated' ] } ]); unfortunately there appears no built-in solution sorting enums. instead have sort by case , couldn't find documentation on how sequelize. what conventional approach here? sorting case hard in sequelize, sort field (the second answer in linked post) should possible: order: sequelize.fn('field', sequelize.col('type'), 'source', 'translated') it's supported mysql far know though
Read more

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -

i trying use following code create interactive gui changes color-space(hsv, rbg, grayscale etc) on event of button click. display opencv video in tkinter using multiprocessing being new python having problems multiprocessing , attempts on making gui change it's color space on button clicks hangs entire system. on it's implementation highly appreciated. thankyou. below code: import cv2 pil import image,imagetk import tkinter tk import numpy np multiprocessing import process , queue def quit_it(root,process): root.destroy() process.terminate() def black_andwhite(root,process): process.terminate p=process(target=capture_image, args=(5,queue, )) p.start() root.after(0, func=lambda: update_all(root, image_label, queue)) def update_image(image_label, queue): frame = queue.get() = image.fromarray(frame) b = imagetk.photoimage(image=a) image_label.configure(image=b) image_label._image_cache = b root.update() def update_all(root...
Read more