Human Cyborg Relations Human Cyborg Relations - 6 months ago 38
HTML Question

How can I center columns in a row in bootstrap?

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

<style>

h1 {
text-align: center;
color: white;
}

#box {
background: #005A31;
position: relative;
top: 25vh;
width: 50%;
}

#results {
background: #F3FAB6;
margin: 1%;
text-align: right;
font-size: 300%;
}

.buttons {
background: #A8CD1B;
margin: 1%;
text-align: center;
display: inline-block;
border: hidden;
border-radius: 20%;
font-size: 200%;
padding: 4%;
}

.buttons:hover {
cursor: pointer;
background: #F3FAB6; !important
}

.operations {
background: #CBE32D;
}

.center-block {
float: none !important;
}


</style>

<html>
<div class="container-fluid">
<div class="container" id="box">
<h1>JavaScript Calculator</h1>
<div id="results">0</div>
<div class="row">
<div id="seven" class="buttons col-md-2 center-block">7</div>
<div id="eight" class="buttons col-md-2 center-block">8</div>
<div id="nine" class="buttons col-md-2 center-block">9</div>
<div id="multiply" class="buttons operations col-md-3 center-block">x</div>
</div>
<div class="row">
<div id="four" class="buttons col-md-2 center-block">4</div>
<div id="five" class="buttons col-md-2 center-block">5</div>
<div id="six" class="buttons col-md-2 center-block">6</div>
<div id="divide" class="buttons operations col-md-3 center-block">/</div>
</div>
<div class="row">
<div id="one" class="buttons col-md-2 center-block">1</div>
<div id="two" class="buttons col-md-2 center-block">2</div>
<div id="three" class="buttons col-md-2 center-block">3</div>
<div id="add" class="buttons operations col-md-3 center-block">+</div>
</div>
<div class="row">
<div id="decimal" class="buttons col-md-2 center-block">.</div>
<div id="zero" class="buttons col-md-2 center-block">0</div>
<div id="ans" class="buttons col-md-2 center-block operations">Ans</div>
<div id="equals" class="buttons col-md-3 operations center-block">=</div>
</div>
</div>
</div>
</html>


I'm trying to create a JavaScipt calculator. I've got the basic stuff down, but I just can't seem to center the
<div>
's that I've created for buttons. I'm trying to use the center-block property for bootstrap, but that doesn't seem to change anything.

See this JSFiddle: https://jsfiddle.net/uqfd88o5/

Answer

I added a container div id="rowcontainer" for all the buttons. Then added a CSS text-align:center; to that container

<html>
    <div class="container-fluid">
        <div class="container" id="box">
            <h1>JavaScript Calculator</h1>
            <div id="results">0</div>
            <div id="rowcontainer">


            <div class="row">
                <div id="seven" class="buttons col-md-2 center-block">7</div>
                <div id="eight" class="buttons col-md-2 center-block">8</div>
                <div id="nine" class="buttons col-md-2 center-block">9</div>
                <div id="multiply" class="buttons operations col-md-3 center-block">x</div>
            </div>
            <div class="row">
                <div id="four" class="buttons col-md-2 center-block">4</div>
                <div id="five" class="buttons col-md-2 center-block">5</div>
                <div id="six" class="buttons col-md-2 center-block">6</div>
                <div id="divide" class="buttons operations col-md-3 center-block">/</div>
            </div>
            <div class="row">
                <div id="one" class="buttons col-md-2 center-block">1</div>
                <div id="two" class="buttons col-md-2 center-block">2</div>
                <div id="three" class="buttons col-md-2 center-block">3</div>
                <div id="add" class="buttons operations col-md-3 center-block">+</div>
            </div>
            <div class="row">
                <div id="decimal" class="buttons col-md-2 center-block">.</div>
                <div id="zero" class="buttons col-md-2 center-block">0</div>
                <div id="ans" class="buttons col-md-2 center-block operations">Ans</div>
                <div id="equals" class="buttons col-md-3 operations center-block">=</div>
            </div>
            </div>
        </div>
    </div>    
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
Comments