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>
	<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: </b>3-99 GPM (.7 – 23 m3/hr)<br>
	<b>Max Pressure: </b>Up to 150psi (10.3 bar)</span>
	</div>
	<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>
	</div>
	</div>

Forget the green bottom center, not relevant

no_left_border.PNG

CSSHTMLBootstrap

Last Comment

Scott Fell

8/22/2022 - Mon

ASKER CERTIFIED SOLUTION

Scott Fell

5/13/2021

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

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

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Scott Fell

5/13/2021

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

5/13/2021

ASKER

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.

Thanks,

Richard

Scott Fell

5/13/2021

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.

fblack61