How to get buttons align horizontally (using bootstrap) - html

Question

I am trying to get the blue buttons to always stay lined up. Depending on the size of the screen and the text moving to multiple lines, it will cause the buttons to get out of alignment. Could I get help with how to get these to stay in line? http://marketing.geneia.com/himss2019/
Screenshot of buttons
#charset "utf-8";
/* CSS Document */
/* --------Resets-------- */
*{
margin:0;
padding:0;
border:0;
}
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
display: block;
}
body {
font-family: Averta-Regular, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 25px 0;
padding: 0;
font-family: Averta-Regular, sans-serif;
}
/* --------Styles-------- */
h1 {
font-size: 36px;
font-family: Averta-Extrabold, sans-serif;
font-weight: normal;
font-style: normal;
}
h2 {
font-size: 28px;
color: #125687;
font-family: Averta-Extrabold, sans-serif;
}
h2.smaller-blue {
font-size: 24px;
}
h3 {
font-size: 18px;
font-family: Averta-Semibold, sans-serif;
font-weight: normal;
line-height: 28px;
}
p, li {
color: #00354e;
font-size: 17px;
line-height: 30px;
}
ul {
list-style: none;
margin-bottom: 1.5rem;
}
li {
padding-left: 30px;
}
li:before {
content: "";
border-color: transparent #00aecb;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1.2em;
top: 1.1em;
position: relative;
}
a {
position: relative;
display: inline-block;
transition: .3s;
text-decoration: none;
color: #00aecb;
}
a::after {
position: absolute;
bottom: .3em;
left: 0;
content: '';
width: 100%;
height: 1px;
background-color: #00adca;
opacity: 0;
transition: .3s;
}
a:hover::after {
bottom: 0;
opacity: 1;
color: #00adca;
}
a:hover {
color: #00adca;
text-decoration: none;
cursor: pointer;
}
b, strong, .bold {
font-weight: 700;
}
hr {
margin: 20px 0;
width: 100%;
border-top: 1px solid #cacfde;
}
.uppercase {
text-transform: uppercase;
}
.container, .container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 25px;
padding-right: 25px;
max-width: 1366px;
}
.uppercase {
text-transform: uppercase;
}
.vert-middle {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.green {
color: #a3d869;
}
.teal {
color: #00aecb;
}
.drk-blue {
color: #125687;
}
section.background-grey {
background: #eeeff2;
padding: 60px 20px;
}
section.background-white {
background: #fff;
padding: 60px 20px;
}
.center {
margin: 0 auto;
text-align: center;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.btn {
background-color: #4CAF50; /* Green */
border: none;
border-radius: 4px;
color: white;
font-family: Averta-Semibold;
font-weight: normal;
padding: 18px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
a.btn:hover {
background-color: #42cfe6;
color: #fff;
}
a.btn::after {
display: none;
}
.btn-teal {
background-color: #00AECB;
}
a.btn.btn-teal:hover {
background-color: #42cfe6;
}
.btn-drkblue {
background-color: #0f5687;
}
a.btn.btn-drkblue:hover {
background-color: #0d3a5b;
}
a.anchor-link {
display: block;
}
a.anchor-link::after {
display: none;
}
a.link-image::after {
display: none;
}
/* --------Header/Top Nav-------- */
header {
background-color: #fff;
height: 100px;
width: 100%;
}
.logo {
padding: 15px 0;
}
nav {
padding: 40px 0;
float: right;
}
nav ul {
list-style-type: none;
text-align: right;
float: right;
margin: 0;
padding: 0;
}
nav li {
display: inline;
padding: 2px;
color: #005d91;
font-size: 16px;
}
nav li:before {
display: none;
}
nav a:hover {
color: #00aecb;
}
/* --------Hero-------- */
.hero {
position: relative;
padding: 125px 0 125px 0;
background: url(img/lp-hero-1.jpg) no-repeat;
background-size:cover;
background-position: center 20%;
color: #fff;
}
.hero.subscribe {
position: relative;
padding: 125px 0 125px 0;
background: url(img/lp-hero-2.jpg) no-repeat;
background-size:cover;
background-position: center 20%;
color: #fff;
}
.hero.sessions {
position: relative;
padding: 125px 0 125px 0;
background: url(img/lp-hero-3.jpg) no-repeat;
background-size:cover;
background-position: center 20%;
color: #fff;
}
.hero h1 {
font-size: 48px;
margin-top: 10px;
}
.mobile h1 {
color: #125687;
font-weight: 400;
font-size: 28px;
}
.mobile p {
font-size: 14px;
line-height: 24px;
}
.subtitle {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 10px;
letter-spacing: .1em;
color: #fff;
background: #73ca14;
padding: 10px 15px;
display: inline-block;
}
.hero-text p {
color: #fff;
}
.hero-text h3 {
/*color: #a3d06a;*/
}
/* --------Main Content-------- */
.main-content--text {
padding-right: 40px;
width: 60%;
}
img.pdf-thumb {
width: 225px;
margin: -30px 0 0 0;
-ms-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
p.intro-text {
font-size: 22px;
line-height: 30px;
color: #125687;
}
.cta-callout {
background: rgba(255, 255, 255, 0.7); /* White background with 70% opacity */
padding: 25px;
margin: 0 0 20px 0;
}
.cta-callout p{
margin-bottom: 0;
}
p.subhead {
margin: 30px 0 5px 0;
color: #125687;
}
.col-lg-7.main-text {padding: 0 10px 0 50px;}
/* --------Form-------- */
form {
margin-top: 25px;
padding: 0 30px 30px;
}
input[type=text], select {
width: 100%;
padding: 8px;
margin: 0 0 10px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 15px;
}
input[type=submit] {
background-color: #00aecb;
color: white;
padding: 14px 40px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
-webkit-transition: background-color .5s ease-out;
-moz-transition: background-color .5s ease-out;
-o-transition: background-color .5s ease-out;
transition: background-color .5s ease-out;
}
input[type=submit]:hover {
background-color: #125687;
}
label {
color: #5e5f60;
margin-bottom: 0;
font-size: 14px;
font-weight: 700;
}
.download-form {
background: #fff;
padding: 0;
}
.download-form h3 {
color: #fff;
font-size: 20px;
font-weight: 500;
}
.form-header {
background: #125687;
padding: 30px 20px;
text-align: center;
}
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}
/* --------Value Prop Content-------- */
.valueprop {
padding: 10px 30px;
}
.valueprop:nth-child(n+2) {
border-left: 1px solid #ebebeb;
}
.valueprop p {
text-align: center;
font-size: 15px;
line-height: 25px;
}
.valueprop h3 {
color: #00aecb;
text-transform: uppercase;
margin-bottom: 20px;
margin-top: 1.5em;
}
.valueprop-content h2 {
margin-bottom: 50px;
}
section.background-white.valueprop-content {
padding: 60px 20px;
}
section.background-white.valueprop-content h3 {
color: #00aecb;
text-transform: uppercase;
margin-bottom: 20px;
margin-top: 1.5em;
font-family: Averta-Bold, sans-serif;
}
.verticalLine {
border-left: 1px solid red;
}
/* --------Events-------- */
section.events {
padding: 60px 0;
}
.thead-blue {
background-color: #00aecc;
color: #fff;
}
/* --------Footer-------- */
.container-fluid--footer {
margin-right: auto;
margin-left: auto;
padding-left: 25px;
padding-right: 25px;
max-width: 800px;
}
.page-footer {
background-color: #125687;
bottom: 0;
margin: 0;
padding: 60px 0;
}
.footer-info {
display: inline;
}
.footer-1 {
text-align: center;
}
.footer-2 {
text-align: center;
}
.footer-1 h3, .footer-2 h3,
.footer-1 p, .footer-2 p,
.footer-1 a, .footer-2 a {
color: #fff;
}
.footer-nav {
padding-top: 60px;
text-align: center;
margin: 0 auto;
}
.footer-nav ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.footer-nav li {
display: inline;
padding: 0;
font-size: 14px;
}
.footer-nav li:before {
display: none;
}
.footer-nav li:after {
content: "|";
color: #a7a298;
padding: 0 10px;
}
.footer-nav li:nth-last-child(1):after {
display: none;
}
.footer-nav a {
color: #fff;
}
.copyright {
font-size: 14px;
padding-top: 15px;
margin: 0;
color: #fff;
}
/* --------Font Awesome Styles-------- */
#font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-twitter-square:before {
content: "\f081";
}
.fa-rss-square:before {
content: "\f143";
}
.fa-linkedin-square:before {
content: "\f08c";
}
i.fa.fa-rss-square, i.fa.fa-linkedin-square, i.fa-twitter-square, i.fa-facebook-square {
font-size: 20px;
color: #00aecb;
}
.fa-facebook-square:before {
content: "\f082";
}
i.fa:hover {
color: #125687;
}
a.social-icon::after {
background-color: #fff !important;
content: none;
}
/* --------Media Queries-------- */
#media (max-width: 1024px){
input[type=submit] {padding: 14px 25px;}
h1 {font-size: 32px;}
.hero h1 {font-size: 38px;}
h2 {font-size: 25px;}
}
#media (min-width: 901px) {
section.main-content>div.container-fluid {
display: flex;
flex-direction: row-reverse;
}
}
#media (max-width: 991px){
img.img-responsive.text-img {padding: 0 0 20px 0;}
.col-lg-7.main-text {padding: 0 20px;}
}
#media (max-width: 900px){
input[type=submit] {padding: 14px 40px;}
section.background-grey {
padding: 40px 0 30px 0;
}
.main-content--text {
padding: 0;
width: 100%;
}
h1 {font-size: 30px;}
.subtitle {
font-size: 16px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #007caa;
opacity: 0.6;
}
.col-sm-6.hero-text {
flex: 80%;
max-width: 80%;
}
}
#media (max-width: 767px){
.valueprop:nth-child(n+2) {
border-left: none;
}
.hero, .hero.sessions, .hero.subscribe {
padding: 80px 0 70px 0;
}
img.pdf-thumb {
width: 200px;
margin: -20px 0 0 0;
}
}
#media (max-width: 580px){
.hero, .hero.sessions, .hero.subscribe {padding: 48px 0 38px 0}
nav li {
padding: 0 3px;
}
header {
height: inherit;
}
.col-sm-6.hero-text {
flex: 100%;
max-width: 100%;
}
header .container-fluid {
text-align: center;
}
nav {
padding: 10px 0 20px 0;
float: none;
}
nav ul {
float: none;
text-align: center;
}
.logo {
width: 65%;
padding: 15px 0 0;
}
.hero h1 {font-size: 26px;}
.hero h3 {font-size: 16px;}
h1 {font-size: 26px;}
.subtitle {
font-size: 14px;
}
.btn {
width: 100%;
}
h2 {font-size: 22px;}
section.background-grey, section.background-white, section.events {padding: 30px 0 20px 0;}
section.background-white.valueprop-content {padding: 40px 20px;}
input[type=submit] {padding: 14px 25px;}
form {padding: 0 20px 30px;}
.download-form h3 {font-size: 16px;}
img.pdf-thumb {
width: 150px;
margin: -10px 0 0 0;
}
}
#media (max-width: 460px){
img.pdf-thumb {
width: 150px;
margin: 10px 0 0 0;
}
}
#media (max-width: 360px){
.hero {
/*background: url(img/hero-1-xsm.jpg) no-repeat;
background-size: cover;*/
}
}
#media (max-width: 320px){
.container, .container-fluid {
padding-left: 20px;
padding-right: 20px;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section class="background-white valueprop-content">
<div class="container-fluid">
<div class="center">
<div class="row">
<div class="col-lg-3 valueprop">
<img class="valueprop-icon" src="img/session-icon.png" alt="session icon" style="max-width: 100%; height: auto;" />
<h3>Explore sessions</h3>
<p>Tour Geneia’s educational sessions which include topics such as AI, machine learning and SDoH.</p>
<a class="btn btn-teal" href="explore-sessions.html" target="_blank">View sessions </a>
</div>
<hr class="d-block d-lg-none">
<div class="col-lg-3 valueprop">
<img class="valueprop-icon" src="img/meeting-icon.png" alt="meeting icon" style="max-width: 100%; height: auto;" />
<h3>Schedule a meeting</h3>
<p>Request a meeting with on-site experts to learn more about our offerings and views demos.</p>
<a class="btn btn-teal" href="mailto:geneia#geneia.com?subject=Schedule a meeting at HIMSS" target="_blank">Request a meeting</a></div>
<hr class="d-block d-lg-none">
<div class="col-lg-3 valueprop">
<img class="valueprop-icon" src="img/email-icon.png" alt="email icon" style="max-width: 100%; height: auto;" />
<h3>Connect with us</h3>
<p>Stay up-to-date on our activities, including HIMSS19</p>
<br class="d-none d-sm-block">
<a class="btn btn-teal" href="form.html" target="_blank">Sign up</a>
</div>
<hr class="d-block d-lg-none">
<div class="col-lg-3 valueprop">
<img class="valueprop-icon" src="img/find-icon.png" alt="find icon" style="max-width: 100%; height: auto;" />
<h3>Find us at HIMSS</h3>
<p>Explore our solutions and services at booth 541 in the exhibit hall.</p>
<br class="d-none d-sm-block">
<a class="btn btn-teal" href="https://himss19.mapyourshow.com/7_0/floorplan/index.cfm?hallID=S&selectedBooth=booth~541" target="_blank">Locate our booth</a>
</div>
</div>
</div>
</div>
</section>

Answer 1

Use Flexbox to evenly distribute the items in the div.
.col-lg-3 {
display: flex;
flex-direction: column;
justify-content: space-between;
}