Tips & Tricks

Got any cool time saving tips for working with Bootstrap Studio? Write them in this thread.

1 Like

Quickly delete CSS blocks with Backspace + Enter.

1 Like

This is going to sound like common sense I'm sure to many, but for those that may not have delved very deeply into the workings of scripts prior to using BootStrap Studio, you may not always realize what is happening when you duplicate components with ID's on the same pages. My Example, will show you what you need to do if you decide to "duplicate" something that has ID's, with subsequent attributes that use this ID, that cannot to be reused.

I have a page with 3 tabs on it, each tab stands for a different year and it will be added to each year. Each tab has 2 accordion components on it, one for a column Jan - Jun and one for a column July - August. What I did was copy the one tab (duplicate it) and didn't think about editing the attributes for the ID, href and parents of the Accordions, only changed the tabs attributes. Hence, with 2015, 2016 and 2017 tabs, that made 6 accordions all sharing the same accordion 1 and 2 ID's all on the same page and the accordions broke and stopped working of course.

This information is about how to change those attributes. You'll notice we cannot just go into the HTML and change it, but the way to do it is very easy and basically all you're doing is overwriting the setting that exists already.

1. Click a line in the code of the HTML window that includes the attributes you want to change. In this case I needed to change the ID from id="accordion-1" to id="accordion-3" (and so on for the rest to renumber each so the ID's are only used once.) - To do this just change the id number in the ID box, this is the easy one (they are all easy though).

2. Now to change something a setting that isn't an ID or Class you'll need to add a new attribute using the Plus + button in the lower right corner of the HTML Attributes window. That will give you 2 boxes. - In the first box, put the name of the attribute you want to change. In my case I needed to change the href attribute so I type href in the box (no quotes are needed for either of the boxes). - In the second box type the value that you want the attribute to have. In my case I needed to change it from accordion-1 .item-X (X standing for whatever number that particular item is, since I have to change them all). Once again no quotes.

Now hit the Apply button and you will see that your attributes have updated to the correct ones. Rinse and Repeat as needed!

Using the Copy/Paste Linked feature.

This feature is designed for you to use a consistently used section of code through out your project on every page where you can edit once and all the other pages update with that same change.

For instance, lets say you have a project with 10 pages and each page contains a contact section but now you need to make a change to the contact section which means you have to make the change on all 10 pages :(

You would switch this contact section to a Copy/Paste Linked version of the section on all the other pages instead.

  1. on one of the pages find the section you want to replicate in the Overview pane on the left hand side of the app (preferably just the section that contains the content you're wanting to do this with)
  2. select the element and right click and select "Copy" (Macs use whatever key binding you use to perform a right click)
  3. open up one of the other pages by expanding the Pages section of the Design pane on the bottom right of the app and double click on a page
  4. find the section you want to replace in Overview pane on the left hand side of the app
  5. right click on that sections parent element and select "Paste Linked"

This will paste in a copied version of the section that is now linked between the 2 pages. On that same page you will need to delete the old HTML section because it does not replace the previous HTML code.

You will need to do this on all the pages until you only have the linked sections on each page. Now when you edit that section each page will have that same edit.

Mac users if you have an app that enhances your clipboard, it may interfere with this process and the "Paste Linked" option may not appear. Disabling that enhancing app is recommended when using the Bootstrap Studio app. If there is an option to not handle clipboard functions with a particular app you may try adding the Bootstrap Studio app to it exemptions.

** To take this a step farther **

Duplicate one of your pages where all structures are the same except the main content and page title would be changed to use as a common template.

  1. right click on one of your pages in the Design pane and select "Duplicate"
  2. right click on the new duplicated file name and select "Rename"
  3. name it something like "common_template"
  4. double click on the file name
  5. remove the page title and main content
  6. add any "Paste Linked" sections you need to it

To use the common template, right click on it and select duplicate and rename the duplicated page to whatever you need then double click it to edit the site.

Doing this would make it easier to retain a common page recreation of your projects continued development and retaining Paste Linked sections through out.

THINGS TO KNOW ABOUT

Deleting a Paste Linked section on a page breaks the linking on that page, undo does not restore the linking, you will need to re-copy that section again from another page that has it linked and use "Paste Linked" again on the page you broke the linking on to restore the linking.

To undo an edit on a linked section, you have to do that on the page you made the edit to. It can not undo an edit from just any page, which is why a universally common template is best to handle that.

Saj

How to set a footer to always be at the bottom of your websites viewport when pages don't have content to fill in the space. Works for pages that exceed viewport as well.

This site is where I got my info from.

http://ryanfait.com/html5-sticky-footer/

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

You place a DIV with the class of "wrapper" around your content and an empty DIV with the class of "push" as the last element in your "wrapper" DIV.

1.< html>
2.    < head>
3.        < link rel="stylesheet" href="layout.css" ... />
4.    < /head>
5.    < body>
6.        < div class="wrapper">
7.            < p>Your website content here.< /p>
8.            < div class="push">< /div>
9.        < /div>
10.        < div class="footer">
11.            < p>Copyright (c) 2008< /p>
12.        < /div>
13.    < /body>
14.< /html>

"No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything."

This is the CSS you would use.

html,body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -[footer height];
    padding-bottom: [footer height];
}
.footer,.push {
    height: [footer height];
}

[footer height] = the actual height of the footer including padding etc...

If you have a footer that changes height on different media then you will need to make appropriate media queries to adjust the "wrapper" and ".footer,.push" rules that use [footer height].

If it's not working out right, its very likely you have an issue with vertical (top & bottom) margins getting in the way. Try using padding instead of margins in areas where the vertical margin of elements touch each other. http://www.w3schools.com/css/css_margin.asp scroll to Margin Collapse to get a better understanding what this means.

Saj

Adding WowSlider gallery to your project:

LARGE NOTE: The gallery does NOT play well with the BSS App itself so it will most likely not display correctly in the app. It doesn't for me, it's all skewed across the page width wise and not adhering to the rules set for it. Use the Preview and Uploaded pages to be sure the gallery is correctly placed how you want it. The gallery does work great, just doesn't display right in the BSS App.

  • Create your gallery as you normally would, export it to a folder on your computer. You will need to then import the following files as such:

  • In your Javascript Design section create a folder called "engine#" replacing the hash tag with the number corresponding to your gallery.

  • Import into that folder your script.js, wowlider.js and (not sure if you need this one, but I did it anyways) the wowslider.mod.js

  • In your images Design section create a folder called "data#" and a folder called "engine#" (once again replacing the hash tag with the corresponding number to your files).

  • In the data# folder create folders called "images" and "tooltips" and then inside those folders import the contents of those folders that you exported from WowSlider.
  • in the engine# folder import the contents of that folder that are images.

I have played with various ways to try to make this work and it seems that the best way to make it work is to use the styles as an imported URL.<br /> - Put them in the directory they will be in normally - Upload them to the location they will be at the end of the website construction - Use the URL's to those files within the Styles Design section. You'll need to use the full URL in order to be able to see it both inside the previews/app and online too. You'll do this for any CSS files within the "engine#" folder.

Now you're ready to add it to your page: - Create a location for it same as you would any other component. - Add a Custom Code box to that location. - Open the Custom Code box to edit the code. - Place the code you were given from the WowSlider into the default divs that are already in there, removing anything else that may already be there such as text.

Now right click over your Javascript Design section title and choose Include Order. - I have worked around this a bit and it seems the best way it works without hindering other things is to be sure that the files for the WowSlider are directly under the bootstrap.min.js file. wowslider.mod.js first and then wowslider.js. All other files should be after those two (so far, I'm not a javascript person "yet!", so it's trial and error for me on this).

Now right click over your Styles Design section title and choose Include Order. - Make sure that the URL's for the WoWSlider CSS are first, first one being the style.css and second being the style.mod.css

Feel free to experiment or comment if you've found better ways for this, but this has worked for me so far.

Hope this helps!

HOW TO ADD NAV SCROLLING using https://blackrockdigital.github.io/startbootstrap-scrolling-nav/.

Working with a clean project.

For CSS code you have to "Import CSS File"

  1. copy https://blackrockdigital.github.io/startbootstrap-scrolling-nav/css/scrolling-nav.css
  2. Design pane - right click Styles select "Import CSS File"
  3. file manager window paste in the URL click OK

For JS code you have to "Import JS File"

  1. copy https://blackrockdigital.github.io/startbootstrap-scrolling-nav/js/jquery.easing.min.js
  2. Design pane - right click Javascript select "Import JS File"
  3. file manager window paste in the URL click OK
  4. copy https://blackrockdigital.github.io/startbootstrap-scrolling-nav/js/scrolling-nav.js
  5. Design pane - right click Javascript select "Import JS File"
  6. file manager window paste in the URL click OK

For the Nav setup.

  1. Overview pane - click BODY
  2. Click HTML pane
  3. Click ATTRIBUTES pane
  4. set ID to "page-top"
  5. click plus icon to add attribute
  6. box1 enter "data-spy"
  7. box2 enter "scroll"
  8. click plus icon to add attribute
  9. box1 enter "data-target"
  10. box2 enter ".navbar-fixed-top"
  11. click APPLY button
  12. Overview pane - click on Navbar
  13. Options pane - for Position select "Fixed to top"
  14. Layout View pane - click on "Brand"
  15. Options pane - in URL enter "page-top" (reads as #page-top)
  16. Layout View pane click on "Brand"
  17. ATTRIBUTES pane - enter class "page-scroll"
  18. HTML pane - click on the div with the class "navbar-header"
  19. ATTRIBUTES pane - enter class "page-scroll"
  20. Layout View pane - click on First Item
  21. change wording to "About"
  22. Options pane - in URL enter "about" (reads as #about)
  23. HTML pane - enter class "page-scroll"
  24. Layout View pane - in the toolbar above click BEFORE for ADD TO NAV
  25. Layout View pane - select and remove the wording for the new nav item.
  26. HTML pane - enter class "page-scroll"
  27. Options pane - in URL enter "page-top" (reads as #page-top)
  28. HTML pane - enter class "page-scroll"
  29. HTML pane - select it's LI element.
  30. Options pane - expand Accessibility checkmark hidden
  31. Layout View pane - click on Second Item
  32. change wording to "Services"
  33. Options pane - in URL enter "services" (reads as #services)
  34. HTML pane - enter class "page-scroll"
  35. Layout View pane - click on Third Item
  36. change wording to "Contact"
  37. Options pane - in URL enter "contact" (reads as #contact)
  38. HTML pane - enter class "page-scroll"

For the Body content setup

  1. drag "section" component onto the Body element in Overview pane
  2. ATTRIBUTES pane - enter ID "intro"
  3. ATTRIBUTES pane - enter class "intro-section"
  4. drag "container" component onto this "section" element in Overview pane
  5. drag "row" component onto this "container" element in Overview pane
  6. drag "column" component onto this "row" element in Overview pane
  7. enter your desired content
  8. drag "button" component onto this "column" element in Overview pane
  9. Layout View pane - change wording on button to "Click Me to Scroll Down!"
  10. Options pane - set Element to "Link"
  11. Options pane - in URL enter "about" (reads as #about)
  12. ATTRIBUTES pane - enter class "page-scroll"
  13. drag "section" component onto the Body element in Overview pane
  14. ATTRIBUTES pane - enter ID "about"
  15. ATTRIBUTES pane - enter class "about-section"
  16. drag "container" component onto this "section" element in Overview pane
  17. drag "row" component onto this "container" element in Overview pane
  18. drag "column" component onto this "row" element in Overview pane
  19. enter your desired content
  20. drag "button" component onto this "column" element in Overview pane
  21. Layout View pane - change wording on button to "Click Me to Scroll Down!"
  22. Options pane - set Element to "Link"
  23. Options pane - in URL enter "services" (reads as #services)
  24. ATTRIBUTES pane - enter class "page-scroll"
  25. drag "section" component onto the Body element in Overview pane
  26. ATTRIBUTES pane - enter ID "services"
  27. ATTRIBUTES pane - enter class "services-section"
  28. drag "container" component onto this "section" element in Overview pane
  29. drag "row" component onto this "container" element in Overview pane
  30. drag "column" component onto this "row" element in Overview pane
  31. enter your desired content
  32. drag "button" component onto this "column" element in Overview pane
  33. Layout View pane - change wording on button to "Click Me to Scroll Down!"
  34. Options pane - set Element to "Link"
  35. Options pane - in URL enter "contact" (reads as #contact)
  36. ATTRIBUTES pane - enter class "page-scroll"
  37. drag "section" component onto the Body element in Overview pane
  38. ATTRIBUTES pane - enter ID "services"
  39. ATTRIBUTES pane - enter class "services-section"
  40. drag "container" component onto this "section" element in Overview pane
  41. drag "row" component onto this "container" element in Overview pane
  42. drag "column" component onto this "row" element in Overview pane
  43. enter your desired content
  44. drag "button" component onto this "column" element in Overview pane
  45. Layout View pane - change wording on button to "Click Me to Scroll Back to Top!"
  46. Options pane - set Element to "Link"
  47. Options pane - in URL enter "page-top" (reads as #page-top)
  48. ATTRIBUTES pane - enter class "page-scroll"

I hope I didn't miss something :) You should be able to adapt this to your project but I recommend following this with a new project so you can make sure it works for you first.

Saj

REORGANIZE YOUR CUSTOM CSS FILES EXTERNALLY

One of the things I've noticed about BSS is that, although it has the ability to reorganize classes in the CSS files, any mass type of organization is almost impossible. But ... Don't sweat it! This is very easily done with just a few minutes of your time (which would be much longer if you tried in the app). The steps are simple and painless and take no more thought than it would have trying to do it in the BSS window. Here's how you can manage this:

1. Export your site to whatever location you would like it to be in to be able to access the files. (Don't overwrite a working copy if you're site is live though so you don't lose anything in any changes you may have made since your last export). Suggestion: I would also do a Save As at this point and alter the name of your project so you can save the current one in case something gets messed up in your organizing or importing.

2. Navigate to that folder and open your custom (or whatever name you gave your personal CSS file, not the Bootstrap files).

3. Open that custom file (I named mine custom.css so as to always know that's what it is) in your favorite text editor. I'm on a Mac so I like using Brackets or Sublime, and in Windows Notepad++ which I miss very much lol.

4. Rearrange your CSS classes and id's etc. to your hearts content, making sure to retain any @media structures and orders. Once you have that all complete and everything is where you want it, open that project in BSS and save your custom css file with a new name like custom-backup.css

5. Now import your custom CSS file and that's it! Your site should automatically use that file as it's main custom file as that should have been retained in the Include Order.

6. If you haven't done this already prior to starting the organization of your CSS file, do a Save As of your project (may want to save it as a new project name).

7. Now delete that renamed backup of your custom css file and make sure everything is working correctly as it should. If not, then check your work see what you may have reorganized incorrectly. You may need to open the old project and compare them to find the issue. This part is up to you however you normally look for issues and bugs in your code.

8. Rinse and Repeat as needed.

This may sound common sensical, but many people don't realize they can export and import their custom css file and that they still work as they should. They don't re-import as custom code like the HTML does so you're free to reorganize it as you need to. Hopefully a future build of BSS will alleviate the need to do this, but this is a simple way to do it until then. Enjoy!

1 Like

EDITING THE DEFAULT BOOTSTRAP CSS CODE

Many of the users have wondered why the default CSS files and JS files of the BSS app are locked, and how to manipulate this to edit the code. It's quite simple really, but not always obvious so here's how to do this.

Use the features of the BSS app which have already been provided to you.

1. Click the element in the HTML window that you want to edit the CSS for. Be sure the main Styles tab is the one that is active in the Styles window. This window will then show you every class that is attached to that element you have selected in the HTML window or the Overview tree.

2. Browse the Styles window to find the class you want to edit (being locked stops you from from editing the default classes). You can tell if it's a Bootstrap default code as it tells you on the right side of each class/id/etc. which css file it's coming from and shows you whether that file is locked or not. Only the Bootstrap default files have be locked as far as I've seen.

3. To the right of each class/id/etc. there is the icon with the 3 vertical dots. Click that and choose either "Copy To" to copy it to another styles sheet, or the more simpler way is to choose duplicate which will make it show up usually above or below the default code. You now have an editable copy of the original default code which will override the default bootstrap code.

Sweet and simple.

ADDING CLASSES TO YOUR CUSTOM CSS FILE FROM EXTERNAL SOURCES

You can add classes that you copy from external sources (or from within BSS too) by using the copy/paste method. Copy the code from your external source in whatever way you prefer. If you're copying CSS from within BSS just drag down the entire code to highlight it (you can do multiple classes/ids) same as you would in any text editor. You must use the Ctrl+C key combo to copy it in BSS. Now:

1. Open your custom css file in BSS and be sure it's the tab that is active.

2. Scroll down the CSS files to the location you'd like to insert your newly copied css code.

3. Mouse over the area between the 2 codes where you want to place your new code and you will see a colored line that spans the width of the Styles box. Click it.

4. When you click that code it is already fully highlighted so just use Ctrl+V to paste your new CSS code in that location.

You should now have all your new code right where you want it.

1 Like

Combining rows within columns to support more than 12 cols within parent row.

1 Like

Video Breakdown of Sections for: "15 Features of Bootstrap Studio" listed in Tutorials

I've broken down the time slots of the Tutorial video named above. This video, although a bit outdated, and missing some of the newer ways to do things, is still a very very useful tool in getting started with Bootstrap Studio, and probably would be the best 10 minutes you've spent searching for info on the app that you'll find. This will not only get you started, but packs a lot of punch in a 10 minute session. Use it!! Please!! :P

  1. Drag & Drop 0:15
  2. Selections & Components Options 1:46
  3. Real Time Preview 2:05
  4. Responsive Tools 2:41
  5. Beautiful HTML 3:20
  6. Built-in Themes (Colors) 3:34
  7. Integrated Icon Fonts 3:42
  8. Multiple Page Designs 3:58
  9. Linked Components 4:34
  10. Custom Components 5:42
  11. Importing Assets 6:48
  12. Writing HTML 7:33
  13. Smart CSS Editing 8:24
  14. JavaScript Editing 9:02
  15. Link External Resources 9:18

Thank you my friends for the reply i receive. But as a new i need some need about question.

1 I have bought since two days Boot Extended 370 HTML5/CSS3 Components. Now i want add to my BSS. I have in package 4 folders. In my IU forder, i have css folder, js folder, img folder, and 370 ul.html files. Can you help me?

2- I love parallax scrolling effect. I try to make it. I set css to background image some properties and i see the background image fixed when i see jumbotron heading text scrolling on the background image. Now my problem is i want the background image scrolling also but with slow speed? Can you help me? Thanks you 3- I want know if I have responsive elements. When to insert theses responsive elements in my BSS project. Can I do it in BSS or after exporting the project. If after exporting the project, how can I intert it there with Notepad 2 for example? Thanks

Don't post your questions and such here, this is not a help place to post in it's for people to share tips and tricks in. Please post your issue in the help thread.

Someone please remove this post and the previous post by psaumes150.. It's not organizable as it is without it getting clogged with questions and answers too :/

Please where can I post my questions to get help? Where is help tread? Thanks

In the main Help and How To forum, get out of Tips and Tricks and post in the main Help & How To forum.

This is a workaround to use any external editor with BSS.

  1. Install node and http-server
  2. Run http-server in the same folder where you have your js files, or one folder up if your js files are in ./public
  3. In BSS refer to you js file using a normal http:/.....js reference
  4. You can now edit your js file using an external editor
  5. When you want to refresh your external referenced js files inthe brower press ctrl - F5 in chrome.

I am using this technique to edit typescript in VSCode, compile it to js files and import it into my web page.

1 Like

I do not now any code lagauge ,still I could use bootstrap studio. Could I make any webstide just drop and drag. pls inform

I do not now any code langauge,still I could use bootstrap studio. Could I make any webstide just drop and drag. pls inform

Music Paradise Pro is an application which lets its users download music for free. We can listen all my new track here. And I never tried it gonna try it Thank you Anita Paul