CODEWITHSUNDEEP
csstwitter-bootstrap-3
smeeb
smeeb

Reputation: 29477

Layout issues with spans and Bootstrap 3

TB3 here. Here is the respective jsFiddle. I am trying to build a little minitron (mini jumbotron) that has the following layout:

enter image description here

As you can see, there is a main <div> given the minitron class. Each 'minitron' has:

Unfortunately my CSS-fu is pretty weak, and as you can see in that fiddle, I'm just not achieving the desired layout.

Here's my attempt at some CSS rules:

.minitron-icon {
    width:20%;
    height: 20%;
    margin: 5px;
}
.minitron-name {
    font-size: 18px;
}
.minitron-desc {
    width: 80%;
    margin: 5px;
}
.minitron-learnmore {
    width: 95%;
}

Can anyone spot where I'm going awry?

Upvotes: 1

Views: 42

Answers (1)

marcanuy
marcanuy

Reputation: 23942

What about this one? https://jsfiddle.net/oh69hq71/17/

Taking advantage of BS grid system using rows and columns. The first row containing the glyphicon and name/description, the other one with the learn more full width.

    <div class="well minitron">
    <div class="row">
      <div class="col-xs-2">
        <span class="glyphicon glyphicon-piggy-bank minitron-icon"></span>
      </div>
      <div class="col-xs-10">
        <div class="row">
          <span class="minitron-name">Some Name</span>
        </div>
      <div class="row">
        <span class="minitron-desc">A short meaningful description goes here.</span>
      </div>
  </div>

    <div class="row">
      <div class="col-xs-12">
        <button class="minitron-learnmore btn btn-success" type="button">LEARN MORE ABOUT JUPITER!</button>
      </div>
    </div>
 </div>

*Update:

  • Increasing glyphicon size: In the glyphicon span set its style as "font-size:1.5em;"

  • To align it closer to name and description, add the style="text-align:right" at the glyphicon div container

  • The description is aligned to the named without the original css styles.

  • To increase padding (or margin) between the learn more button and description/icon, increase the learn more div top margin

New fiddle: https://jsfiddle.net/oh69hq71/18/

Upvotes: 2

Related Questions