CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap-3bootstrap-4
Technophobe01
Technophobe01

Reputation: 8666

How to align buttons horizontally under variable text in Bootstrap 3

How do you align buttons under a variable piece of text in Bootstrap 3? If you run the code example full screen you will see that the three buttons do not align horizontally.

Current Behavior:

enter image description here

I would like the three blue buttons to align horizontally.

How do I fix this? All help and advice gratefully received.

Expected Result:

enter image description here

Current Behavior: Code Example (Hit Expand Snippet)

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

  <div>
    <div class="col-md-4">
      <h3><b>penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>sociis penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>Morbi penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
  </div>

  </div>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

Upvotes: 0

Views: 107

Answers (4)

Sahil Dhir
Sahil Dhir

Reputation: 4250

I have used 2 custom classes to the already made HTML structure.\

  1. three-section class to the parent div

  2. text-sm-center class to the button parent div.

Here is the solution list:

Solution for Button alignment:

Give min-height to the paragraph according to your longest paragraph.

.three-section p {
    min-height: 160px
  }

Solution for button to be center aligned in xs and sm:

Write a media query with class name text-sm-center to be applied on your button code div and also making the paragraph height auto to make it not follow the min-height given earlier.

@media (max-width: 767px) {
  // Align text to center.
  .text-sm-center {
    text-align: center;
  }
  .three-section p {
    min-height: inherit;
  }
}


.three-section p {
  min-height: 160px
}

@media (max-width: 1260px) {
  .three-section p {
  min-height: 200px
}
}

@media (max-width: 962px) {
  .three-section p {
    min-height: inherit;
  }
  .text-sm-center {
    text-align: center;
  }
}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

  <div class="three-section">
    <div class="col-md-4">
      <h3><b>penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div class="text-sm-center">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>sociis penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p>
      <div class="text-sm-center">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>Morbi penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div class="text-sm-center">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
  </div>



  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

Upvotes: 2

AJAY MAURYA
AJAY MAURYA

Reputation: 551

I tried some solution for your query. some adjustment in class and css

.row-eq-height {
      display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.col-eq-height{display:flex;flex-flow: column;}
.mt-auto{margin-top:auto;}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>

  <!-- Bootstrap CSS -->
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

  <div class="row row-eq-height">
    <div class="col-md-4 col-eq-height">
      <h3><b>penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div class="mt-auto">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4 col-eq-height">
      <h3><b>sociis penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p>
      <div class="mt-auto">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4 col-eq-height">
      <h3><b>Morbi penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div class="mt-auto">
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
  </div>

  </div>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

Upvotes: 0

Carol McKay
Carol McKay

Reputation: 2424

.col-md-4
{
   display: flex;
   flex-direction: column;
   height:20em;
}

.col-md-4 > p
{
    flex:1 0 auto;
}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

  <div>
    <div class="col-md-4">
      <h3><b>penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>sociis penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>Morbi penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
  </div>

  </div>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

Upvotes: 0

Viira
Viira

Reputation: 3911

Add min-height to the corresponding p element.

Try this

p{min-height:160px;}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>

  <div>
    <div class="col-md-4">
      <h3><b>penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">View Details &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>sociis penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
    <div class="col-md-4">
      <h3><b>Morbi penatibus</b></h3>
      <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <div>
        <a href="#" class="align-self-end btn btn-primary btn-lg active" role="button">VIEW DETAILS &gt;&gt;</a>
      </div>
    </div>
  </div>

  </div>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

</html>

Upvotes: 0

Related Questions