recentpopularlog in

kme : bootstrap   89

« earlier  
javascript - Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink - Stack Overflow
<code class="language-javascript">// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
}

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})</code>
bootstrap  webdevel  javascript  solution 
june 2018 by kme
extremeFE/bootstrap-checkbox: Three state checkbox for Bootstrap | https://github.com/
Interesting, but I don't think you can use the form inputs anymore, because they're replaced with divs. You would have to listen on the change events, and handle the remote updates there.

If they'd just hidden the original elements, it would've been fine.
webdesign  bootstrap  javascript  checkbox  tristate  maybesolution 
may 2018 by kme
javascript - How can I change the default width of a Twitter Bootstrap modal box? - Stack Overflow | https://stackoverflow.com/
Note 3: In Bootstrap 3 and 4, there is a modal-lg class. So this may be sufficient, but if you want to make it responsive, you still need the fix I provided for Bootstrap 3.


You need to use this like this:
<code class="language-html">
<div class="modal fade" id="{{ modal_window_id }}" tabindex="-1" role="dialog" aria-labelledby="{{ modal_label_id }}">
<div class="modal-dialog modal-lg" role="document">
{# bootstrap version > 3.1.0 required for this to work #}
<div class="modal-content">
</div>
</div>
</div>
</code>

For Boostrap < 3:
<code class="language-css">body .modal-admin {
/* new custom width */
width: 750px;
/* must be half of the width, minus scrollbar on the left (30px) */
margin-left: -375px;
}</code>
bootstrap  css  ui  webdevel  solution 
february 2018 by kme
javascript - Bootstrap table not working correctly on Chrome but works fine on Firefox - Stack Overflow
I think that none of these did shit, except after I added 'word-break:break-word', then the problem I was having went away in Chrome.

Possibly related: https://bugs.chromium.org/p/chromium/issues/detail?id=155767
Add this class to your <table>

.my-table {
table-layout: fixed;
word-wrap: break-word;
}
chrome  bootstrap  tables  css  html  word-wrap  wordwrapping  annoyance  solution 
june 2017 by kme
Twitter Bootstrap 3.0 how do I "badge badge-important" now - Stack Overflow


Just add this one-line class in your CSS, and use the bootstrap label component.

.label-as-badge {
border-radius: 1em;
}

Compare this label and badge side by side:

<span class="label label-default label-as-badge">hello</span>
<span class="badge">world</span></blockquote
bootstrap  css  webdevel  webdesign  solution 
march 2017 by kme
Snippets Expand by Tab not working · Issue #13 · f/atom-bootstrap3 · GitHub
I just restarted Atom, and then both Emmet and atom-bootstrap3 seemed to play OK together.
atom  snippets  bootstrap  emmet  annoyance  maybesolution 
march 2017 by kme
How can I get my Twitter Bootstrap buttons to right align? - Stack Overflow
For Bootstrap 2.3, see: http://getbootstrap.com/2.3.2/components.html#misc -> Helper Classes -> .pull-right

For Bootstrap 3, see: http://getbootstrap.com/css/#helper-classes -> Helper classes

So, insert 'pull-right' into the class string and let bootstrap arrange the buttons.
twitter  bootstrap  webdevel  css  dammitbrain 
january 2017 by kme
SB Admin - Free Bootstrap Admin Template - Start Bootstrap
See the comments for some code that does a collapsible sidebar.
bootstrap  theme  design  webdesign  adminpanel  backend  ui 
december 2016 by kme
the callouts from the bootstrap documentation
<code class="language-css">/* Bootstrap 2 documentation - callout styles */
/* source: https://gist.github.com/matthiasg/6153853 */

/* Side notes for calling out things
-------------------------------------------------- */

/* Base styles (regardless of theme) */
.bs-callout {
margin: 20px 0;
padding: 15px 30px 15px 15px;
border-left: 5px solid #eee;
}
.bs-callout h4 {
margin-top: 0;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout code,
.bs-callout .highlight {
background-color: #fff;
}

/* Themes for different contexts */
.bs-callout-danger {
background-color: #fcf2f2;
border-color: #dFb5b4;
}
.bs-callout-warning {
background-color: #fefbed;
border-color: #f1e7bc;
}
.bs-callout-info {
background-color: #f0f7fd;
border-color: #d0e3f0;
}

/* below here, from the comments */
.bs-callout-success {
background-color: #dff0d8;
border-color: #d6e9c6;
}

.bs-callout-danger h4 {
color: #B94A48;
}
.bs-callout-warning h4 {
color: #C09853;
}
.bs-callout-info h4 {
color: #3A87AD;
}</code>
css  bootstrap  stylesheet  webdevel  solution 
july 2014 by kme
Ruby on Rails Bootstrap Glyphicons not working - Stack Overflow [http://stackoverflow.com/]
I was having a very similar issue as you but I figure it out! Find this part in your bootstrap.css file:

@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
and replace ../fonts/ with /assets. This is what your final code will look like.

@font-face {
font-family: 'Glyphicons Halflings';
src: url('/assets/glyphicons-halflings-regular.eot');
src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
rails  bootstrap  glyphicons  icons  css  solution 
july 2014 by kme
End to end web app in under an hour–Part 1 | Jeremy Howard [http://jphoward.wordpress.com/]
Here is the video tutorial that goes with this post: Here’s how to create a complete web app in under an hour. We will (naturally!) create a todo app. The features: Create, update, delete a todo Sort (and show sort order) Search Pagination We’ll try to make it somewhat user friendly, e.g. Date-picker widget for…
csharp  webapp  bootstrap  angularjs  javascript  tutorial  zerotohero  video 
january 2014 by kme
« earlier      
per page:    204080120160

Copy this bookmark:





to read