Business Owner / Chief Developer

Richard Korts

<div>
Hi,<br><br>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.<br><br>For the border replace everything that is in <strong>stlye=" "</strong> by Bootstrap classes &nbsp;<a href="https://getbootstrap.com/docs/5.0/utilities/borders/" rel="ugc">https://getbootstrap.com/docs/5.0/utilities/borders/</a><br><pre><code class="code-1 nolinks" id="code-20-43289880-1"><span>&lt;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; &nbsp;padding-bottom: 0px;"&gt;</span>
</code></pre><br>Bootstrap have a lot of pre-made classes so it is better to learn how to use them than creating custom classes.<br><br>If you are trying to use Bootstrap classes and it's not working as expected:<br>-Check the syntax and make sure there is no typo.<br>-Check if the template overide the Bootstrap classes (right click inspect / style tab)<br>-Learn how Bootstrap work, there are several online courses on Udemy or Youtube about BS 5.<br><br>Bootstrap 5 has new classes so it required some code adjustments.<br>If you use Bootstrap 5 make sure to use the latest beta version.
</div>


Developer & Coffee Roaster

Scott Fell

<div>
OK, guys, I did what you said &amp; it works perfectly, but I introduced another problem. See attached image, vertical border perfect. Note in header, it repeats twice the intended menu items.<br><br><table><tbody><tr><td>&lt;div style="background-image: url('https://www.lakosgroundwater.com/images/header.png'); &nbsp;text-align: center; height: 115px;"&gt;</td></tr><tr><td><br></td><td>&lt;div class="row hidden-xs" id="myHead" style="padding-top:5px;"&gt;</td></tr><tr><td><br></td><td>&lt;div class="col-sm-6 col-xs-6"&gt;&amp;nbsp;&lt;/div&gt;</td></tr><tr><td><br></td><td>&lt;div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Arial', sans-serif; font-size: 16px;"&gt;&lt;a href="<a href="http://lakosgroundwater.com/main.php" rel="ugc">main.php</a>"&gt;Home&lt;/a&gt;&lt;/div&gt;</td></tr><tr><td><br></td><td>&lt;div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Arial', sans-serif; font-size: 16px;"&gt;&lt;a href="<a href="http://www.lakos.com/About/contact-us" rel="ugc">http://www.lakos.com/About/contact-us</a>" target="blank"&gt;Contact LAKOS&lt;/a&gt;&lt;/div&gt;</td></tr><tr><td><br></td><td>&lt;div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Arial', sans-serif; font-size: 16px;"&gt;&lt;a href="<a href="http://lakosgroundwater.com/index.php" rel="ugc">index.php</a>"&gt;Logout&lt;/a&gt;&lt;/div&gt;</td></tr><tr><td><br></td><td>&lt;/div&gt;</td></tr><tr><td><br></td><td>&lt;div class="row visible-xs" &nbsp;id="myHead"&gt;</td></tr><tr><td><br></td><td>&lt;div class="col-sm-2 col-xs-2"&gt;&amp;nbsp;&lt;/div&gt;</td></tr><tr><td><br></td><td>&lt;div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Arial', sans-serif;&nbsp;"&gt;&lt;a href="<a href="http://lakosgroundwater.com/main.php" rel="ugc">main.php</a>"&gt;Home&lt;/a&gt;&lt;/div&gt;</td></tr><tr><td><br></td><td>&lt;div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Arial', sans-serif;&nbsp;"&gt;&lt;a href="<a href="http://www.lakos.com/About/contact-us" rel="ugc">http://www.lakos.com/About/contact-us</a>" target="blank"&gt;Contact LAKOS&lt;/a&gt;&lt;/div&gt;</td></tr><tr><td><br></td><td>&lt;div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Arial', sans-serif;&nbsp;"&gt;&lt;a href="<a href="http://lakosgroundwater.com/index.php" rel="ugc">index.php</a>"&gt;Logout&lt;/a&gt;&lt;/div&gt;</td></tr><tr><td><br></td><td>&lt;/div&gt;</td></tr></tbody></table>Here is the code for the elements separated by the vertical line (border), works perfect.<br><table><tbody><tr><td>&lt;div class="row mb-0"&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;div class="col-sm-6 col-xs-6 text-center"&gt;&lt;span style="font-size: 26px; color:#004B2C; padding-bottom:20px;"&gt;&lt;b&gt;SUB-K Separators&lt;/b&gt;&lt;br&gt;&lt;br&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;img src="<a href="http://lakosgroundwater.com/images/subk_seperators.PNG" rel="ugc">images/subk_seperators.PNG</a>"&gt;&lt;/span&gt;&lt;/div&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;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"&gt;&lt;span style="font-size: 26px; color:#004B2C; padding-bottom:20px;"&gt;&lt;b&gt;PPS Separators&lt;/b&gt;&lt;br&gt;&lt;br&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;img src="<a href="http://lakosgroundwater.com/images/pps_separators.PNG" rel="ugc">images/pps_separators.PNG</a>"&gt;&lt;/span&gt;&lt;/div&gt;</td></tr><tr><td><br></td><td>&lt;/div&gt;</td></tr><tr><td><br></td><td>&lt;div class="row mt-0"&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;div class="col-sm-6 col-xs-6"&gt; &nbsp;&nbsp;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;span style="font-size: 16px;"&gt;&lt;b&gt;For Submersible Pumps with water well diameters 4” to 6”&lt;/b&gt;&lt;br&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;PVC Construction&lt;/span&gt;&lt;br&gt;&lt;br&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;span style="font-size: 16px;"&gt;&lt;b&gt;Flow Range:&amp;nbsp;&lt;/b&gt;3-99 GPM (.7 – 23 m3/hr)&lt;br&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;b&gt;Max Pressure: &lt;/b&gt;Up to 150psi (10.3 bar)&lt;/span&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;/div&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;div class="col-sm-6 col-xs-6 border-start border-top-0 border-end-0 border-bottom-0 border-success border-1"&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;span style="font-size: 16px;"&gt;&lt;b&gt;For Turbine Pumps with water well diameters &nbsp;6” to 19.25”&lt;/b&gt;&lt;br&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;Carbon Steel Construction. Available in Stainless&lt;/span&gt;&lt;br&gt;&lt;br&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;span style="font-size: 16px;"&gt;&lt;b&gt;Flow Range: &lt;/b&gt;100-3,180 GPM (23- 723 m3/hr)&lt;br&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;b&gt;Max Pressure: &lt;/b&gt;Up to 150psi (10.3 bar)&lt;/span&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;/div&gt;</td></tr><tr><td><br></td><td>&lt;/div&gt;</td></tr></tbody></table><br>Since I earlier tried it and got no border, I updated my bootstrap includes to these:<br><br>&lt;link&nbsp;href="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="ugc">https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css</a>" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"&gt;<br>&lt;script src="<a href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" rel="ugc">https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js</a>" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"&gt;&lt;/script&gt; <br><br>The second one (bundle.min.js) I put just before the body tag per Bootstrap instructions.<br><br>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? <br><br><a href="https://filedb.experts-exchange.com/incoming/2021/05_w21/1561326/vg_ok_head_bad.PNG" rel="ugc"><img src="https://filedb.experts-exchange.com/incoming/2021/05_w21/1561326/vg_ok_head_bad.PNG" class="fr-fic fr-dib"></a>
</div>


