CODEWITHSUNDEEP
twitter-bootstrapcsstwitter-bootstrap-3
Kenzo_Gilead
Kenzo_Gilead

Reputation: 2439

Columns misplaced when using rows with different number of columns

I build a grid with 3 rows, and the next configuration.

In the first one, 3 columns,

In the second one, 2 columns,

In the last one, columns:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
   <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><asp:button /></div>
   <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><asp:button /></div>
   <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><asp:button /></div>
</div>

<div class="row">
   <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><asp:button /></div>
   <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><asp:button /></div>
</div>

<div class="row">
   <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><asp:button /></div>
</div>

The problem is the end of each row (I mean, the last column) is not aligned with the others one... I tried to set the specific margin or/and padding in each row. But the issue is still happening because when I change the size of the screen, the mess coming again.

Is there a elegant or efficicent solution for this problem?

Thanks mates.

NOTE: Giving you all additional information, hope you all can understand my problem bettter... Inside of each column I have a different number of elements (like asp:button, asp:label, and so on...). I am using bootstrap 3. If you need any kind of information, please let me know... Cheers.

Upvotes: 0

Views: 108

Answers (1)

BlueCaret
BlueCaret

Reputation: 5000

If I'm understanding you correctly, I think you are trying to make the row with 2 columns have the last column align with the last one in the row with 3? If that's true, then you need to use an offset and have the columns be the same size.

Is this what you are looking for?

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="row">
  <div class="col-xs-4 bg-primary">Row 1 Col 1</div>
  <div class="col-xs-4 bg-info">Row 1 Col 2</div>
  <div class="col-xs-4 bg-danger">Row 1 Col 3</div>
</div>
<div class="row">
  <div class="col-xs-6 bg-success">Row 2 Col 1</div>
  <div class="col-xs-6 bg-warning">Row 2 Col 2</div>
</div>
<div class="row">
  <div class="col-xs-12 bg-danger">Row 3 Col 3</div>
</div>
</div>

Also you didn't close your div tags properly on the rows

Upvotes: 1

Related Questions