Bootstrap with custom css how to align text vertically?


Tags: css,twitter-bootstrap,alignment,center

Problem :

I was trying to add some custom code to bootstrap and in the end my text in the frame was not perfectly vertically centered.

Code is very simple and there is only a few lines, but I still could not make it vertically centered, here's how it looks like jsfiddle:

http://jsfiddle.net/atJzD/1/

It works perfect (text becomes vertically centered) if I do not include bootstrap css, but I really need to use it.

.init {
    border:2px solid #EEEEEE;
    font:14px/1.3 Verdana,"Lucida Grande",Arial,Helvetica,Sans-Serif;
    margin:0px;
    padding:5px;
    min-width:120px;
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

.taken span {background:none repeat scroll 0 0 #F08F78; }
.taken:hover{background:none repeat scroll 0 0 #FFC5B7;}


Solution :

Instead you can override some properties of default clases of bootstrap with .init class and use bootstrap alert message like this:

.init {
    border:2px solid #EEEEEE;
    font:14px/1.3 Verdana,"Lucida Grande",Arial,Helvetica,Sans-Serif;
    margin:0px;
    padding:5px;
    min-width:120px;
}

.alignleft {
    float: left;
}
.alignright {
    float: right;
}

.taken span {background:none repeat scroll 0 0 #F08F78; }
.taken:hover{background:none repeat scroll 0 0 #FFC5B7;}

can you view a demo Here


    CSS Howto..

    How can I set up my menu to slide out, only when the header is hovered on?

    How to make the Draggable element to get visible on top of all the element in the screen while dragging?

    How to get Sub Menu to right align using CSS

    How to call an HTML css style in a computed text field

    How to apply common JavaScript and CSS for all my jsp pages in the application?

    How to apply css hover on multiple elements

    How to make hover css menu fade in and out?

    How to achieve vertical centering with optional extra element and adjacent matching column, in pure CSS, no tables?

    Capybara/CSS: How to find an input field by label AND value?

    CSS newbie: How to align my link to the right side of the page?

    How to select all fields from a single box?

    how to apply stylesheet to wp frontend, via plugin i created?

    how do i avoid this title from overflowing?

    How to achieve mouseover effect where a hover div slides in from the side

    CSS Tooltip has different position in different browsers. How can I account for this?

    Setting a revealing onhover behaviour for multiple elements-pairs with only CSS - how come this works?

    How to Write an Angular directive to update CSS class based on form validation

    How to center align a div vertically which uses bootstrap?

    How to use css media query to switch animations

    How to hardware accelerate a box-shadow animation in CSS?

    CSS : how to center a input inside a div

    responsive image gallery with different heights - how to achieve this with css (or jquery)

    How to render CSS and HTML elements back to the Client's Browser from Form-POST acction and JavaScript?

    How to make height in CSS responsive?

    How do I override css for a particular control? [closed]

    jQuery - How to show element when another has a value

    How to Add custom Css Clases to PyroCMS contact form elements

    How is Bootstrap's `nav` class making anchors move to their own line

    how to use CSS opacity to let background bleed through in IE8?

    How to invert the pentagon created using CSS?