Link to home
Create AccountLog in
Avatar of Richard Korts
Richard KortsFlag for United States of America

asked on

CSS / Bootstrap Borders

This is related to https://www.experts-exchange.com/questions/29215811/No-border-css.html

I have this css:.mb-0 {
  margin-bottom: 0 !important;
}
.mt-0 {
  margin-top: 0 !important;
}
And this HTML:

Open in new window

<div class="row mt-0">

   <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>

   <div class="col-sm-6 col-xs-6" style="border-left:1px; border-color:#004B2C; border-style: solid; border-bottom: 0px; border-top:0px; border-right: 0px;  padding-bottom: 0px;">

   <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>
Which produces the attached.
How do I get rid of the gap in the vertical line separating the two blocks?
vertical gap.PNG
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Hi,

I would not use inline CSS as it often break Bootstrap logical instead create a custom css only if the utilities is not covered by Boostrap.

For the border replace everything that is in stlye=" " by Bootstrap classes  https://getbootstrap.com/docs/5.0/utilities/borders/
<div class="col-sm-6 col-xs-6" style="border-left:1px; border-color:#004B2C; border-style: solid; border-bottom: 0px; border-top:0px; border-right: 0px;  padding-bottom: 0px;">

Open in new window


Bootstrap have a lot of pre-made classes so it is better to learn how to use them than creating custom classes.

If you are trying to use Bootstrap classes and it's not working as expected:
-Check the syntax and make sure there is no typo.
-Check if the template overide the Bootstrap classes (right click inspect / style tab)
-Learn how Bootstrap work, there are several online courses on Udemy or Youtube about BS 5.

Bootstrap 5 has new classes so it required some code adjustments.
If you use Bootstrap 5 make sure to use the latest beta version.
Avatar of Richard Korts

ASKER

OK, guys, I did what you said & it works perfectly, but I introduced another problem. See attached image, vertical border perfect. Note in header, it repeats twice the intended menu items.

<div style="background-image: url('https://www.lakosgroundwater.com/images/header.png');  text-align: center; height: 115px;">

<div class="row hidden-xs" id="myHead" style="padding-top:5px;">

<div class="col-sm-6 col-xs-6">&nbsp;</div>

<div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Arial', sans-serif; font-size: 16px;"><a href="main.php">Home</a></div>

<div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Arial', sans-serif; font-size: 16px;"><a href="http://www.lakos.com/About/contact-us" target="blank">Contact LAKOS</a></div>

<div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Arial', sans-serif; font-size: 16px;"><a href="index.php">Logout</a></div>

</div>

<div class="row visible-xs"  id="myHead">

<div class="col-sm-2 col-xs-2">&nbsp;</div>

<div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Arial', sans-serif; "><a href="main.php">Home</a></div>

<div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Arial', sans-serif; "><a href="http://www.lakos.com/About/contact-us" target="blank">Contact LAKOS</a></div>

<div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Arial', sans-serif; "><a href="index.php">Logout</a></div>

</div>
Here is the code for the elements separated by the vertical line (border), works perfect.
<div class="row mb-0">

   <div class="col-sm-6 col-xs-6 text-center"><span style="font-size: 26px; color:#004B2C; padding-bottom:20px;"><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 border-start border-top-0 border-end-0 border-bottom-0 border-success border-1"><span style="font-size: 26px; color:#004B2C; padding-bottom:20px;"><b>PPS Separators</b><br><br>

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

</div>

<div class="row mt-0">

   <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>

   <div class="col-sm-6 col-xs-6 border-start border-top-0 border-end-0 border-bottom-0 border-success border-1">

   <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>

Since I earlier tried it and got no border, I updated my bootstrap includes to these:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

The second one (bundle.min.js) I put just before the body tag per Bootstrap instructions.

Here is the page image. It appears to me that the visible-xs class is being shown on the the large size as well as small. Do I have to have "hidden-" for the other sizes now?

User generated image
Fixing one problem only for another to appear, just means that the issue was always there and only blocked by the prior issue.

To keep the questions threads clear, post this as a new question or it will get messy.

The first thing to do is to rewrite the page, http://lakosgroundwater.com/main.php?guest=y and use the updated as your template.

  • Get rid of all of your inline styles and move it to a css file.
  • Avoid spec'ing out things like font sizes, colors, borders and use those in bootstrap if you can https://getbootstrap.com/docs/5.0/utilities/text/#font-size
  • Avoid trying to manually manipulate padding and margin, instead use the classes in bootstrap.


User generated image

Just taking care of how the page is created may very well solve the issue. If it does not, it will be easier to solve. Use some of the example pages https://getbootstrap.com/docs/5.0/examples/ if you need a start. Make sure to look at the correct version of BS, v4 vs v5.

Finally, run the page through the validator https://validator.w3.org/nu/?doc=http%3A%2F%2Flakosgroundwater.com%2Fmain.php%3Fguest%3Dy  You don't have to worry so much about the yellow warnings, but the red errors need to be fixed. Sometimes fixing the first one will fix other issues and the errors you do have are not major and look easy to fix.

User generated image
Until the HTML mark up is corrected and what I mentioned above is fixed, it's not worth trying to identify one problem to fix because something else will just not work correctly.