Twitter Bootstrap Question posted in

Why is Border bottom appearing even when not applied?-Twitter bootstrap

I’ve set a grid with 4 blocks using the floats. And on the grid items, I’ve applied border-top on every item and border-right on the odd number of items.

But for some reason, there is some kind of border on the bottom of the odd blocks.

Any reasons for this behaviour and any fixes for the same?

Extra note: This issue is not appearing when I set the grid using flexbox.

Codepen Link: https://codepen.io/vikrantnegi007/full/NXKjOb/

.main-container6 {
  float: left;
  width: 100%;
}

.services-container {
  float: left;
  width: 50%;
  position: relative;
  border-top: 2px solid #fff;
}

.services-text-left {
  text-align: left;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #ffffff;
  background: rgba(109, 109, 109, .75);
  -webkit-transition: all .35s;
  transition: all .35s;
  z-index: 99;
  width: 100%;
}

.services-container img {
  display: block;
  width: 100%;
}

.services-text-in {
  padding: 60px;
}

.services-container:nth-child(2n+1) {
  border-right: 2px solid #fff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="main-container6">
  <div class="services-container">
    <img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000
">
    <div class="services-text-left bg-color">
      <div class="services-text-in">
        <h3>Lorem ipsum</h3>
        <ul>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="services-container">
    <img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000
">
    <div class="services-text-left bg-color">
      <div class="services-text-in">
        <h3>Lorem ipsum</h3>
        <ul>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="services-container">
    <img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000
">
    <div class="services-text-left bg-color">
      <div class="services-text-in">
        <h3>Lorem ipsum</h3>
        <ul>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="services-container">
    <img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000
">
    <div class="services-text-left bg-color">
      <div class="services-text-in">
        <h3>Lorem ipsum</h3>
        <ul>
          <li>Lorem ipsum</li>
          <li>Lorem ipsum</li>
        </ul>
      </div>
    </div>
  </div>
</section>
Tags:

3

Answers


  1. 0

    Because you are using box-sizing: border-box…adding border-right affects the width of the image, which in turn affects the height.

    If you add border-right to all items then the heights match up, and the divs align.

    demo on codepen

    Login or Signup to reply.
  2. 0

    this effect occurs because the odd conatainers i.e (2n+1) has borders and even container i.e (2n) has no border, you can use padding instead to solve this. or give border to every container 

    .services-container {
    border-right: 2px solid #fff;
}
    Login or Signup to reply.
  3. 0

    Just add this css properties to .services-container class,

    .services-container {border-right: 2px solid transparent;}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search