twitter-bootstrap-3

bootstrap 3 border-radius less mixin gone

by

Aha! I have located the answer… Remove .border-radius() and .border-*-*-radius mixins. As only Android 2.1, iOS 3.2, and older desktop browsers require a prefixed version, we’ve removed the base mixin. Since we no longer require prefixes for independent corners, we’ve dropped those mixins as well. Mixins for a single side, like .border-left-radius, are still available. … Read more

Handle Bootstrap modal hide event in Vue JS

by

Bootstrap uses JQuery to trigger the custom event hidden.bs.modal so it is not easily caught by Vue (which I believe uses native events under the hood). Since you have to have JQuery on a the page to use Bootstrap’s native modal, just use JQuery to catch it. Assuming you add a ref=”vuemodal” to your Bootstrap … Read more

Can I have two columns inside a Bootstrap Panel?

by

Sure.. just like you’d create any Bootstrap columns: <div class=”panel panel-default”> <div class=”panel-heading”>Title</div> <div class=”panel-body”> <div class=”row”> <div class=”col-md-6″>col1</div><div class=”col-md-6″>col2</div> </div> <div class=”row”> <div class=”col-md-6″>col1</div><div class=”col-md-6″>col2</div> </div> <div class=”row”> <div class=”col-md-6″>col1</div><div class=”col-md-6″>col2</div> </div> </div> </div> http://www.bootply.com/114526

Bootstrap, pull-left for small devices

by

Just add this to your SASS file: @media (max-width: $screen-xs-max) { .pull-xs-left { float: left; } .pull-xs-right { float: right; } } @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { .pull-sm-left { float: left; } .pull-sm-right { float: right; } } @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { .pull-md-left { float: left; } .pull-md-right { float: … Read more

Bootstrap 3 – Set Container Width to 940px Maximum for Desktops?

by

There is a far easier solution (IMO) in Bootstrap 3 that does not require you to compile any custom LESS. You just have to leverage the cascade in “Cascading Style Sheets.” Set up your CSS loading like so… <link type=”text/css” rel=”stylesheet” href=”https://stackoverflow.com/css/bootstrap.css” /> <link type=”text/css” rel=”stylesheet” href=”http://stackoverflow.com/css/custom.css” /> Where /css/custom.css is your unique style definitions. … Read more

How to create a Label with close icon in Bootstrap?

by

I ended up with http://jsfiddle.net/7zkCU/30/ (adapted from http://maxwells.github.io/bootstrap-tags.html): <span class=”tag label label-info”> <span>Example Tag</span> <a><i class=”remove glyphicon glyphicon-remove-sign glyphicon-white”></i></a> </span> CSS: .tag { font-size: 14px; padding: .3em .4em .4em; margin: 0 .1em; } .tag a { color: #bbb; cursor: pointer; opacity: 0.6; } .tag a:hover { opacity: 1.0 } .tag .remove { vertical-align: bottom; top: … Read more

How to create a page header in Bootstrap 4?

by

According to the migration docs, the Bootstrap 4 utility classes should be used instead: <div class=”pb-2 mt-4 mb-2 border-bottom”> Page header </div> https://codeply.com/go/20jBKvMkHx pb-2 – padding bottom 2 spacer units mt-4 – margin top 4 spacer units mb-2 – margin bottom 2 spacer units border-bottom – border-bottom: 1px solid rgb(222, 226, 230)