bootstrap tab bar goes wrong when correct errors on W3C

Report · Mar 04, 2019

Got a question about bootstrap tab bar. Im using version 4.3.1

and in W3C checker I get two errors:

Not sure what the </script> error is as when I add the extra div as stated in error 2 it goes away.

If I correct the div error 2. by adding the extra div W3C says the code is correct BUT then the tab bar don't work.

Not sure why? and how to correct this?

Tim

---------

<!doctype html>

<head>

<title>Untitled Document</title>

$(document).ready(function() {

$(".scrollable-nav").draggable({

axis: 'x'

});

</script>

</head>

<a class='nav-link active font' data-toggle='tab' href='#s1'>Login</a>

</li>

<a class='nav-link font' data-toggle='tab' href='#s2'>Register</a>

</li>

<a class='nav-link font' data-toggle='tab' href='#s3'>Forgot Password</a>

</li>

</ul>

<h4 class="card-title mt-3 text-center">Login</h4>

<p class="text-center">Login to your account - Add your events - Save search settings</p>

<p>

<a class="btn btn-block btn-light-blue twitter-button"> <em class="fa fa-twitter"></em> Login via Twitter</a>

<a class="btn btn-block btn-blue facebook-button"> <em class="fa fa-facebook-f"></em> Login via facebook</a>

</p>

</p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<button type="submit" class="btn btn-primary btn-block create-account-button3" id="green-panel"> Create Account </button>

</div>

</div>

</div>

</div>

</script>

</script>

</html>

-------

------

Report · Mar 04, 2019

The tab-content DIV is not closed. Close it and both errors will go away. If you are not a good tag sleuth, place a closing DIV tag just before the closing body tag.

There are widgets for Dreamweaver far superior to Bootstrap in terms of refinement and code quality, but if you're into Bootstrap, then excuse my candor and... as you were 🙂

Report · Mar 04, 2019

Hi ALsp,

Thank you for your reply - yes for now I will use bootstrap!

I added </div> to line 106 to close the div line

and closed the body line with </body>

but when I do this W3C says its correct but then the tabs don't work or go funny when you click on them.

(before I add the </div> it works!

tab one is ok - but when you click on tab 2 it goes like this and then tab 3 won't open.

------

-----

<!doctype html>

<head>

<title>Untitled Document</title>

$(document).ready(function() {

$(".scrollable-nav").draggable({

axis: 'x'

});

</script>

</head>

<a class='nav-link active font' data-toggle='tab' href='#s1'>Login</a>

</li>

<a class='nav-link font' data-toggle='tab' href='#s2'>Register</a>

</li>

<a class='nav-link font' data-toggle='tab' href='#s3'>Forgot Password</a>

</li>

</ul>

<h4 class="card-title mt-3 text-center">Login</h4>

<p class="text-center">Login to your account - Add your events - Save search settings</p>

<p>

<a class="btn btn-block btn-light-blue twitter-button"> <em class="fa fa-twitter"></em> Login via Twitter</a>

<a class="btn btn-block btn-blue facebook-button"> <em class="fa fa-facebook-f"></em> Login via facebook</a>

</p>

</p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<button type="submit" class="btn btn-primary btn-block create-account-button3" id="green-panel"> Create Account </button>

</div>

</div>

</div>

</div>

</script>

</script>

</body>

</html>

-----

Thanks

Tim

Report · Mar 04, 2019

to me, fixing a Bootstrap layout is like giving an alcoholic a tall one. Sorry, but I can't. Nancy or Ben will likely be your best sources for help. What I can tell you is that the tab-content DIV, in the state your page was when you first posted, was in fact, unclosed. The general way people check tag integrity in Dreamweaver is mostly visual, and you need to understand the code in order to do that. Using the Tag Selector Bar can help, too, but you need to start from the bottom and work up.

That said, look at the form elements in your code. Looks like you chopped off a closing tag in placing a comment. Be careful with comments.

If there is one bit of advice that you should consider is that in order to effectively use Bootstrap, you should be quite proficient in both coding and CSS. If not, you're going to be dependent on outside help, and it will often be in the form of giving you a fish, rather than teaching you to fix.

Learn to code. Once you do, you'll discover you don't need Bootstrap.

Report · Mar 04, 2019

ALsp wrote
to me, fixing a Bootstrap layout is like giving an alcoholic a tall one. Sorry, but I can't. Nancy or Ben will likely be your best sources for help.

Fortunately I'm bored sh**less at the moment. But yeah I couldn't work with that all day every-day, it can serious damage your heath. Just surprised Bootstrap doesnt carry a Government Health Warning - its more lethal than nicotine.

Report · Mar 04, 2019

Thank you all for your comments.

Yes, I will have to find the extra or missing <div> some how!

Can I ask osgood what software do you use to reformat the text ? as it look so much more tidy 😉

Thanks

Tim

Report · Mar 04, 2019

https://forums.adobe.com/people/tim+cross wrote

Can I ask osgood what software do you use to reformat the text ? as it look so much more tidy 😉

Hi Tim,

I do everything manually in the code editor, apart from removing excess line spaces, in that case I use an Apple script to close the lines up, plus I like code which is all justified to the left. I seem to be able to read it faster as I scroll down the editor, rather than when its tabbed like most developers will advise using.

Anyway that code should now work and validate.

Report · Mar 04, 2019

Fortunately I'm bored sh**less at the moment. But yeah I couldn't work with that all day every-day, it can serious damage your heath. Just surprised Bootstrap doesn't carry a Government Health Warning - its more lethal than nicotine.

The problem with Bootstrap widgets in Dreamweaver is the that the code is written as a manual coder would. The tab panel widget, for example, is a series of adjacent elements. While the markup is bulbous, a partial cure would be to wrap all the pieces and parts inside an ID'd container. That way, non-coder Dreamweaver users would be able to select the container and see if it ends properly or includes bits from other elements. But since Dreamweaver does not have a built-in way to actually manage Bootstrap widgets, I guess they feel this is not necessary.

Report · Mar 04, 2019

Osgood thank you for solving that.

Report · Mar 04, 2019

There's is something else wrong on that page - a <div> missing or an extra one, most likely misconfigured.

I've basically reformated your code, see below, which works and validates. Problem with Bootstrap is it uses excessive numbers of <divs> to do a simple job and really unless you're an expert it should be avoided at all costs.

<!doctype html>

<head>

<title>Untitled Document</title>

$(document).ready(function() {

$(".scrollable-nav").draggable({

axis: 'x'

});

</script>

</head>

<li class='nav-item'><a class='nav-link active font' data-toggle='tab' href='#s1'>Login</a></li>

<li class='nav-item'><a class='nav-link font' data-toggle='tab' href='#s2'>Register</a></li>

<li class='nav-item'><a class='nav-link font' data-toggle='tab' href='#s3'>Forgot Password</a></li>

</ul>

<h4 class="card-title mt-3 text-center">Login</h4>

<p class="text-center">Login to your account - Add your events - Save search settings</p>

<p>

<a class="btn btn-block btn-light-blue twitter-button"> <em class="fa fa-twitter"></em> Login via Twitter</a>

<a class="btn btn-block btn-blue facebook-button"> <em class="fa fa-facebook-f"></em> Login via facebook</a>

</p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<button type="submit" class="btn btn-primary btn-block create-account-button3" id="green-panel"> Create Account </button>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Report · Mar 04, 2019

Hi Tim, you have an empty input-group-prepend tag unclosed: (see underlined below)

</div>

Adobe Community

bootstrap tab bar goes wrong when correct errors on W3C

1 Correct answer