Bootstrap: Columns are not working properly. I want then next to each other-Twitter bootstrap

StacyAreas
October 1, 2017
194 views
2 votes
3 Answers

My page is displaying the columns on top of each other but I want them next to each other. While inspecting what bootstrap provides I see that padding-left: 15px is added. I tried playing about with it and can seem to understand what is going on. >.<

Here is the code I have

body {
  padding-top: 70px;
}

.jumbotron {
  margin-top: -14px;
}

.primary-content {
  margin-top: 8em;
  padding-bottom: 3em;
}

.footer {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

<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-md-3">
      <p>An idea that started several years ago, CIMI (Carrera Internacional de la Mujer Iniciativa) is an initiative for and about women. It started as a dream of the founder, Aracely Areas, to help people like her - women with a vision for their future,
        to build confidence and motivation through running, accomplishment and in turn benefiting from the health and exercise.</p>

      <p>With the generous support of our donors, the purpose of CIMI is to foster programs and partnerships with schools and athletic associations to promote health, education, self-esteem and inspiration for women of all ages. Our goal is to sponsor yearly
        special events, providing training and educational programs, supporting health and exercise opportunities for girls and women with an emphasis on running activities and providing related training and equipment. With our younger participants, confidence
        established at an early age can be applied to all aspects of their lives, particularly in schools for bright futures. All this is offered free of any charge to our participants.</p>

      <p>We became an official Non Profit in 2015 an official 501c3 Charity. Establishing a board of directors who meet quarterly to set goals and continue to move this cause forward.</p>
    </div>
  </div>

  <div class="card mb-5 col-md-6">
    <div class="row">
      <img class="card-img-top" src="images/washingtonDCrace.jpg" alt="Card image cap">
      <div class="card-body">
        <h4 class="card-title">Mission Statement</h4>
        <p class="card-text">Focusing on women (and their family) of all ages to build confidence, promote health and motivation through accomplishment. We teach basic running skills, strength exercises, and mentoring. Through this community and confidence is built. We believe
          strongly that all people have many different abilities and strengths that when nurtured can create beautiful things.</p>
      </div>
    </div>
  </div>

  <h4>CIMI Core Values</h4>
  <div class="card mb-5 col-md-3">
    <div class="row">
      <ul class="list-group list-group-flush">
        <li class="list-group-item">Inclusion</li>
        <li class="list-group-item">Integrity</li>
        <li class="list-group-item">Determination</li>
        <li class="list-group-item">Patience</li>
      </ul>
    </div>
  </div>

</div>

Tags: css twitter-bootstrap

Answers

The problem is that you have closed the row div immediately after displaying first column. You should close the row after the last div. Hope this is what you are looking for.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
	<div class="row">
		<div class="col-md-3">
			<p>An idea that started several years ago, CIMI (Carrera Internacional de la Mujer Iniciativa) is an initiative
				for and about women. It started as a dream of the founder, Aracely Areas, to help people like her - women
				with a vision for their future, to build confidence and motivation through running, accomplishment and
				in turn benefiting from the health and exercise.</p>

			<p>With the generous support of our donors, the purpose of CIMI is to foster programs and partnerships with
				schools and athletic associations to promote health, education, self-esteem and inspiration for women
				of all ages. Our goal is to sponsor yearly special events, providing training and educational programs,
				supporting health and exercise opportunities for girls and women with an emphasis on running activities
				and providing related training and equipment. With our younger participants, confidence established at
				an early age can be applied to all aspects of their lives, particularly in schools for bright futures.
				All this is offered free of any charge to our participants.</p>

			<p>We became an official Non Profit in 2015 an official 501c3 Charity. Establishing a board of directors who
				meet quarterly to set goals and continue to move this cause forward.</p>
		</div>

		<div class="card mb-5 col-md-6">
			<div class="row">
				<img class="card-img-top" src="images/washingtonDCrace.jpg" alt="Card image cap">
				<div class="card-body">
					<h4 class="card-title">Mission Statement</h4>
					<p class="card-text">Focusing on women (and their family) of all ages to build confidence, promote health and motivation
						through accomplishment. We teach basic running skills, strength exercises, and mentoring. Through
						this community and confidence is built. We believe strongly that all people have many different
						abilities and strengths that when nurtured can create beautiful things.</p>
				</div>
			</div>
		</div>

		<h4>CIMI Core Values</h4>
		<div class="card mb-5 col-md-3">
			<div class="row">
				<ul class="list-group list-group-flush">
					<li class="list-group-item">Inclusion</li>
					<li class="list-group-item">Integrity</li>
					<li class="list-group-item">Determination</li>
					<li class="list-group-item">Patience</li>
				</ul>
			</div>
		</div>
	</div>
</div>

According to the Bootstrap Grid System
Use all the sections in just 1 <div> with class row
As you want them in single row.

body {
  padding-top: 70px;
}

.jumbotron {
  margin-top: -14px;
}

.primary-content {
  margin-top: 8em;
  padding-bottom: 3em;
}

.footer {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

<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-md-3">
      <p>An idea that started several years ago, CIMI (Carrera Internacional de la Mujer Iniciativa) is an initiative for and about women. It started as a dream of the founder, Aracely Areas, to help people like her - women with a vision for their future,
        to build confidence and motivation through running, accomplishment and in turn benefiting from the health and exercise.</p>

      <p>With the generous support of our donors, the purpose of CIMI is to foster programs and partnerships with schools and athletic associations to promote health, education, self-esteem and inspiration for women of all ages. Our goal is to sponsor yearly
        special events, providing training and educational programs, supporting health and exercise opportunities for girls and women with an emphasis on running activities and providing related training and equipment. With our younger participants, confidence
        established at an early age can be applied to all aspects of their lives, particularly in schools for bright futures. All this is offered free of any charge to our participants.</p>

      <p>We became an official Non Profit in 2015 an official 501c3 Charity. Establishing a board of directors who meet quarterly to set goals and continue to move this cause forward.</p>
    </div>

    <div class="col-md-6">
      <img class="card-img-top" src="images/washingtonDCrace.jpg" alt="Card image cap">
      <div class="card-body">
        <h4 class="card-title">Mission Statement</h4>
        <p class="card-text">Focusing on women (and their family) of all ages to build confidence, promote health and motivation through accomplishment. We teach basic running skills, strength exercises, and mentoring. Through this community and confidence is built. We believe
          strongly that all people have many different abilities and strengths that when nurtured can create beautiful things.</p>
      </div>
    </div>

    <div class="col-md-3">
      <h4>CIMI Core Values</h4>

      <ul class="list-group list-group-flush">
        <li class="list-group-item">Inclusion</li>
        <li class="list-group-item">Integrity</li>
        <li class="list-group-item">Determination</li>
        <li class="list-group-item">Patience</li>
      </ul>
    </div>
  </div>

Problem was that you closed the row div immediately after displaying the first column. You should close the row after the last div

Also combining card in the same div as column can lead to problems, So I separated those too

body {
  padding-top: 70px;
}

.jumbotron {
  margin-top: -14px;
}

.primary-content {
  margin-top: 8em;
  padding-bottom: 3em;
}

.footer {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-3">
      <p>An idea that started several years ago, CIMI (Carrera Internacional de la Mujer Iniciativa) is an initiative for and about women. It started as a dream of the founder, Aracely Areas, to help people like her - women with a vision for their future,
        to build confidence and motivation through running, accomplishment and in turn benefiting from the health and exercise.</p>

      <p>With the generous support of our donors, the purpose of CIMI is to foster programs and partnerships with schools and athletic associations to promote health, education, self-esteem and inspiration for women of all ages. Our goal is to sponsor yearly
        special events, providing training and educational programs, supporting health and exercise opportunities for girls and women with an emphasis on running activities and providing related training and equipment. With our younger participants, confidence
        established at an early age can be applied to all aspects of their lives, particularly in schools for bright futures. All this is offered free of any charge to our participants.</p>

      <p>We became an official Non Profit in 2015 an official 501c3 Charity. Establishing a board of directors who meet quarterly to set goals and continue to move this cause forward.</p>
    </div>

    <div class="col-md-6">
      <div class="card mb-5">
        <img class="card-img-top" src="images/washingtonDCrace.jpg" alt="Card image cap">
        <div class="card-body">
          <h4 class="card-title">Mission Statement</h4>
          <p class="card-text">Focusing on women (and their family) of all ages to build confidence, promote health and motivation through accomplishment. We teach basic running skills, strength exercises, and mentoring. Through this community and confidence is built. We
            believe strongly that all people have many different abilities and strengths that when nurtured can create beautiful things.</p>
        </div>
      </div>
    </div>


    <div class="col-md-3">
      <h4>CIMI Core Values</h4>
      <div class="card mb-5">
        <ul class="list-group list-group-flush">
          <li class="list-group-item">Inclusion</li>
          <li class="list-group-item">Integrity</li>
          <li class="list-group-item">Determination</li>
          <li class="list-group-item">Patience</li>
        </ul>
      </div>
    </div>
  </div>

Please signup or login to give your own answer.

Click here to cancel reply.