I have two buttons in page. According to W3Schools, the page is divided into 12 columns. I want the two buttons to be 4 columns wide but from column 2 to 5 and the second from column 8 to 11. How can I do this? I am using using bootstrap to do this.
Using empty ‘p’ elements doesn’t seem to work as seen below.
JavaScript
x
11
11
1
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
3
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
4
5
<div class="row container fluid">
6
<p class="col-sm-2"></p>
7
<input type="button" id="cancel" name="cancel" value="Cancel" onclick="cancel();" class="col-sm-3">
8
<p class="col-sm-2"></p>
9
<input type="button" id="registerX" class="col-sm-3" name="registerX" value="Register" onclick="submitCheck();">
10
<p class="col-sm-2"></p> <br />
11
</div>
I can notice a bigger gap after the second button that the first gap. What can I do?
Edit: To see it open the code in a full page.
Advertisement
Answer
Leaving an answer instead of a comment because I don’t have enough reputation. Just wanted to point out OP is using bootstrap 3, not 4, so offset would be written as “col-sm-offset-1”, not “offset-sm-1”.
JavaScript
1
13
13
1
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
3
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
4
5
<div class="row container-fluid">
6
<div class="col-sm-4 col-sm-offset-1">
7
<button type="button" class="btn btn-primary btn-block" id="cancel" name="cancel" value="Cancel" onclick="cancel();">Primary</button>
8
</div>
9
<div class="col-sm-4 col-sm-offset-2">
10
<button type="button" class="btn btn-primary btn-block" id="registerX" name="registerX" value="Register" onclick="submitCheck();">Primary</button>
11
</div>
12
</div>
13