Bootstrap causes display problems

[Marcus1587]

I had a web page that worked fine. Then I added a table. The table displayed fine in Dreamweaver Design mode, but in Live mode the cell spacing was missing. Also horizontal rules did not display. The same display problems existed in a browser.

I slowly deleted parts of my page and while I found that deleting the dropdown menu did not solve the problem, deleting the three lines of code needed for bootstrap implementation of dropdown menu did solve the cell spacing and horizontal rule problem.

The lines deleted from the "head" were:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

This is the first time I had used bootstrap. I used it because it appeared that the very old method I had used in the past to create dropdown menus was obsolete.

Why do these lines of code cause the table to display incorrectly and the horizontal rule not to display at all?

What should I do to implement a dropdown menu and still get the table and horizontal rule to display correctly?

Thank you for your help.

[osgood_]

When using 3rd party solutions like a library i.e. Bootstrap etc there is a possibility that the files used to control the library could conflict with the code you have used which is not related to Bootstrap.

If you can provide a link to the problem page which includes the Bootstrap library someone may be able to provide you with a more difinitive answer as to why this is happening, it may not be related to Bootstrap at all.

[Ben M]

Deleting parts of code like this sporadically will usually lead to more problems then it resolves.  When trying to troubleshoot these types of issues you should use the inspector in your browser to see what style rules are affecting things like padding, spacing, etc. and then target those rules by editing, or appending, as opposed to deleting.

As already suggested the best thing you can do at this point is share a link, but if you are utilizing bootstrap at all on the page, please add the bootstrap includes back to the page before you share with us.

[Nancy OShea]

Hi Marcus,

For quickest help in this forum, upload your problem page and assets to a TEST folder on your remote server so we can see it.  When your question is resolved, you may delete the TEST folder from your server.

#1 Tables are for tabular data ONLY -- spreadsheets, charts, schedules. 

#2 Tables for layout are counterproductive because they are not responsive.  In other words, tables defeat the whole purpose of using a responsive framework like Bootstrap.  Don't use tables if you can avoid them.

#3 If you're building #1 and absolutely can't avoid a table, use Bootstrap's built-in responsive tables.  But keep in mind that "ease of use" is diminished for users on small handhelds.

https://getbootstrap.com/docs/4.5/content/tables/

[mlibkind]

Thank you all for your help. I have constructed a scaled down web page that will illustrate the problem. It is located at:

http://www.backcountryskitours.com/private/test_pages/sample_page.htm

My question remains, why does the use of bootstrap cause the cell spacing and horizontal rules not to display?

Thank you for any help you can provide me.

Marcus Libkind

[mlibkind]

And yes, I will read about using bootstrap tables. Sounds like a good idea, but I still want to get what I have working first.

[osgood_ · Accepted solution]

Firstly you should NOT/NEVER be using Bootstrap v3 on a new build website, that verison is years old and outdated. The current stable version is v4 and there is a v5 version which has just recently been released and is fairly stable I believe.

To answer your sepecific questions -

By default Bootstrap v3 and v4 will removed the default spacing in ALL table cells.

Bootstrap v4 does it with the following css selector:

table {
border-collapse: collapse;
}

Bootstrap v3 (currently the version you are using) removes the <hr> tag completley from view by setting the height to 0, whilst Bootstrap v4 retains the <hr> tag but sets its default color to gray with the following css selector:

hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

You can change the color of the <hr> tag (if you are using Bootstrap v4) by over-riding the css in a dedicated stylesheet (DO NOT ever alter the default Bootstrap css file):

hr {
border-top: 1px solid red!important;
}

To re-instate the table cell spacing you are meant to use the built in Bootstrap helper classes:

In your particular table case and using Bootstrap v4 you would add some vertical cell spacing - class="py-1" as shown below:

<table width="600" border="0" cellspacing="10" cellpadding="0">
<tbody>
<tr>
<td width="150" class="py-1">nono</td>
<td width="150">pnm</td>
<td width="150">pmomi</td>
<td width="150">i p</td>
</tr>
<tr>
<td width="150" class="py-1">;luyb </td>
<td width="150"> louo</td>
<td width="150">'po po </td>
<td width="150">p o'ip </td>
</tr>
<tr>
<td width="150" class="py-1">on7898b7</td>
<td width="150">'ooinu</td>
<td width="150"> op' iop </td>
<td width="150"> 'po </td>
</tr>
</tbody>
</table>

Key here is to decide if you are going to use Bootstrap or not and then take advantage of its built in css classes if you do! Take some time out to learn the Bootstrap default helper classes.

Yes, you can certainly mix and match Bootstrap and your own code/css but you need to be aware of how Bootstrap works and how to overide its many css classes.

Personally I think its bloated over complicated junk with over 8000 lines of css unminified, the majority of which you will never ever need, lying there doing nothing, whilst eating up critical load-time, especially on mobile devices. Most 'developers', especially amatuers where the majority of Bootstrap builds are used WILL NEVER optimise the css to deploy just what is needed, which is possible.

Of course its down to the individual to decide their own path - I'm just laying bare some true facts and figures which most Bootstrappers prefer you not to know.

