twitter-bootstrap – Page 15

Recommended way to include bootstrap library in Ember.JS ember-cli App

February 6, 2023 by Tarik

BASH: bower install –save bootstrap Brocfile.js: app.import(‘vendor/bootstrap/dist/js/bootstrap.js’); app.import(‘vendor/bootstrap/dist/css/bootstrap.css’); The JS will be added to the app.js, which is linked by default, and the CSS will be added to assets/vendor.css, which as of May 14th, is also added by default. For reference: http://www.ember-cli.com/#managing-dependencies In response to @Joe’s question surrounding fonts and other assets, I was unable … Read more

Font Awesome vs Glyphicons in Twitter Bootstrap

February 5, 2023 by Tarik

In Bootstrap 2.x.x Glyphyicons were in image format, hence you can’t increase the size, change the color, background-color, etc easily. However, font-awesome gives you scalable vector icons that can instantly be customized — size, color, drop-shadow, and anything that can be done with the power of CSS. Font-awesome is really an alternative for Glyphyicons which … Read more

Bootstrap 3 .col-xs-offset-* doesn’t work?

February 5, 2023 by Tarik

Edit: as of Bootstrap 3.1 .col-xs-offset-* does exist, see bootstrap :: grid options .col-xs-offset-* doesn’t exist. Offset and column ordering are only for small and more. (ONLY .col-sm-offset-*, .col-md-offset-* and .col-lg-offset-*) See the official documentation : bootstrap :: grid options

Half columns in Twitter Bootstrap 3

February 4, 2023 by Tarik

You can try this : Just split a col-9 in 2 parts. Bootply : http://www.bootply.com/128927 HTML : <div class=”col-xs-3″> col-xs-3 </div> <div class=”col-xs-9″> <div class=”row”> <div class=”col-xs-6″>col-xs-4.5</div> <div class=”col-xs-6″>col-xs-4.5 </div> </div> </div>

How can I center an image in Bootstrap?

February 2, 2023 by Tarik

Image by default is displayed as inline-block, you need to display it as block in order to center it with .mx-auto. This can be done with built-in .d-block: <div class=”container”> <div class=”row”> <div class=”col-4″> <img class=”mx-auto d-block” src=”https://stackoverflow.com/questions/43226511/…”> </div> </div> </div> Or leave it as inline-block and wrapped it in a div with .text-center: <div … Read more

Center Contents of Bootstrap row container

February 2, 2023 by Tarik

With Bootstrap 4, there is a css class specifically for this. The below will center row content: <div class=”row justify-content-center”> …inner divs and content… </div> See: https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment, for more information.

Vertical alignment of text and icon in button

January 31, 2023 by Tarik

There is one rule that is set by font-awesome.css, which you need to override. You should set overrides in your CSS files rather than inline, but essentially, the icon-ok class is being set to vertical-align: baseline; by default and which I’ve corrected here: <button id=”whatever” class=”btn btn-large btn-primary” name=”Continue” type=”submit”> <span>Continue</span> <i class=”icon-ok” style=”font-size:30px; vertical-align: … Read more

Correct way to create rounded corners in Twitter Bootstrap

January 30, 2023 by Tarik

<div class=”img-rounded”> will give you rounded corners.

Simple Bootstrap page is not responsive on the iPhone

January 30, 2023 by Tarik

Make sure you add: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> to your <head>. I had a similar problem and I mistakenly thought it was just a matter of viewport width. Update: check out @NicolasBADIA answer for a more complete version.