This question has been asked AND answered multiple times such as here, here, and here,
but those were all for Bootstrap 4 - which is 11 months away from End of Life as of today, 2021-10-20.
With Bootstrap 5 being the only version of bootstrap both actively supported and without a stated Critical Support end date, I think it is worth finding a solution that works. Hence, I will ask the question again but updated for Bootstrap 5. I did try to comment on the existing answers, but my reputation is too low to comment. Perhaps that wasn't the right place, and was a sign that I should post a new question.
My goal is to have the following content layout.
The two layouts
On the left, my default/mobile layout has sections 1, 2, and 3.
But on bigger devices, I want section 2 on the left, and for sections 1 and 3 to be on the right.
I tried this, from linked question #1:
<div class="row d-sm-block">
<div class="col-sm-9 order-2 order-md-0 float-left">2</div>
<div class="col-sm-3 order-3 order-md-0 float-right">3</div>
<div class="col-sm-3 order-1 order-md-0 float-right">1</div>
<div class="col-sm-3 order-4 order-md-0 float-right">4</div>
</div>
On Bootstrap 4, it worked, but Bootstrap 5 it didn't:
first-solution
I tried these, from linked question #2:
https://www.codeply.com/go/8lsFAU3C5E
https://www.codeply.com/go/mKykCsBFDX
But change them to Bootstrap 5.0.2 or higher (I tried a few) and it will not float (visually) #2 to the left.
There is another answer on linked question #2 that looks close, but on either bootstrap it isn't correct:
question 2, answer 3-ish
because it will make the first section as tall as the second section, forcing the third to always be alone.
So I am wondering if anyone has a solution for Bootstrap 5. Anything I can do to change these classes to make it display correctly?
Here is a fiddle with Bootstrap 5 ready to go, with my 3 sections: https://jsfiddle.net/uroabnxz/
Alternatively, perhaps this is a bad idea and maybe there is a reason Bootstrap broke this - intentionally? If someone advises against this, I could always duplicate the HTML, and display/hide it based on viewport/breakpoints. I didn't want to do that as it feels dirty, but if most people think it is an okay solution, I can do that.
To get the same result as a picture above you need to use display: block and floats instead display: flex. And also in Bootstrap v5 the floats were renamed.
Renamed .float-left and .float-right to .float-start and .float-end. migration to v5
<div class="d-block">
<div class="col-12 col-sm-6 bg-primary float-end">1</div>
<div class="col-12 col-sm-6 bg-secondary float-start">2<br />is<br />taller</div>
<div class="col-12 col-sm-6 bg-info float-end">3</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<h1>Hello, world!</h1>
<div class="container">
<div class="d-block">
<div class="col-12 col-sm-6 bg-primary float-end">1</div>
<div class="col-12 col-sm-6 bg-secondary float-start">
2<br />is<br />taller
</div>
<div class="col-12 col-sm-6 bg-info float-end">3</div>
</div>
</div>
Bootstrap 5 seems very natural to settle into in my experience so far, go for it! I find it less different than swapping from v3 to v4. Ordering according to a responsive display is fully addressed, here are the Docs, scroll down to Reordering (Order Classes)....
https://getbootstrap.com/docs/5.0/layout/columns/
I have bootstrap columns set up with photos and a brief description underneath. Because the photos are different heights the text isn't aligned across the columns and it looks pretty bad. I'm sure this is a simple fix but I just can't seem to find it! Thanks in advance
<div class="row colabs">
<div class="col-lg-6 col-12">
<h2>Megan Reitz</h2>
<img class="collab-pics" src="C:\Users\donal\OneDrive\Desktop\John Higgins Website\Images\megan-reitz.jpg" alt="">
<p class="collab-texts">Long standing research partner into 'speaking truth to power' and 'workplace activism'</p>
<a class="collab-links" href="http://www.meganreitz.com/">http://www.meganreitz.com/</a>
</div>
<div class="col-lg-6 col-12">
<h2>Mark Cole</h2>
<img class="collab-pics" src="C:\Users\donal\OneDrive\Desktop\John Higgins Website\Images\Mark-Cole.jpg" alt="">
<p class="collab-texts">Fellow explorer into the intellectual headwaters of current organizational and management practice</p>
<a class="collab-links" href="https://radicalod.org/">https://radicalod.org/</a>
</div>
</div>
enter image description here
In this you can go for any one below described solution
try to use bootstrap-5 inbuilt classes like "img-fluid"..etc
reference link :- https://getbootstrap.com/docs/5.0/content/images/
either you can set your images to one div as background and use properties like background-position, background-size .. etc
you can set apply common height/width for all image elements with this you can control images & after that texts of it..
I am having an issue with bootstrap grid framework within Wordpress. I am trying to create a grid. 2 Rows. First row is one column and second row is three columns with a little space in between them. The columns on the site are stacked as rows and not side by side. Bootstrap documentation says if you don't use something like sm-3 after col, then it will generate widths automatically.
Page in question: http://dev.dragonscaletech.com/our-story/
<div id="shoutOuts">
<div class="container">
<div class="row">
<div class="col">
<h1>Shout Outs!</h1>
</div>
</div>
<div class="row">
<div class="col">
<h4>The TitanTough21 Foundation</h4><br>
<p>An amazing foundation formed to find a cure for Li-Fraumeni Syndrome. Li-Fraumeni Syndrome is a rare genetic disorder that greatly increases the risk of developing several types of cancer, particularly in children and young adults. In addition,
they work hard to help families pay their cancer bills.</p>
<p>Learn more at: www.TitanTough21.org</p>
</div>
<div class="col">
<h4>47 Films</h4><br>
<p>A Digital Filmmaking Company based in Broward County, Florida.</p>
<p>Really, a great company with great people.</p>
<p>Learn more on Facebook: 47FilmsLLC</p>
</div>
<div class="col">
<h4>Seagull Services</h4><br>
<p>Assists individuals with life challenges by providing education, training, employment, residential services, community integration and support services.</p>
<p>We are working with Seagull Services to assemble a manageable quantity of Back Scratch Scrubbers for us!</p>
<p>Learn more at: www.SeagulServices.org</p>
</div>
</div>
</div>
The issue occurs because you are trying to use Bootstrap 4 syntax with Bootstrap 3 running on your site. Those 2 don't mix well.
Solution: Replace col with col-xs-4 in the second row and with col-xs-12 in the first row.
Alternatively, load Bootstrap 4 files on your site.
P.S. Remember that both the col class in Bootstrap 4 as well as col-xs-* in Bootstrap 3 are non-responsive i.e. those classes define what happens on the smallest screens and you probably don't want 3 columns on the smallest screens. So, adjust accordingly.
Searched quite a bit on google and discovered the container-fluid class. Then I searched Stack Overflow and found this post.
Bootstrap 3 adding gutters to the grid system
I modified the code to this and got exactly what I'm looking for! Thank you to all that gave me more things to check out.
<div id="shoutOuts">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Shout Outs!</h1>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="container-fluid">
<h4>The TitanTough21 Foundation</h4><br>
<p>An amazing foundation formed to find a cure for Li-Fraumeni Syndrome. Li-Fraumeni Syndrome is a rare genetic disorder that greatly increases the risk of developing several types of cancer, particularly in children and young adults. In addition,
they work hard to help families pay their cancer bills.</p>
<p>Learn more at: www.TitanTough21.org</p>
</div>
</div>
<div class="col-sm-4">
<div class="container-fluid">
<h4>47 Films</h4><br>
<p>A Digital Filmmaking Company based in Broward County, Florida.</p>
<p>Really, a great company with great people.</p>
<p>Learn more on Facebook: 47FilmsLLC</p>
</div>
</div>
<div class="col-sm-4">
<div class="container-fluid">
<h4>Seagull Services</h4><br>
<p>Assists individuals with life challenges by providing education, training, employment, residential services, community integration and support services.</p>
<p>We are working with Seagull Services to assemble a manageable quantity of Back Scratch Scrubbers for us!</p>
<p>Learn more at: www.SeagulServices.org</p>
</div>
</div>
</div>
</div>
you could use col-md-offset-2 class ass described here in Bootstrap 3, if you are using Bootstrap 4 there are no more Offset classes, so you should use auto margins because Bootstrap 4 use flexbox
this certainly solves your issue
How to make col-md-3 to start on new line from left. It seems its auto fitting it self under a column depending on text size.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section id="services">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Services</h1>
<h4>With our knowledge and experience, we are aware of the challenges that students face when they wish to study overseas. So, keeping this in mind we have made our process so simple for these students that each and every task from admission procedure to visa interview to making travel arrangements is easy-going and hassle free. </h4>
<h4>We are here to help you at each and every stage of the process.</h4>
<div class="col-md-3">
<h4>Guidance for IELTS</h4>
<h5>IELTS is the most common examination that you need to give when you are planning to study abroad or work overseas. We help you prepare for the exam by giving you study material and also take a computer based test to make sure you score well. We also assist you in scheduling the tests, fill an application form, and give you the list of the universities where IELTS scores are reported and much more.</h5>
</div>
<div class="col-md-3">
<h4>Guidance for IELTS</h4>
<h5>IELTS is the most common examination that you need to give when you are planning to study abroad or work overseas. We help you prepare for the exam by giving you study material and also take a computer based test to make sure you score well. We also assist you in scheduling the tests, fill an application form, and give you the list of the universities where IELTS scores are reported and much more.</h5>
</div>
<div class="col-md-3">
<h4>Counseling and course & university selection</h4>
<h5>We will help you choose the right course and best university that is perfect and suits your academic background, financial background, and future plans.</h5>
</div>
<div class="col-md-3">
<h4>Scholarships</h4>
<h5>There are many foreign universities that offer scholarships to students on the basis of their academic profiles. We evaluate the possibilities of scholarship opportunities for the students and ensure that the eligible students benefit the opportunity of getting scholarships</h5>
</div>
<div class="col-md-3">
<h4>Documents preparation for application</h4>
<h5>We provide our expert guidance in preparing the application file and also the documents like transcripts, letter or recommendations etc that may increase the chances of admissions</h5>
</div>
<div class="col-md-3">
<h4>Follow-ups with universities to secure admissions</h4>
<h5>We do follow-ups on your behalf with the university admission office to ensure that you secure the admissions</h5>
</div>
<div class="col-md-3">
<h4>Visa documentation</h4>
<h5>We provide our expert assistance for preparing the visa documents according to the latest rules of the embassy.</h5>
</div>
<div class="col-md-3">
<h4>Bank loan and travel arrangements</h4>
<h5>We will assist you if you are looking for the educational loans and we also take care of all your travel arrangements like booking air tickets, travel insurance, and foreign exchange. Before you travel, there will be pre-departure orientation providing you the information on do’s and don’ts and will tell you about the food, travel, culture, transport etc of the country where you are traveling.</h5>
</div>
<div class="col-md-3">
<h4>Finding accommodation</h4>
<h5>We will help you find the best accommodation options that will suit your needs.</h5>
</div>
<div class="col-md-3">
<h4>Culture understanding </h4>
<h5>We will give you the information of the climatic conditions and the cultural differences so that you are mentally prepared and can adapt the new environment easily and quickly</h5>
</div>
</div>
</div>
</div>
</section>
How to make it work like actual bootstrap grid is supposed to do and how to make the height of each col same.
Thanks.
If you can't or don't want to apply a row for every 12 Columns then you can clear every nth Column based on a media query that's inline with your columns breakpoint:
Example CSS;
#media (min-width: 992px) {
.col-md-3:nth-child(4n+1) {
clear: left;
}
}
You obviously do not want to directly apply this rule to a column so use a unique selector to do this.
Note: you are also nested columns inside another column. Either leave the first col-md-12 in it's own row and start a new one or apply a new row inside the nested ones. See Grid Nesting.
Working Example: Run at FullPage
#media (min-width: 992px) {
.item:nth-child(4n+1) {
clear: left;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section id="services">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Services</h1>
<h4>With our knowledge and experience, we are aware of the challenges that students face when they wish to study overseas. So, keeping this in mind we have made our process so simple for these students that each and every task from admission procedure to visa interview to making travel arrangements is easy-going and hassle free. </h4>
<h4>We are here to help you at each and every stage of the process.</h4>
</div>
</div>
<div class="row">
<div class="col-md-3 item">
<h2>1</h2>
<h4>Guidance for IELTS</h4>
<h5>IELTS is the most common examination that you need to give when you are planning to study abroad or work overseas. We help you prepare for the exam by giving you study material and also take a computer based test to make sure you score well. We also assist you in scheduling the tests, fill an application form, and give you the list of the universities where IELTS scores are reported and much more.</h5>
</div>
<div class="col-md-3 item">
<h2>2</h2>
<h4>Guidance for IELTS</h4>
<h5>IELTS is the most common examination that you need to give when you are planning to study abroad or work overseas. We help you prepare for the exam by giving you study material and also take a computer based test to make sure you score well. We also assist you in scheduling the tests, fill an application form, and give you the list of the universities where IELTS scores are reported and much more.</h5>
</div>
<div class="col-md-3 item">
<h2>3</h2>
<h4>Counseling and course & university selection</h4>
<h5>We will help you choose the right course and best university that is perfect and suits your academic background, financial background, and future plans.</h5>
</div>
<div class="col-md-3 item">
<h2>4</h2>
<h4>Scholarships</h4>
<h5>There are many foreign universities that offer scholarships to students on the basis of their academic profiles. We evaluate the possibilities of scholarship opportunities for the students and ensure that the eligible students benefit the opportunity of getting scholarships</h5>
</div>
<div class="col-md-3 item">
<h2>5</h2>
<h4>Documents preparation for application</h4>
<h5>We provide our expert guidance in preparing the application file and also the documents like transcripts, letter or recommendations etc that may increase the chances of admissions</h5>
</div>
<div class="col-md-3 item">
<h2>6</h2>
<h4>Follow-ups with universities to secure admissions</h4>
<h5>We do follow-ups on your behalf with the university admission office to ensure that you secure the admissions</h5>
</div>
<div class="col-md-3 item">
<h2>7</h2>
<h4>Visa documentation</h4>
<h5>We provide our expert assistance for preparing the visa documents according to the latest rules of the embassy.</h5>
</div>
<div class="col-md-3 item">
<h2>8</h2>
<h4>Bank loan and travel arrangements</h4>
<h5>We will assist you if you are looking for the educational loans and we also take care of all your travel arrangements like booking air tickets, travel insurance, and foreign exchange. Before you travel, there will be pre-departure orientation providing you the information on do’s and don’ts and will tell you about the food, travel, culture, transport etc of the country where you are traveling.</h5>
</div>
<div class="col-md-3 item">
<h2>9</h2>
<h4>Finding accommodation</h4>
<h5>We will help you find the best accommodation options that will suit your needs.</h5>
</div>
<div class="col-md-3 item">
<h2>10</h2>
<h4>Culture understanding</h4>
<h5>We will give you the information of the climatic conditions and the cultural differences so that you are mentally prepared and can adapt the new environment easily and quickly</h5>
</div>
</div>
</div>
</section>
The above answers are true if it is in HTML scenarios, if developer use loop then this problem may arise.
This solution for this is here:
<div id="mysection">
<div class="container">
<div class="row">
<div class="col-md-3 equal-column"></div>
<div class="col-md-3 equal-column"></div>
<div class="col-md-3 equal-column"></div>
<div class="col-md-3 equal-column"></div>
<div class="col-md-3 equal-column"></div>
<div class="col-md-3 equal-column"></div>
<div class="col-md-3 equal-column"></div>
<div class="col-md-3 equal-column"></div>
</div>
</div>
</div>
Add CSS:
.equal-column{min-height:300px;}
Add min height according to your div is best solution for this if there are nth div of col-md-3
All Bootstrap grid columns must be wrapped in a .row.
As grid columns should add up to twelve for a single horizontal block so your code structure should be like this:
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id="services">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Services</h1>
<h4>With our knowledge and experience, we are aware of the challenges that students face when they wish to study overseas. So, keeping this in mind we have made our process so simple for these students that each and every task from admission procedure to visa interview to making travel arrangements is easy-going and hassle free. </h4>
<h4>We are here to help you at each and every stage of the process.</h4>
<div class="row">
<div class="col-md-3">
<h4>Guidance for IELTS</h4>
<h5>IELTS is the most common examination that you need to give when you are planning to study abroad or work overseas. We help you prepare for the exam by giving you study material and also take a computer based test to make sure you score well. We also assist you in scheduling the tests, fill an application form, and give you the list of the universities where IELTS scores are reported and much more.</h5>
</div>
<div class="col-md-3">
<h4>Guidance for IELTS</h4>
<h5>IELTS is the most common examination that you need to give when you are planning to study abroad or work overseas. We help you prepare for the exam by giving you study material and also take a computer based test to make sure you score well. We also assist you in scheduling the tests, fill an application form, and give you the list of the universities where IELTS scores are reported and much more.</h5>
</div>
<div class="col-md-3">
<h4>Counseling and course & university selection</h4>
<h5>We will help you choose the right course and best university that is perfect and suits your academic background, financial background, and future plans.</h5>
</div>
<div class="col-md-3">
<h4>Scholarships</h4>
<h5>There are many foreign universities that offer scholarships to students on the basis of their academic profiles. We evaluate the possibilities of scholarship opportunities for the students and ensure that the eligible students benefit the opportunity of getting scholarships</h5>
</div>
</div>
<div class="row">
<div class="col-md-3">
<h4>Documents preparation for application</h4>
<h5>We provide our expert guidance in preparing the application file and also the documents like transcripts, letter or recommendations etc that may increase the chances of admissions</h5>
</div>
<div class="col-md-3">
<h4>Follow-ups with universities to secure admissions</h4>
<h5>We do follow-ups on your behalf with the university admission office to ensure that you secure the admissions</h5>
</div>
<div class="col-md-3">
<h4>Visa documentation</h4>
<h5>We provide our expert assistance for preparing the visa documents according to the latest rules of the embassy.</h5>
</div>
<div class="col-md-3">
<h4>Bank loan and travel arrangements</h4>
<h5>We will assist you if you are looking for the educational loans and we also take care of all your travel arrangements like booking air tickets, travel insurance, and foreign exchange. Before you travel, there will be pre-departure orientation providing you the information on do’s and don’ts and will tell you about the food, travel, culture, transport etc of the country where you are traveling.</h5>
</div>
</div>
<div class="row">
<div class="col-md-3">
<h4>Finding accommodation</h4>
<h5>We will help you find the best accommodation options that will suit your needs.</h5>
</div>
<div class="col-md-3">
<h4>Culture understanding </h4>
<h5>We will give you the information of the climatic conditions and the cultural differences so that you are mentally prepared and can adapt the new environment easily and quickly</h5>
</div>
</div>
</div>
</div>
</div>
</section>
Use <div class="row"> before col-md-3 like below code
<section id="services">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Services</h1>
<h4>With our knowledge and experience, we are aware of the challenges that students face when they wish to study overseas. So, keeping this in mind we have made our process so simple for these students that each and every task from admission procedure to visa interview to making travel arrangements is easy-going and hassle free. </h4>
<h4>We are here to help you at each and every stage of the process.</h4>
<div class="row">
<div class="col-md-3">
<h4>Guidance for IELTS</h4>
<h5>IELTS is the most common examination that you need to give when you are planning to study abroad or work overseas. We help you prepare for the exam by giving you study material and also take a computer based test to make sure you score well. We also assist you in scheduling the tests, fill an application form, and give you the list of the universities where IELTS scores are reported and much more.</h5>
</div>
<div class="col-md-3">
<h4>Guidance for IELTS</h4>
<h5>IELTS is the most common examination that you need to give when you are planning to study abroad or work overseas. We help you prepare for the exam by giving you study material and also take a computer based test to make sure you score well. We also assist you in scheduling the tests, fill an application form, and give you the list of the universities where IELTS scores are reported and much more.</h5>
</div>
<div class="col-md-3">
<h4>Counseling and course & university selection</h4>
<h5>We will help you choose the right course and best university that is perfect and suits your academic background, financial background, and future plans.</h5>
</div>
<div class="col-md-3">
<h4>Scholarships</h4>
<h5>There are many foreign universities that offer scholarships to students on the basis of their academic profiles. We evaluate the possibilities of scholarship opportunities for the students and ensure that the eligible students benefit the opportunity of getting scholarships</h5>
</div>
</div>
<div class="row">
<div class="col-md-3">
<h4>Documents preparation for application</h4>
<h5>We provide our expert guidance in preparing the application file and also the documents like transcripts, letter or recommendations etc that may increase the chances of admissions</h5>
</div>
<div class="col-md-3">
<h4>Follow-ups with universities to secure admissions</h4>
<h5>We do follow-ups on your behalf with the university admission office to ensure that you secure the admissions</h5>
</div>
<div class="col-md-3">
<h4>Visa documentation</h4>
<h5>We provide our expert assistance for preparing the visa documents according to the latest rules of the embassy.</h5>
</div>
<div class="col-md-3">
<h4>Bank loan and travel arrangements</h4>
<h5>We will assist you if you are looking for the educational loans and we also take care of all your travel arrangements like booking air tickets, travel insurance, and foreign exchange. Before you travel, there will be pre-departure orientation providing you the information on do’s and don’ts and will tell you about the food, travel, culture, transport etc of the country where you are traveling.</h5>
</div> </div>
<div class="row">
<div class="col-md-3">
<h4>Finding accommodation</h4>
<h5>We will help you find the best accommodation options that will suit your needs.</h5>
</div>
<div class="col-md-3">
<h4>Culture understanding </h4>
<h5>We will give you the information of the climatic conditions and the cultural differences so that you are mentally prepared and can adapt the new environment easily and quickly</h5>
</div>
</div>
</div>
</div>
</div>
</section>
If those paragraphs can be in a different order, I would suggest the following:
<div class="col-md-12">
<div class="col-md-3">
<div class="col-md-12">
<!-- your content here -->
</div>
<div class="col-md-12">
<!-- your content here -->
</div>
</div>
<div class="col-md-3">
<div class="col-md-12">
<!-- your content here -->
</div>
<div class="col-md-12">
<!-- your content here -->
</div>
</div>
<div class="col-md-3">
<div class="col-md-12">
<!-- your content here -->
</div>
<div class="col-md-12">
<!-- your content here -->
</div>
</div>
<div class="col-md-3">
<div class="col-md-12">
<!-- your content here -->
</div>
<div class="col-md-12">
<!-- your content here -->
</div>
</div>
</div>
This way, you have four columns and n number of rows in that column.
Hope this helps.
Bootstrap grid view always uses 12 columns as the total.
First; create a row (). Then, add the desired number of columns (tags with appropriate .col-- classes). Note that numbers in .col-- should always add up to 12 for each row. If the number of columns becomes more than the 12 the div comes next to the div who have the maximum height. if all the heights are same than only it will come in the next line.
So basically you need to wrap the dom in row and in every row you need 12 columns total.
Bootstrap grid system includes row and columns. First you need to understand it. To easily understand it, visualize it as a table structure apart from table structure it's responsive. so you want to start collections of columns start with left then you either need to use enclosed them with row or clearfix class.
As in your code, you have 10 col-md-3 div sections. Bootstrap is 12 column grid system and from your code it's usual that it won't work as you wished. you need to divide your screen in 12 column grid but you have not done that in your code.
For your guidelines:
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<h4>Some Detail</h4>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
</div>
</div>
</section>
In the above code I've divided the screen into 4*3 column. i.e. 4 column of size 3, 4*3 = 12 (12 grid system)
If you want to align with h4 tag then you can use clearfix instead of row class. clearfix removes floating.
I hope you'll got some understanding.
I have a demo site which is located here to give you an idea of what's going on. If you scroll to the bottom where you see the 9 individual posts they are all laid out properly. How ever if you shrink the screen to anything less then 1232px's youll see that the 7th post breaks away from the others and shifts down.
Now I am using default styles to align them as such, using row and then span4. Can any one explain why this happens? And any way to fix it?
Your span totals should add up to 12. Your example site however adds up to more than 40! I don't think there is any defined behaviour for what should happen if you don't use it as intended.
From Bootstrap homepage
"The default Bootstrap grid system utilizes 12 columns"
So the total of your spans must add to 12 per row. ie.
<div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>
<div class="row">
<div class="span3">...</div>
<div class="span3">...</div>
<div class="span3">...</div>
</div>
<div class="row">
<div class="span7">...</div>
<div class="span3 offset2">...</div>
</div>