Aman Sharma
asked on
Why am I unable to start a new row in bootstrap?
I had created asection with multiple columns. Now, I wish to start a new row, so I created a new container as well. But when I run the file, the new row is not added. Instead, another column is being made. Can anyone help me in debugging this code.
How can I make the data appear in a new row below the previous one? Any help will be apreciated! Thanks in advance!
How can I make the data appear in a new row below the previous one? Any help will be apreciated! Thanks in advance!
Some pointers
1. The <center> tag has been deprecated (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center)
2. Try to locate your <script> at the end of the document
3. Documents that are neatly laid out are much easier to debug - make sure tags line up and are closed - this will save you hours of debug time
Now to your problem I am assuming you are talking about this
The problem is you have located this outside of your left and right container for your layout. As the latter are floated your new container is not visible.
You will need to either
1. Clear the floats as part of your container (style="clear: both")
2. Put your rows inside the container they should display in (assuming the right)
Because one of your rows is inside a container it is going to be narrower (width = 1170 max) than the second row.
1. The <center> tag has been deprecated (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center)
2. Try to locate your <script> at the end of the document
3. Documents that are neatly laid out are much easier to debug - make sure tags line up and are closed - this will save you hours of debug time
Now to your problem I am assuming you are talking about this
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-10" style="background-color: yellow;">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2" style="background-color: yellow;">.col-xs-6 .col-md-2</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>The problem is you have located this outside of your left and right container for your layout. As the latter are floated your new container is not visible.
You will need to either
1. Clear the floats as part of your container (style="clear: both")
2. Put your rows inside the container they should display in (assuming the right)
Because one of your rows is inside a container it is going to be narrower (width = 1170 max) than the second row.
This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Where you want to start new row?
Regards,
Chinmay.