Avatar of Richard Korts
Richard Korts
Flag for United States of America asked on

No border (css)

This HTML produces the attached image of that part of the page.

Why is there no 1px border on the left as indicated in the html / CSS?

<div class="row">

   <div class="col-sm-6 col-xs-6 text-center"><span style="font-size: 26px; color:#004B2C;"><b>SUB-K Separators</b><br><br>

   <img src="images/subk_seperators.PNG"></span></div>

   <div class="col-sm-6 col-xs-6 text-center" style="border-left:1px; border-color:#004B2C;"><span style="font-size: 26px; color:#004B2C;"><b>PPS Separators</b><br><br>

   <img src="images/pps_separators.PNG"></span></div>


<div class="row" style="padding-top: 20px;">

   <div class="col-sm-6 col-xs-6">   

   <span style="font-size: 16px;"><b>For Submersible Pumps with water well diameters 4” to 6”</b><br>

   PVC Construction</span><br><br>

   <span style="font-size: 16px;"><b>Flow Range:&nbsp;</b>3-99 GPM (.7 – 23 m3/hr)<br>

   <b>Max Pressure: </b>Up to 150psi (10.3 bar)</span>


   <div class="col-sm-6 col-xs-6" style="border-left:1px; border-color:#004B2C;">

   <span style="font-size: 16px;"><b>For Turbine Pumps with water well diameters  6” to 19.25”</b><br>

   Carbon Steel Construction. Available in Stainless</span><br><br>

   <span style="font-size: 16px;"><b>Flow Range: </b>100-3,180 GPM (23- 723 m3/hr)<br>

   <b>Max Pressure: </b>Up to 150psi (10.3 bar)</span>


Forget the green bottom center, not relevant


Avatar of undefined
Last Comment
Scott Fell

8/22/2022 - Mon
Scott Fell

View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Scott Fell

Hey Richard,

Looks like your other issue ended up in my profile as a Testimonial.

Perfect, but not the effect I need. I guess I need to make the other 3 borders zero, because it puts them in like with 2 or 3 px.

There is another issue, eliminating spacing between bootstrap rows. I am stunned how hard that is to find using google.  

Instead of fighting with the Bootstrap built-in css to add a custom border, use the built-in classes, it will be much easier. https://getbootstrap.com/docs/5.0/utilities/borders/

Richard Korts

Presumably they mean "start" is left and "end" is right?

Why do they feel "left" and "right" are not more intuitive. I'll try it, nomenclature seems odd.

I've seen those borders in use (especially "danger") on sites where I buy things.


Scott Fell

If you are talking about like below where "border-start" is the left, I would say that is because when the screen draws, it goes from left to right. It happens so fast, we don't think of it that way. But if you were to loop through and output 1000 div's as a box with borders and some data inside, you would probably see them built from the top left to the bottom right.
"border-start": (
      property: border-left,
      class: border-start,
      values: (
        null: $border-width solid $border-color,
        0: 0,

Open in new window

Your help has saved me hundreds of hours of internet surfing.