Drag Drop and Move

Hi Guys,

I am new to bootstrap studio. Just got the lifetime license less than 24 hours ago and seems to be struggling.

I was hoping to find an editor that would allow me to drag and drop component and allow me to move for alignment without having to write the HTML code padding , align etc by myself. Did I end up buying the wrong product?

I have not been able to move , example I want my button to float right, Move option doesn't work. Button Style class is non editable. Also unable to generate the HTML code something I can take and use in my project, it keeps generating BSDesign doc format. Awake whole night trying to figure a way forward with this tool. Please help.

You don't need to write any HTML to use Bootstrap Studio. It helps a lot if you know how to write CSS styling rules though, and especially if you know the Bootstrap helper classes. You can do a lot of styling just by applying helper classes to components, but you can also use the visual tools to do most styling tasks. You just need to understand how to add the customizations into a separate CSS style sheet, so they aren't all applied as inline styles (which is the default way the program does it.)

I highly recommend you watch the tutorial videos first, and build the site alongside while watching them. Also read all the text tutorials. It sounds like you just started using the program without trying to learn anything about it. Watching and reading the tutorials is mandatory if you're a first-time user. Understanding how CSS works is very helpful, and also understand how CSS flexbox works (because Bootstrap 4 uses flexbox for it's responsive layouts.)

This is is not a simple, drag-and-drop builder like Wix or Weebly. It's a much more powerful and flexible tool, but it also requires some familiarity with how websites work... the underlying concepts of HTML and CSS, and how classes are used to apply CSS styling to HTML.

The program saves your project in a proprietary format called a .bsdesign file. It contains all your site's code and images. To get actual HTML files, CSS files, images, javascript, etc, that you can upload to a web server, you must set up the path for your Export folder, and then click the Export button. Then you will find all your HTML files and a folder called Assets which contains subfolders with all the CSS, images, js, etc.

To align a button, you can do it in a number of ways. You can use the float option. You can set the columns text alignment, and the the button will align as if it were text. You can also make the column a "flex" column using flexbox rules, have total control over how you want to align the columns contents.

In addition to reading all the BSS tutorials and videos, I would recommend reading up on Bootstrap itself on the Bootstrap website, or going to W3Schools and reading their Bootstrap tutorials. When you understand the underlying Bootstrap framework, the program itself makes a lot more sense.

But if all you want is to be able to drag, drop and push simple buttons without doing any reading or having a learning curve, this program may be more than you're ready for. There are online builders like Weebly and Wix that are made for people who have absolutely no understanding of how websites work. You might be better off with one of them (though personally, I'd say tough it out and learn to build your site yourself the right way.)