Hope the above helps you in some way, whether you continue with Bootstrap or not.

[mlibkind]

Osgood,

Fantastic reply. I especially appreciate your detail and thoughts in general about bootstrap at the end.

Marcus

[Ben M]

Just to further on this, reviewing your page, you have a malformed Bootstrap layout so some of the classes that Osgood mentioned won't even take affect.  For instance you just have a wrapper class with no structure inside of it in your "main" area.  The wrapper is not even a defined bootstrap class.  To make the bootstrap css work properly you need to have a structure with: "container-*", "row-*", "col-*" where you can have fluid and/or sizes for those classes, but it must follow that hierarchy.

I do agree with the comment that Bootstrap is bloated, but this will be true of many frameworks.  While Bootstrap 5 has tried to lighten this load by unloading Jquery entirely, it is a similar argument to using a Wordpress CMS that there will always be bloat that you will not use.  The reason why you would want to use Frameworks, whether you use a standard one or try to develop your own, is to make available a structure and set of design instructions to follow your orgaization's brand requirements, and also technical requirements of the site interface.  Personally as someone who has leaned on Bootstrap often, where I have found it most useful is within marketing platforms like Marketo from Adobe, Eloqua, Hubspot, etc. where you are limited in the code you can write and having the included libraries to lean on.

[osgood_]

Just to further on this, reviewing your page, you have a malformed Bootstrap layout so some of the classes that Osgood mentioned won't even take affect.

All the classes I mentioned WILL take effect. You don't need a container or row/col UNLESS you are harnessing the full responsive nature of Bootstrap which I/we have zero idea if that is the desired requirement of the OP.

Personally I can't see using Bootstrap and NOT using it as it should be used to be much use, in which case you are correct, the current html page structure needs to be fully reconsidered.

I also agree 'loosely' in terms of IF you are working in a team environment use the lesser of 2 evils, use Bootstrap where everyone is singing from the same hymn sheet or use bespoke coding where a less than adequate coder may have dificulties understanding code/css written by someone else (in which case they should not be a developer, in my opinion).

The trade off is a poor implementation against one that is streamlined. I can't see any reason these days why some one working as a 'one-man-band' outfit would even consider using Bootstrap and churning out junk coding, have some pride in what you do, then you can only get better, rather than be beholden to what someone else says you should use and at what time you can use it. Bootstrap is so far behind the curve it's laughable, even v5 doesn't have any css grid support in 2020..........WOW!

[Nancy OShea]

"I can't see any reason these days why some one working as a 'one-man-band' outfit would even consider using Bootstrap and churning out junk coding..."

=========

It's a pragmatic decision. I like Bootstrap because it's convenient & logical.  It's not that different from working with standardized sheet music.  Anyone familiar with it can pick up right where I left off without missing a beat.

On the surface, frameworks may seem bloated for some things but the code is well-documented and far less nebulous than custom code that was arbitrarily cobbled together on a whim.  Without a Rosetta stone, God only knows what that person was thinking.  We have enough uncertainty from Covid-19 right now.  Cooperative use of frameworks provides a safety net that the project CAN survive even if we don't.

[osgood_]

Cooperative use of frameworks provides a safety net that the project CAN survive even if we don't.

Well I guess we could debate that all day long. A framework/library is only as good as that framework lasts or is deemed as being popular. Given the current influx of frameworks and libraries, workflows these days the survival rate of your project could well be less than you imagine. Once a framework, library or workflow is 'obsolete' so is the website and maybe possibly even the developer.  Some projects you would be hard pressed to find a developer that could take on the management of a website created in one of these niche frameworks/libraries/workflows.

[Nancy OShea]

"the survival rate of your project could well be less than you imagine"

 All code must be updated reguarly to keep pace with emerging technologies.  The shelf-life of code is 3-5 years, be it bespoke, Bootstrap, WordPress or whatever...

[osgood_]

All code must be updated reguarly to keep pace with emerging technologies. The shelf-life of code is 3-5 years, be it bespoke, Bootstrap, WordPress or whatever...

Either way I find the arguement of whether a project will survive or not if built with a popular framework or bespoke-code a non-starter. You will always be able to find a developer with the skills to manage both situations. I was more thinking when you mentioned frameworks/libraries in general some of the less popular offerings out there amongst the many, which may lessen the lifespan of a website and certainly some niche workflows may give a client a headache in finding a resource capable of understanding the workflow.

Edited:

Just to provide an example, the frameworks Vue or React etc. I dont know much about either in terms of the final build workflow to be honest but try and take down a website built with either and piece it together, if it suddenly landed in your lap for management and maintenance. As far as I know its all compiled into files at the local-end (assuming you are using a CLI approach and not just  hooking up to a CDN) before getting uploaded to the web-server as one big js file. I dont really know how that helps the client as they are always in the pocket of the person who built them. I could be incorrect on this (I hope I am) but I have never actually found any information in connection with how to uncompile a Vue website easily from the server if you cant get hold of the production files.

Back in the day you could virtually go to any website and take it down, study how it worked and would be capable of maintaining it if it fell into you hands............no frameworks involved of course, just vanilla everything! Weve come a long way since those days but its not all beneficial for either developers or more so clients.