How do I align these boxes using bootstrap?


Tags: css,twitter-bootstrap

Problem :

Here is the code:

<div class="row" >

                <div id="box1" class="col-lg-4 box"style="">
                    <img src="images/1.png" style="" class="num-img">
                    <a href="#" style="text-decoration:none;color:#fff;">box 1 content</a>
                </div>  
                <div id="box2" class="col-lg-4 box" style="">
                        <img src="images/2.png" style="" class="num-img">
                        <a href="#" style="text-decoration:none;color:#fff;">box 2 content</a>
                </div>
                <div id="box3" class="col-lg-4 box" style="">
                        <img src="images/3.png" style="" class="num-img">
                        <a href="#" style="text-decoration:none;color:#fff;">box 3 content</a>  
                </div>

            </div>

CSS of the box:

.box
{
    height: 130px;
    width: 200px;
    background-color: #000;
    color: #FFF;
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

This is how I want it to look like: enter image description here

This is how it looks right now :

enter image description here

And this is how it looks when I remove the box class and write:

<div id="box1" class="col-lg-4 "style="">

enter image description here

How do I fix this??

Update (after adding margin:0 auto):

enter image description here



Solution :

You are possibly overriding the width of the col-lg-4 divs, depending on when your box css is loaded. Try

<div id="box1" class="col-lg-4">
    <div class="box">
        <img src="images/1.png" style="" class="num-img">
        <a href="Search.jsp" style="text-decoration:none;color:#fff;">box 1 content</a>
    </div>  
</div>  

This will not force the col-lg-4 div to have a set px width, but instead a % with the inner div having a set width.

If you want to center the blocks within the bootstrap cols, add margin: 0 auto; to your box css.

.box
{
    height: 130px;
    width: 200px;
    background-color: #000;
    color: #FFF;
    padding: 20px;
    font-size: 30px;
    text-align: center;
    margin: 0 auto;
}

example using your fiddle


    CSS Howto..

    How to create CSS for an existing web application that now is used in a Kiosk with touch screen

    How to prevent a closing tag from being removed?

    How to make text slide by only using css/html

    How to implement geometric div backgroud shapes in css

    how to write IE 8 specific css styles

    Show submenu with CSS without using an unordered list

    How to detect css properties in div

    How to use window height in css using jquery

    How did infusion.com skew the elements? The CSS file does not seem to have skewing in it and the menu is also skewed

    How can I get an element to stay within the browser's window width when its content is wider?

    How can I use CSS transitions to animate a responsive layout's vertical orientation?

    How to center verticaly n inline containers with different font-size?

    How to represent x and y in svg symbol

    How do I style all anchor tags inside a certain div?

    How to get a css stylesheet value that is not interpreted by the browswer?

    How to achieve equal horizontal AND vertical margins, AND equal column width in CSS?

    How do I animate background image size on hover smoothly in css?

    How to change the width of a CSS flex-box column?

    Show/Hide tr elements based on multiple CSS classes and input from multiple checkboxes

    WordPress - How to Disable a filter used by media.php from function.php? [closed]

    How to get the header and navbar on top?

    How to change text transparency in html/css?

    How to determine when document has loaded after loading external css

    CSS: how to style on character height versus line height

    How can I get a block to print complicated divs horizontally?

    How to align a flash movie to center with “overflow: hidden”?

    how to make background image stretch vertically

    how to zoom in an image and center it

    div shown with jquery is cropped

    Anyone know how to create CSS rectangle with one corner chopped off?