Bootstrap: Col-md-3 Not starting from left on new line

Question

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.

Answer 1

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 &amp; 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>