vg_ok_head_bad.PNG

<div>
<div class="content wysiwyg-content fr-view">
This is related to <a href="https://www.experts-exchange.com/questions/29215811/No-border-css.html" rel="ugc">https://www.experts-exchange.com/questions/29215811/No-border-css.html</a><br><br><pre><code class="code-1 nolinks" id="code-10-29216073-1"><span>I have this css:.mb-0 {</span>
<span>&nbsp; margin-bottom: 0 !important;</span>
<span>}</span>
<span>.mt-0 {</span>
<span>&nbsp; margin-top: 0 !important;</span>
<span>}</span>
<span>And this HTML:</span>
<span></span>
</code></pre><table><tbody><tr><td>&lt;div class="row mt-0"&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;div class="col-sm-6 col-xs-6"&gt;&nbsp; &nbsp;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;span style="font-size: 16px;"&gt;&lt;b&gt;For Submersible Pumps with water well diameters 4” to 6”&lt;/b&gt;&lt;br&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;PVC Construction&lt;/span&gt;&lt;br&gt;&lt;br&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;span style="font-size: 16px;"&gt;&lt;b&gt;Flow Range:&amp;nbsp;&lt;/b&gt;3-99 GPM (.7 – 23 m3/hr)&lt;br&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;b&gt;Max Pressure: &lt;/b&gt;Up to 150psi (10.3 bar)&lt;/span&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;/div&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;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; &nbsp;padding-bottom: 0px;"&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;span style="font-size: 16px;"&gt;&lt;b&gt;For Turbine Pumps with water well diameters &nbsp;6” to 19.25”&lt;/b&gt;&lt;br&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;Carbon Steel Construction. Available in Stainless&lt;/span&gt;&lt;br&gt;&lt;br&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;span style="font-size: 16px;"&gt;&lt;b&gt;Flow Range: &lt;/b&gt;100-3,180 GPM (23- 723 m3/hr)&lt;br&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;b&gt;Max Pressure: &lt;/b&gt;Up to 150psi (10.3 bar)&lt;/span&gt;</td></tr><tr><td><br></td><td>&nbsp; &nbsp;&lt;/div&gt;</td></tr><tr><td><br></td><td>&lt;/div&gt;</td></tr></tbody></table>Which produces the attached.<br>How do I get rid of the gap in the vertical line separating the two blocks?<br><a href="https://filedb.experts-exchange.com/incoming/2021/05_w21/1561278/vertical-gap.PNG" rel="ugc">vertical gap.PNG</a>
</div>
</div>


vertical-gap.PNG


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

CSS / Bootstrap Borders

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Bootstrap is a front end web framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

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