CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
little_monkey
little_monkey

Reputation: 439

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.

Upvotes: 1

Views: 76

Answers (4)

rob
rob

Reputation: 46

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>

Upvotes: 3

Paulie_D
Paulie_D

Reputation: 115066

Bootstrap has offset helper classes for this

https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

.col-sm-4 {
  border: 1px solid red;
}

.container {
  border: 1px solid blue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container fluid">
  <div class="row">
    <div class="col-sm-4 offset-md-1">
      <input type="button" id="cancel" name="cancel" value="Cancel" onclick="cancel();">
    </div>
    <div class="col-sm-4 offset-md-1">
      <input type="button" id="registerX" name="registerX" value="Register" onclick="submitCheck();">
    </div>
  </div>
</div>

Upvotes: 1

JasperZelf
JasperZelf

Reputation: 2844

In bootstrap you normally create a container, that you fill with rows, which are filled with columns. You applied the column classes directly to the buttons. While this may work, it's not how it was meant to work.

There are some nice examples in the bootstrap docs: https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

Try this:

<div class="container fluid">
  <div class="row">
    <div class="col-sm-4 offset-sm-1">
      <input class="btn btn-primary btn-block" type="button" name="cancel" value="Cancel">
    </div>
    <div class="col-sm-4 offset-sm-2">
      <input class="btn btn-primary btn-block" type="button" name="registerX" value="Register" >  
    </div>
  </div>
</div>

You can set your columns to 4 wide using the col-sm-4 class. You can shift them by using offset-sm-X where the X is the number of places you want to shift.

If you want your buttons to take up the full width of the columns you just created, you pass a class btn-block to them.

Example: https://jsfiddle.net/jkrielaars/cno6qhbx/7/

Upvotes: 1

Buu97
Buu97

Reputation: 168

Use offset

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

The offset-sm-1 will leave one blank area that is 1 column size so that your content starts at column 2.

Upvotes: -1

Related Questions