CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Shachaf.Gortler
Shachaf.Gortler

Reputation: 5735

element side by side in a row

I have the following 

 <section class="page-element col-md-9 col-lg-7">
             <div class="page-element">part1</div>
        </section>

I want to add another section to be on the same line as part1

I tried this but what it does is put the row of part2, below part1 and not side by side

<div class="row">
        <section class="page-element col-md-9 col-lg-7">
             <div class="page-element">part1</div>
        </section>

        <section class="page-element col-md-12 col-lg-12">
            <div class="page-element">part2</div>
        </section>

What am I doing wrong?

Upvotes: 0

Views: 2171

Answers (2)

Terry
Terry

Reputation: 66113

The grid system of Bootstrap contains 12 columns, meaning that when your layout exceeds 12 columns (col-md-9 and col-md-12 adds up to 21 columns, for example), then wrapping will occur

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

Source

A visual example is as follow:

+--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+
| 1| | 2| | 3| | 4| | 5| | 6| | 7| | 8| | 9| |10| |11| |12|
+--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+

+------------------------------------------+ 
| col-md-9                                 | 
+------------------------------------------+ 

+---------------------------------------------------------+
| col-md-12                                               |
+---------------------------------------------------------+

You will have to ensure that the column span of the elements to add up to 12, or less, in order for them to appear side by side (i.e. prevent wrapping):

+--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+
| 1| | 2| | 3| | 4| | 5| | 6| | 7| | 8| | 9| |10| |11| |12|
+--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+

+------------------------------------------+ +------------+
| col-md-9                                 | | col-md-3   |
+------------------------------------------+ +------------+

In the example below I have adjusted the column span of your second section so that they sum nicely to 12, with respect to the same column class of its previous sibling. I have added col-xs-{n} and col-sm-{n} classes so that the layout will still work on the narrow viewport sizes of embedded code snippets.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
  <section class="page-element col-xs-9 col-sm-9 col-md-9 col-lg-7">
    <div class="page-element">part1</div>
  </section>

  <section class="page-element col-xs-3 col-sm-3 col-md-3 col-lg-5">
    <div class="page-element">part2</div>
  </section>
</div>

Upvotes: 1

Sam
Sam

Reputation: 313

I think this is the easiest way to do it.

#row {
    overflow: hidden; /*allows div to have children that float*/
}
#first {
    float:left;
    border: 1px solid red;   /*allows you to see the div*/
}
#second {
    border: 1px solid green; /*allows you to see the div*/
    float:left;
}
<div id="row">
    <div id="first">part1</div>
    <div id="second">part2</div>
</div>

Upvotes: 0

Related Questions