1

enter image description hereI want the three div containers to line up side by side with a max-width of 1044px. I tried using col-md-4, because I have margin:20px, it pushed the third div container to the second row. I read up online, some people suggested using a div class="row", I tried that, end result is the same. Here is my HTML:

 <div class="engineering-section col-xs-12">
          <div class="engineering-section-title title-text text-center">Engineering</div>
          <div class="row">
            <div class="card-container">
              <div class="card-section col-md-4">
                <div class="mdl-card__media">
                  <img src="img/engineer-1.jpg">
                </div>
                <div class="mdl-card__supporting-text">
                  <span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Enginnering Suite (May 2015)</span>
                  <div class="checksum">
                  <a class="info_checksum" href="#">Checksum</a>
                  </div>
                </div>
                <div class="card_actions">
                   <a class="card-links" href="#">
                     Download Now
                     <i class="fa fa-chevron-right"></i>
                   </a>
                </div><!--end card_actions-->
              </div><!--end mdl-cell-->
              <div class="card-section col-md-4">
                <div class="mdl-card__media">
                  <img src="img/engineer-2.jpg">
                </div>
                <div class="mdl-card__supporting-text">
                  <span class="mdl-typography--font-light mdl-typography--subhead">V8.8 aspenONE Process Manuals and Process Tools</span>
                  <div class="checksum">
                  <a class="info_checksum" href="#">Checksum</a>
                  </div>
                </div>
                <div class="card_actions">
                   <a class="card-links" href="#">
                     Download Now
                     <i class="fa fa-chevron-right"></i>
                   </a>
                </div><!--end card_actions-->
              </div><!--end mdl-cell-->
              <div class="card-section col-md-4">
                <div class="mdl-card__media">
                  <img src="img/engineer-3.jpg">
                </div>
                <div class="mdl-card__supporting-text">
                  <span class="mdl-typography--font-light mdl-typography--subhead">Aspen License Deployment Assistant</span>
                  <div class="checksum">
                  <a class="info_checksum" href="#">Checksum</a>
                  </div>
                </div>
                <div class="card_actions">
                   <a class="card-links" href="#">
                     Download Now
                     <i class="fa fa-chevron-right"></i>
                   </a>`enter code here`
                </div><!--end card_actions-->
              </div><!--end mdl-cell-->
          </div><!--end row-->
          </div><!--end card-container-->
7
  • 2
    Do you have any custom css also. If yes , then post it
    – Ankit Agarwal
    Commented Aug 28, 2015 at 20:29
  • @Sijie Wang why you are applying the margin? keep the cols below from top or increasing the space between cols
    – Shehary
    Commented Aug 28, 2015 at 20:30
  • how do you increase the spacing between cols?
    – Sijie Wang
    Commented Aug 28, 2015 at 20:36
  • @AnkitAgarwal The code is here jsfiddle.net/Swathi56/tya11gux not sure if this helps cuz images etc are not showing.
    – Sijie Wang
    Commented Aug 28, 2015 at 20:37
  • @SijieWang you wana increase the space between cols or just wana increase the space between top and 3 cols?
    – Shehary
    Commented Aug 28, 2015 at 20:39

3 Answers 3

Reset to default
0

Remove custom styles of margin from card-section class. It will work

3
  • Removing the margin will make the 3 div tightly squished against each other which is not what I want to achieve. I like to give them some breathing room.
    – Sijie Wang
    Commented Aug 28, 2015 at 20:45
  • It won't happen because col-md-4 apply margin in between the sibling elements. Did you really observed that on fiddle
    – Ankit Agarwal
    Commented Aug 28, 2015 at 20:47
  • Well, I tried removing margin:20px in my code, and that left the 3 boxes with no space in between.
    – Sijie Wang
    Commented Aug 28, 2015 at 20:50
0

You have to follow these 3 rules :

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.

It should look like this :

<div class="container-fluid"><!--<div class="container">-->
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
</div>

See this link for more information about the Bootstrap responsive design : http://getbootstrap.com/css/

0

You are doing wrong here

<div class="card-section col-md-4">

Put card-section inside col-md-4

<div class="col-md-4">
    <div class="card-section">

it can give you the space between 3 cols and you can style the content too

and remove margin: 20px; it's unnecessary now.

Fiddle example

1
  • 1
    Excellent! That fixed it! Thanks!
    – Sijie Wang
    Commented Aug 28, 2015 at 21:51

Not the answer you're looking for? Browse other questions tagged or ask your own question.