CODEWITHSUNDEEP
htmltwitter-bootstrap
jnDny
jnDny

Reputation: 55

Bootstrap/CSS Div Messing up CSS

So I have a class that on its own works fine, however as soon as I put it in a bootstrap row it messes it up. enter image description here

When out side of bootstrap on its own it shows up fine like enter image description here

HTML:

<div class="row">
<div class="col-lg-9">
    <center>
        <div id="output0" class="output">--</div>
        <div id="output1" class="output">--</div>
        <div id="output2" class="output">--</div>
        <div id="output3" class="output">--</div>
        <div id="output4" class="output">--</div>
        <div id="output5" class="output">--</div>
    </center>
</div>

CSS:

.output {
    margin: 20px;
    padding: 20px;
    background: gray;
    border-radius: 10px;
    font-size: 80px;
    width: 80px;
    color: white;
    display: inline-block;
}

Upvotes: 1

Views: 276

Answers (1)

Ricardo Mota
Ricardo Mota

Reputation: 161

You can do so:

.output {
    margin: 20px;
    padding: 20px;
    background: gray;
    border-radius: 10px;
    font-size: 80px;
    width: 80px;
    color: white;
        display: inline-table;
}
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
<div class="row">
<div class="col-lg-9">
    <center>
        <div id="output0" class="output">0</div>
        <div id="output1" class="output">1</div>
        <div id="output2" class="output">2</div>
        <div id="output3" class="output">50</div>
        <div id="output4" class="output">100</div>
        <div id="output5" class="output">1000</div>
    </center>
</div>
</div>

I hope to help.

Upvotes: 1

Related Questions