How to use multiple columns in Bootsrap not starting From column 1?

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.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="row container fluid">
  <p class="col-sm-2"></p>
  <input type="button" id="cancel" name="cancel" value="Cancel" onclick="cancel();" class="col-sm-3">
  <p class="col-sm-2"></p>
  <input type="button" id="registerX" class="col-sm-3" name="registerX" value="Register" onclick="submitCheck();">
  <p class="col-sm-2"></p> <br />
</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.

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”.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="row container-fluid">
    <div class="col-sm-4 col-sm-offset-1">
        <button type="button" class="btn btn-primary btn-block" id="cancel" name="cancel" value="Cancel" onclick="cancel();">Primary</button>
    </div>
    <div class="col-sm-4 col-sm-offset-2">
        <button type="button" class="btn btn-primary btn-block" id="registerX" name="registerX" value="Register" onclick="submitCheck();">Primary</button>
    </div>
</div>

Advertisement

Answer