CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
SBB
SBB

Reputation: 8990

Bootstrap CSS Styling troubles

I have a small piece of bootstrap code I am working with to style my li elements inside a panel. I am trying to get the icon on the left and the buttons on the right to be centered both vertically and horizontally. The content it self I would like to be centered vertically.

<div class="panel panel-primary">
  <div class="panel-heading"><i class="fa fa-cubes"></i>&nbsp;&nbsp;Modules</div>
  <br />
  <div class="list-group">
     <a class="list-group-item">
        <div class="media col-md-3">
           <figure class="">
              <center><i aria-hidden="true" class="fa fa-cog fa-6"></i></center>
           </figure>
        </div>
        <div class="col-md-6">
           <h4 class="list-group-item-heading"> Module Title </h4>
           <p class="list-group-item-text"> Qui diam libris ei, vidisse incorrupte at mel. His euismod salutandi dissentiunt eu. Habeo offendit ea mea. Nostro blandit sea ea, viris timeam molestiae an has. At nisl platonem eum.
              Vel et nonumy gubergren, ad has tota facilis probatus. Ea legere legimus tibique cum, sale tantas vim ea, eu vivendo expetendis vim. Voluptua vituperatoribus et mel, ius no elitr deserunt mediocrem. Mea facilisi torquatos ad.
           </p>
        </div>
        <div class="col-md-3">
           <div class="input-group">
              <div id="radioBtn" class="btn-group">
                 <center>
                    <button class="btn btn-primary btn-sm active" data-toggle="happy" data-title="Y">YES</button>
                    <button class="btn btn-primary btn-sm notActive" data-toggle="happy" data-title="N">NO</button>
                 </center>
              </div>
              <input type="hidden" name="happy" id="happy">
           </div>
        </div>
     </a>
  </div>

CSS:

a.list-group-item {
    height:175px;;
    min-height:175px;
}
a.list-group-item.active small {
    color:#fff;
}
.fa-6{
    font-size: 60px;
    vertical-align: middle;
}
#radioBtn .notActive{
    color: #3276b1;
    background-color: #fff;
}

What I have tried: With my little knowledge of CSS, I was trying to align the elements using vertical align and couldn't get them to move. I tried using center tags around the buttons and those wouldn't move either. I have a feeling the li styling is overwriting some of the things I am trying and its throwing me off.

Any thoughts?

Here is an example of what I am trying to do:

enter image description here

JS Fiddle: https://jsfiddle.net/p7td4sbz/

Upvotes: 1

Views: 67

Answers (1)

julianstark999
julianstark999

Reputation: 3616

For your Problem you can simply add this to your css

.input-group{
    width:100%;
    text-align:center;
}
.list-group-item:first-child{
    border-width: 0px 0px !important;
}

.vertical-center {
    min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
    min-height: 100vh; /* These two lines are counted as one :-)       */
    display: flex;
    align-items: center;
}

To reach a vertical center alignment add vertical-center to each list-group-item

Upvotes: 1

Related Questions