I know this is a stupid question but how do I easily add links into a paragraph? This should be an easy thing to do in this day and age. I know how to add links using html to the page afterwards but when I keep exporting my html file I have to put all the links in the paragraph again. Is there an easier way to do this without creating custom html? You should just be able to highlight the text and add a link to it, is that too much to ask in 2020? I know this isn’t meant to be a drag and drop app but there are some features that should be in this to save people time from nominal tasks such as links?
There is a links button in the paragraph toolbar. Highlight the text in the paragraph and select the links button and the options for links appears.
Thanks so much for this, stupid me as I am new to BootStrap Studio so still trying to figure my way around it. Would you know how to reduce the nav bar height as it seems to be taking up too much space on mobile and when I reduce the height it effects the logo and hamburger position. Thanks again for your help.
I see a container that you are using to wrap the contents of the Navbar that has padding set to 40 px. I would use the responsive padding classes to control the padding rather than assigning a setting directly to the class container as that is a common class used in multiple places usually on a website.
The responsive padding classes will also allow you to set the padding setting at different breakpoints. For instance you may want to add two classes, one for smallest py-1, and another class py-md-4 on everything 768px and above.
If you want complete customization control of the container it would better to add a class and assign padding settings to that class so you do not effect the container class. Something like nav-wrapper and then set your special padding settings using media queries.
There is a link component in the Controls submenu of the Studio Tab. This is the preferred way to add links to your page, as the link button twinstream mentioned only allows you to add links with a default target (meaning your link cannot open in a new browser window.)
The navbar height is a consequence of the size of the elements inside it (the text size of your links, your brand, and a logo (if you have one) plus whatever padding is added to the navbar. For example, the Navigation Clean component has a top and bottom padding of .75 rem, from XS to SM, and then from MD to XL is has 1 rem. You would typically adjust the height by increasing or decreasing this padding. (I prefer to use pixels as opposed to rems, but that’s just personal preference.)
You’re using inline padding settings set to 0px. You want to avoid inline CSS for multiple reasons. The correct way to do this is to copy the .navbar class to your custom CSS file, and then set the padding there to override the default Bootstrap padding. Then you can just duplicate that class, add a media query at 768px, and change the padding for your MD through XL sizes.