Nasim Ahmed Nasim Ahmed - 1 month ago 12
CSS Question

Align buttons using bootstrap css

I have a few buttons for my online bank, such as deposit, withdraw, etc. I want 3 buttons across the first row and 4 buttons on the second row, but I'm not sure how? So far, all the buttons go across, and some are overlapping each other. I am using bootstrap to style the buttons but I don't see where to align. Here is my code so far:

home-page.jsp

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/home-page.css" >
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Home</title>
</head>
<body>
<p id="welcome">Welcome</p>
<p>Today's Date: <%= new java.util.Date() %></p>

<form name = "Deposit" action="deposit" id="deposit">
<p>
<button type="submit" class="btn btn-primary btn-lg">Deposit</button>
</p>
</form>

<form name = "Withdraw" action="withdraw" id="withdraw">
<p>
<button type="submit" class="btn btn-primary btn-lg">Withdraw</button>
</p>
</form>

<form name = "OpenAccount" action="open-account.jsp" id="openaccount">
<p>
<button type="submit" class="btn btn-primary btn-lg">Open Account</button>
</p>
</form>

<form name = "BalanceInquiry" action="balance.jsp" id="balance">
<p>
<button type="submit" class="btn btn-primary btn-lg">Balance Inquiry</button>
</p>
</form>

<form name = "Loan" action="loan.jsp" id="loan">
<p>
<button type="submit" class="btn btn-primary btn-lg">Loan Approval</button>
</p>
</form>

<form name = "Transfer" action="transfer.jsp" id="transfer">
<p>
<button type="submit" class="btn btn-primary btn-lg">Transfer</button>
</p>
</form>

<form name = "Transaction" action="transaction-history.jsp" id="transaction">
<p>
<button type="submit" class="btn btn-primary btn-lg">Transaction History</button>
</p>
</form>

</body>
</html>


css page:

body {
background-color: lightgray;
}

#welcome {
margin-top: 10px;
font-size: 45px;
font-family: cursive;
text-align: center;
}

p {
font-size: 15px;
font-family: cursive;
margin-top: -45px;
}

.btn btn-primary btn-lg{
float: left;
}

Answer

Make sure to use rows and columns. So:

<div class="row">

    <div class="col-md-4">
        <form name = "Deposit" action="deposit" id="deposit">
            <p>
                <button type="submit" class="btn btn-primary btn-lg">Deposit</button>
            </p>
        </form>
    </div>

    <div class="col-md-4">
        <form name = "Withdraw" action="withdraw" id="withdraw">
            <p>
                <button type="submit" class="btn btn-primary btn-lg">Withdraw</button>
            </p>
        </form>
    </div>

    <div class="col-md-4">
        <form name = "OpenAccount" action="open-account.jsp" id="openaccount">
            <p>
                <button type="submit" class="btn btn-primary btn-lg">Open Account</button>
            </p>
        </form>
    </div>

</div>