CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4frontend
Enrico
Enrico

Reputation: 830

separating elements in a row with background color

I need to separate the three div's, remaining on the same line but the background color of each other does not allow that. The problem is, when I set additional margin or padding, the divs wrap up, not remaining aligned horizontally. 

#service_container {
  text-align: center;
}

.servicon {
  font-size: 54px;
}

.service_page_tile {
  background-color: rgba(161, 204, 239, 0.5);
}
<div id="service_container" class="container-fluid">
  <div id="s_idea" class="container-fluid">
    <h2>Idea</h2>
    <div class="row">
      <div class="service_page_tile col-lg-4 col-md-6 col-sm-12">
        <i class="servicon far fa-lightbulb"></i><br> Do you have an idea about a website you want to realize? Blog, Company Website, e-shop, V-log channel, web-app or just your personal page, I will pay special attention to the customer's output to achieve.
      </div>
      <div class="service_page_tile col-lg-4 col-md-6 col-sm-12">
        <i class="servicon fas fa-lightbulb"></i><br> Do you still need to find out what's your deal? Let's check templates and discover what's the best formula chosen by the most succesfull people or business.
      </div>
      <div class="service_page_tile col-lg-4 col-md-12 col-sm-12">
        <i class="servicon fas fa-video"></i><br> What about a video? A resumé, a clip for a presentation or simply your last travel on the other side of the world. there's nothing more catchy to convey emotions or ideas!
      </div>
    </div>
  </div>

http://jsfiddle.net/Z7mFr/182/

Upvotes: 2

Views: 61

Answers (2)

ouni
ouni

Reputation: 3373

The quick-and-dirty solution is to use a transparent border, and then clip the background to its inside boundary:

.service_page_tile {
  background-color: rgba(161, 204, 239, 0.5);
  background-clip: padding-box;
  border: 8px solid transparent;
}

An advantage to this solution is that the tile background color block will have equal height for all three tiles.

Upvotes: 1

Chiller
Chiller

Reputation: 9738

When you add margin to your a fixed width element, the calculated width adds the margin value to fixed width which will cause it to go underneath, and thats because there is no more space in the same line

Solution:

Wrap the content of your divs inside another div, and apply margin to the inner div, or just add padding to the outer div since box-sizing property is already included in bootstrap

See solution:

#service_container {
  text-align: center;
}

.servicon {
  font-size: 54px;
}

.service_page_tile {
  background-color: rgba(161, 204, 239, 0.5);
  margin:5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="service_container" class="container-fluid">
  <div id="s_idea" class="container-fluid">
    <h2>Idea</h2>
    <div class="row">
      <div class="col-lg-4 col-md-6 col-sm-12">
        <div class="service_page_tile ">
          <i class="servicon far fa-lightbulb"></i><br> Do you have an idea about a website you want to realize? Blog, Company Website, e-shop, V-log channel, web-app or just your personal page, I will pay special attention to the customer's output to
          achieve.
        </div>
      </div>
      <div class=" col-lg-4 col-md-6 col-sm-12">
        <div class="service_page_tile">
          <i class="servicon fas fa-lightbulb"></i><br> Do you still need to find out what's your deal? Let's check templates and discover what's the best formula chosen by the most succesfull people or business.
        </div>
      </div>

      <div class="col-lg-4 col-md-12 col-sm-12">
        <div class="service_page_tile ">
          <i class="servicon fas fa-video"></i><br> What about a video? A resumé, a clip for a presentation or simply your last travel on the other side of the world. there's nothing more catchy to convey emotions or ideas!
        </div>
      </div>
    </div>
  </div>

Upvotes: 2

Related Questions