The use of some bootstrap components, the navbar for example, require adding a <span> tag or a href to a button or an unordered list item. Can anyone show me how to do that without adding the tags and associated text after the project is exported?
For instance:
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
Brusus
Registered User
10 posts
Inger
Senior Advisor
14,461 posts
Which component are you talking about? One from the bootstrap website, or one produced as an example by CC? Or possibly one of mine, from my sharing library? Elsewhere?
If it wasn't one of mine, take a look in my sharing folder (URL in signature) where I have some different Bootstrap menus. Maybe you find the solution to your question there. The Bootstrap ones have '(BS)' after the name.
If it wasn't one of mine, take a look in my sharing folder (URL in signature) where I have some different Bootstrap menus. Maybe you find the solution to your question there. The Bootstrap ones have '(BS)' after the name.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Twinstream
Registered User
811 posts
Use a button link icon element.
Bootstrap 5 CSS Grid.
Brusus
Registered User
10 posts
Thanks so much for your response Inger,
I am trying to use the navbar component that is listed on bootstrap's website in the examples page. I would have listed all of the code, but the two fragments of code that I did list show what is needed. Thanks to the CC tutorial on implementing the bootstrap carousel, I was able to create and save a few components in CC using the bootstrap examples. The navbar presents a challenge because I am not aware of a way to insert the <span> tag in a button object or the <a> tag in an unordered list item where a class name is included in both (ostensibly for bootstrap to do it's thing). If you need to see the entire navbar example code, I will include it.
I am trying to use the navbar component that is listed on bootstrap's website in the examples page. I would have listed all of the code, but the two fragments of code that I did list show what is needed. Thanks to the CC tutorial on implementing the bootstrap carousel, I was able to create and save a few components in CC using the bootstrap examples. The navbar presents a challenge because I am not aware of a way to insert the <span> tag in a button object or the <a> tag in an unordered list item where a class name is included in both (ostensibly for bootstrap to do it's thing). If you need to see the entire navbar example code, I will include it.
Twinstream
Registered User
811 posts
Do you see my post ?
Bootstrap 5 CSS Grid.
Brusus
Registered User
10 posts
Hi twinstream, yes I did. Thanks for your input but it doesn't answer the question.
Twinstream
Registered User
811 posts
This is generated from SD3 for a Generic navbar...
<nav class="container-grid navbar navbar-light bg-light navbar-expand-md"><a title="Navbar" class="link-text navbar-brand" href="#">Navbar</a><a class="link-button-glyph btn navbar-toggler" href="#" data-target="#navbarNav" data-toggle="collapse"><span class="link-button-text navbar-toggler-icon"></span></a>
<div class="container-grid collapse navbar-collapse" id="navbarNav">
<ul class="list-container navbar-nav">
<li class="list-item-container nav-item"><a class="link-text nav-link" href="#">Home</a></li>
<li class="list-item-container nav-item"><a class="link-text nav-link" href="#">Features</a></li>
<li class="list-item-container nav-item"><a class="link-text nav-link" href="#">Pricing</a></li>
<li class="list-item-container nav-item dropdown"><a class="link-text nav-link dropdown-toggle" id="navbarDropdownMenuLink" href="#" data-toggle="dropdown">Dropdown link</a>
<div class="container-grid dropdown-menu"><a class="link-text dropdown-item" href="#">Action</a><a class="link-text dropdown-item" href="#">Another action</a><a class="link-text dropdown-item" href="#">Something else here</a></div>
</li>
</ul>
</div>
</nav>
Which part are you asking about ?
<nav class="container-grid navbar navbar-light bg-light navbar-expand-md"><a title="Navbar" class="link-text navbar-brand" href="#">Navbar</a><a class="link-button-glyph btn navbar-toggler" href="#" data-target="#navbarNav" data-toggle="collapse"><span class="link-button-text navbar-toggler-icon"></span></a>
<div class="container-grid collapse navbar-collapse" id="navbarNav">
<ul class="list-container navbar-nav">
<li class="list-item-container nav-item"><a class="link-text nav-link" href="#">Home</a></li>
<li class="list-item-container nav-item"><a class="link-text nav-link" href="#">Features</a></li>
<li class="list-item-container nav-item"><a class="link-text nav-link" href="#">Pricing</a></li>
<li class="list-item-container nav-item dropdown"><a class="link-text nav-link dropdown-toggle" id="navbarDropdownMenuLink" href="#" data-toggle="dropdown">Dropdown link</a>
<div class="container-grid dropdown-menu"><a class="link-text dropdown-item" href="#">Action</a><a class="link-text dropdown-item" href="#">Another action</a><a class="link-text dropdown-item" href="#">Something else here</a></div>
</li>
</ul>
</div>
</nav>
Which part are you asking about ?
Bootstrap 5 CSS Grid.
Twinstream
Registered User
811 posts
Here is the project file if that helps....
Bootstrap 5 CSS Grid.
Brusus
Registered User
10 posts
Hi Twinstream, please forgive me for the short answer. Your suggestion, 'use a button link icon', works for the first part of my question and negates the need to add the <span> tag info. But unfortunately it doesn't address the unordered list item question. The list item has to have a link associated with it that doesn't cause the text to appear as a link. This list is used in a navbar dropdown and has a certain text style that gets changed if I add a link in the text edit area. If you could suggest something that can fix that, then that would make you a wizard in my eyes. 
Inger
Senior Advisor
14,461 posts
Bruce, don't use an 'unordered list', because the possibilities with those list items are limited. Instead use a 'list container'. It has 'list item containers' in which you can add whatever you want. This was one of the first lessons we all had to learn when we started using CC's responsive web builders.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
