Search code examples
csshtmltwitter-bootstrapglyphicons

How to put a glyphicon between two jumbotrons?

enter image description here

Basically I want to have the glyphicon in between the two jumbotrons. Here is my code. Not sure why the arrow goes into the next line or at the end of the jumbotrons.

<div class="container">
    <div class="jumbotron col-xs-2" style="padding: 10px; background-color:#4aca4a; color:white"><b>Step 1</b><br /> A company posts a project <span class="glyphicon glyphicon-arrow-right"></span></div>
    <div class="jumbotron col-xs-2 col-sm-offset-1" style="padding: 10px; background-color:#4aca4a; color:white"><b>Step 2</b><br /> Students apply for the project</div>

</div>
Solution

  • Try this

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="jumbotron col-xs-5" style="padding: 10px; background-color:#4aca4a; color:white"><b>Step 1</b><br /> A company posts a project </div>
  <div class="col-xs-2 text-center"><span class="glyphicon glyphicon-arrow-right"></span></div>
  <div class="jumbotron col-xs-5" style="padding: 10px; background-color:#4aca4a; color:white"><b>Step 2</b><br /> Students apply for the project</div>
</div>

    If you want vertical align you have to add some flex

    .container.flex {
  display: flex;
  align-items: center;
}

.container.flex .jumbotron {
  margin: 0;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>


<div class="container flex">
  <div class="jumbotron col-xs-5" style="padding: 10px; background-color:#4aca4a; color:white"><b>Step 1</b><br /> A company posts a project </div>
  <div class="col-xs-2 text-center"><span class="glyphicon glyphicon-arrow-right"></span></div>
  <div class="jumbotron col-xs-5" style="padding: 10px; background-color:#4aca4a; color:white"><b>Step 2</b><br /> Students apply for the project</div>
</div>