Accessibility Template

In the new upcoming BS, could you provide a accessible bootstrap template? I work in higher education and use BS to quickly show template designs for CMS systems. The main problem with the an accessibility bootstrap template is the “landmark” items in HTML 5. Landmarks cannot be inside another landmark. Now coding will allow this to work and it has in the past, but moving forward for accessibility landmarks should be separate. Landmarks like header, banner, main, aside, nav, and footer. I can create a header, banner, nav and footer template. The main and aside is where the problem is and this always has to be custom code, which then doesn’t let me take advantage of the other bootstrap components like cards in the main or aside. I would be willing to provide any help.

When you create a sidebar you just need to have a container (not to be confused with a container class) for it and the main content to be in. This is about the only way you’re going to get this to work unless you are really good at using Flex, which I am not at this time yet. Anyways You have an outter container or div, which holds your first Row (could eliminate this if you don’t plan any special backgrounds), and inside that are 2 columns. One is for the sidebar which you set the width you want it, and one is for the main content. Typically you would put the site page titles within the main content area, but you can do it separately above both the sidebar and main content, whatever works best for your needs.

From here you add rows and columns within each of the areas and away you go. it’s not real hard, I do a lot because a lot of my clients are old school site page style people lol. You should enclose something within each area in a Container div if you don’t make the outter container a Container div. I opt to do separate ones as it’s easier to manipulate my components that way.

Anyways that’s about all there is to making a sidebar setup. Hope that helps.

P.S. Keep in mind that your main content area is going to grow with your sidebar, but not the other way around so you may need to manipulate background colors etc. if your sidebar doesn’t contain enough content, or use Flex to grow them together.

P.S. No Genuine Code was killed by Custom Code during this process :stuck_out_tongue: