CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Mia
Mia

Reputation: 233

Floating Bootstrap Columns

I have a footer I am making for a webpage that looks like thisenter image description here

As you can see the right column will not stay in line with the others and the spacing between them is not even. The gradient behind each column is a picture. I tried using pull-right but when I go to resize then it looks weird and doesn't stack on top of each other. Here's my HTML:

<div class="row">
  <div class="gradient left">
        <div class="text-center button-center">
        <a class="btn btn-danger " href="http://nhgreatlakes.com/Portals/Merit/tabid/1298/Default.aspx">
        <i class="fa fa-external-link fa-lg"></i> LAUNCH NEW HORIZONS<br>PORTAL</a>
        </div>
    </div>

    <div class="gradient text-center center">
        <div class="vertical-center">
        <h4 id="connect">Connect With Us!</h4>

        <a href="https://www.facebook.com/meritnetwork"><i class="fa fa-facebook fa-2x"></i></a>
        <a href="https://twitter.com/meritnetwork"><i class="fa fa-twitter fa-2x"></i></a>
        <a href="http://merit.edu/contact/"><i class="fa fa-envelope fa-2x"></i></a></div>
</div>

    <div class="gradient text-center right">

        <h3 id="ML">Click to view our upcoming events</h3>
        <a href="http://merit.edu/learning/"><i class="fa fa-calendar fa-2x" ></i></a></div>

</div>

and here's the CSS:

.gradient{
    width: 278px; 
    height: 106px;   
    background-image: url('gradient.png');

}
.button-center{
    position: relative;
    top: 50%;
    transform: translateY(-50%);   
}

.vertical-center{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.left{
    float: left;
}

.center{
    margin-right: auto; 
    margin-left: auto; 

}
.right{
    float: right; 
}

I need each section to be evenly spaced and to stack correctly when it's resized. And the footer spans the whole container FYI.

Upvotes: 0

Views: 5296

Answers (3)

Creaven
Creaven

Reputation: 319

As you know with bootstrap you get a 12 grids running across.

You need something like: div class = row for container .

div class= col-md-4  // for all 3 boxes. This assumes no margins or padding on divs otherwise change 4 to a 3

Upvotes: 0

Tony_89
Tony_89

Reputation: 817

Since your using bootstrap you can use columns in your row, i have added this to your code. Look at how the boostrap grid system works for further understanding.

see Updated Code

.gradient {
  width: 278px;
  height: 106px;
  background-image: url('gradient.png');
}
.button-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.left {
  float: left;
}
.center {
  margin-right: auto;
  margin-left: auto;
}
.right {
  margin-bottom: 20px;
  float: right;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-4  gradient left">
    <div class="text-center button-center">
      <a class="btn btn-danger " href="http://nhgreatlakes.com/Portals/Merit/tabid/1298/Default.aspx">
        <i class="fa fa-external-link fa-lg"></i> LAUNCH NEW HORIZONS
        <br>PORTAL</a>
    </div>
  </div>

  <div class="col-xs-4  gradient text-center center">
    <div class="vertical-center">
      <h4 id="connect">Connect With Us!</h4>

      <a href="https://www.facebook.com/meritnetwork"><i class="fa fa-facebook fa-2x"></i></a>
      <a href="https://twitter.com/meritnetwork"><i class="fa fa-twitter fa-2x"></i></a>
      <a href="http://merit.edu/contact/"><i class="fa fa-envelope fa-2x"></i></a>
    </div>
  </div>

  <div class="col-xs-4 gradient text-center right">

    <h3 id="ML">Click to view our upcoming events</h3>
    <a href="http://merit.edu/learning/"><i class="fa fa-calendar fa-2x" ></i></a>
  </div>

</div>

Upvotes: 0

Diego Cardenas
Diego Cardenas

Reputation: 393

within the <div class = 'row'> can add the <div class = "col-sm-4 '> as shown in the Grid System of bootstrap

<div class="row">
    <div class="col-sm-4" style='background: #55D946'>a</div>
    <div class="col-sm-4" style='background: #5333EC'>b</div>
    <div class="col-sm-4" style='background: #D8F02F'>c</div>
</div>

Upvotes: 3

Related Questions