CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user5709693
user5709693

Reputation:

Bootstrap columns not working properly

I'm having some problems with Bootstrap columns, they are not working the way they are suppose to. In the picture below the 4 profile boxes have to be centered...the same way the 3 columns are centered in the "smart & creative" section. Unfortunately I can't link to a jsfiddle but I have provided code for you to look at below the image, In the code section scroll down for css. Here is screenshot of the page

<!-- smart and creative -->
    <div class="smart-creative">
      <div class="row">
        <div class="container">
          <div class="title col-xs-12">
            <h2>Smart &amp; Creative</h2>
            <p>This is why you will use it :)</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="container">
          <div class="circles col-md-4 col-sm-4">
            <div class="circle1"></div>
            <h4>Multi purpose</h4>
            <p>Lorem ipsum dolor sit amet,<br /> consectetur adipisicing..</p>
          </div>
          <div class="circles col-md-4 col-sm-4">
            <div class="circle2"></div>
            <h4>Flat UI</h4>
            <p>Lorem ipsum dolor sit amet,<br /> consectetur adipisicing..</p>
          </div>
          <div class="circles col-md-4 col-sm-4">
            <div class="circle3"></div>
            <h4>Creative Design</h4>
            <p>Lorem ipsum dolor sit amet,<br /> consectetur adipisicing..</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Team -->
    <div class="team">
      <div class="row">
        <div class="container">
          <div class="team-title col-md-12">
            <h2>Talented &amp; Experts</h2>
            <p>This is our team</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="container">
          <div class="profile-wrapper">
            <div class="profiles pic1 col-md-3 col-sm-3">
              <div class="pic-holder">

              </div>
              <div class="desc">
                <h5>Mahmoud Baghagho<h5>
                <p>Senior UI Designer</p>
              </div>
              <div class="twitter-button">
                <span class="fa fa-twitter">Follow</span>
              </div>
            </div>
            <div class="profiles pic1 col-md-3 col-sm-3">
              <div class="pic-holder">

              </div>
              <div class="desc">
                <h5>Mahmoud Baghagho<h5>
                <p>Senior UI Designer</p>
              </div>
              <div class="twitter-button">
                <span class="fa fa-twitter">Follow</span>
              </div>
            </div>
            <div class="profiles pic1 col-md-3 col-sm-3">
              <div class="pic-holder">

              </div>
              <div class="desc">
                <h5>Mahmoud Baghagho<h5>
                <p>Senior UI Designer</p>
              </div>
              <div class="twitter-button">
                <span class="fa fa-twitter">Follow</span>
              </div>
            </div>
            <div class="profiles pic1 col-md-3 col-sm-3">
              <div class="pic-holder">

              </div>
              <div class="desc">
                <h5>Mahmoud Baghagho<h5>
                <p>Senior UI Designer</p>
              </div>
              <div class="twitter-button">
                <span class="fa fa-twitter">Follow</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>






  CSS
// Smart and Creative
.smart-creative{
  background-color: $theme1-color;
  color: white;
  .title{
    text-align: center;
    padding-top: 10px;
    p{
      color: $header-color;
    }
  }
  .circles{
    padding-top: 25px;
    h4,p{
      text-align: center;
    }
    p{
      color: $header-color;
    }
    .css-for-circle{
      height: 100px;
      width: 100px;
      background-color: $header-color;
      border-radius: 50px;
      background-position: center;
      background-repeat: no-repeat;
      margin: 0 auto;
    }
    .circle1{
      background-image: url("../imgs/multi.png");
      @extend .css-for-circle;
    }
    .circle2{
      background-image: url("../imgs/flat.png");
      @extend .css-for-circle;
    }
    .circle3{
      background-image: url("../imgs/creative.png");
      @extend .css-for-circle;
    }
  }
}


// Team
.team{
  background-color: $theme2-color;
  .team-title{
    h2,p{
      text-align: center;
    }
  }
  .profile-wrapper{
    margin: 0 auto;
    width: 95%;
    overflow: hidden;
    .profiles{
      max-width: 230px;
      height: 341px;
      background-color: white;
      border-radius: 5px;
      .pic-holder{
        max-width: 164px;
        height: 164px;
        border-radius: 82px;
        background-color: $theme2-color;
        margin: 0 auto;
        position: relative;
        top: 25px;
        box-shadow: inset 3px 3px 6px -2px #48804B;
        -moz-box-shadow: inset 3px 3px 6px -2px #48804B;
        -webkit-box-shadow: inset 3px 3px 6px -2px #48804B;
        -o-box-shadow: inset 3px 3px 6px -2px #48804B;
        background-image: url("http://placehold.it/147x147");
        background-repeat: no-repeat;
        background-size: 90%;
        background-position: center;
      }
      .desc{
        padding: 45px 0 20px 0;
        h5,p{
          text-align: center;
        }
      }
      .twitter-button{
        max-width: 204px;
        height: 43px;
        background-color: $theme2-color;
        margin: 0 auto;
        border-radius: 2px;
        .fa-twitter{
          font-size: 35px;
          color: white;
        }
      }
    }
  }
}

Upvotes: 0

Views: 1023

Answers (3)

Payal2299
Payal2299

Reputation: 148

.team .profile-wrapper .profiles {
 max-width: 230px; 
}

Is making column width smaller then it should be. I have created code-pan for you please check
http://codepen.io/payalpatel2299/pen/MbRwxo

Upvotes: 0

andi
andi

Reputation: 6522

First of all, rows should be INSIDE containers.

But your real problem is setting a max-width here:

.profiles{max-width: 230px;}

You're not letting the columns expand to their natural width.

Upvotes: 2

EdwardM
EdwardM

Reputation: 1146

This div:

<div class="container">

should be the one holding:

<div class="row">

The correct way, for example:

<div class="container">
   <div class="row">
      <div class="title col-xs-12">
          <h2>Smart &amp; Creative</h2>
          <p>This is why you will use it :)</p>
      </div>
   </div>
</div>

Upvotes: 2

Related Questions