Hey there! I am really trying to love this tool, available on linux, sleek design. However, i've gotten around the fact that I cant edit .php files and reconfigured my server to view php in html files, which I would edit in, in atom after i've finished a design for a page.
One thing that is grinding my gears is being unable to have full control over CSS and HTML tags!!!!!!!!!!!!! A few fixes to my problem would have been fixed by now, but unfortunately we are locked into ONLY using the design elements in the app.
How, using the app, do i make a BODY BACKGROUND IMAGE (im stressing this, because no other information i found online is helpful, and is only talking about responsive IMG tags, and not a responsive background image style) how to i make a background image responsive. The image looks responsive in the preview, but i learned my mistake the first time after building my website perfectly in the preview and then going to the actual page and seeing something wildly broken and different, and to use the live preview.
The in app preview shows the image doing what i want. Covering the screen on multiple devices. all my other elements work in the online preview, and when i push my changes to my server. HOWEVER, the background image does NOT cover the screen on mobile, and if i select my rotated 9:16 image for mobile, the image is VERY zoomed in on desktop.
has anyone figured out workarounds? any extensions or plugins to make my job easier with php aswell? can i use an external editor for my CSS files??
it's easier to help if you publish your design. And even easier if you also post your .bssdesign file.
I don't get if you can make it in HTML/CSS using atom and you don't know how to do that with BSS or you just don't know HTML and can't follow one of the many online tutorials.
Perhaps you have the same problem I did at the beginning of using Bootstrapstudio
The tool uses custom resolution to preview the website, when in edit mode. It is not obvious and you have to check the icons on the top, there is a drop down and you can select FHD, but then it is not really what you want. You want responsive design and adjusting your page for one resolution will not get it.
The tool uses Bootstrap themes and is essentially HTML/CSS builder, nothing more.
The tool does no modifications to help you have responsive images, even the switch "responsive image" just adds standard HTML5 code, there is no logic based on your image size, if that's what you were expecting.
Solution
Change the resolution of your image
Avoid using the complete width of the screen, use borders and margins, which is definitely not a solution, but a workaround.
I can understand your frustration, I myself thought Bootstrapstudio helps making a responsive website, but that task is still 99% you. Because Bootstrapstudio is not a tool to help you build websites, Bootstrapstudio is just a tool to use bootstrap & HTML5.
Here is the quote from the main page: "A powerful desktop app for creating responsive websites using the Bootstrap framework." - Definitely leaves the impression it helps you build responsive website, but is not the case. Take the app as an advanced HTML editor. Because honestly that's all it is. Notice maccro respnose, "don't you know BSS HTML CSS", it is expected you to have the knowledge and use the tool as editor is what I gather.
ps: I myself am struggling of figuring out how to have the same navbar across webpages without hardcoding to the page for shared resource. Just posted my question. Something that should be a standard feature for a website builder, but yet again it is more of a HTML IDE/editor than a website builder.
I can understand your frustration, I myself thought Bootstrapstudio helps making a responsive website, but that task is still 99% you. Because Bootstrapstudio is not a tool to help you build websites, Bootstrapstudio is just a tool to use bootstrap & HTML5.
This is a completely misleading opinion. For one, you do not ever have to type a single line of code to build a website with Bootstrap Studio. You can build a totally responsive site using a template, or the drag-n-drop components, and edit them all through the user interface. This is really no different than any of the other drag-n-drop builders on the market... Wix, Weebly, Mobirise, etc. But your site will be somewhat limited, and probably look very "Bootstrappy."
But where those programs are limited in terms of how much you can customize their sites, Bootstrap Studio ALSO allows you to write custom CSS, apply any Bootstrap class you want to any component, add attributes, write custom javascript, use outside CDNs and add custom HTML blocks. It is the best of both worlds, but in order to use these extra features, you DO need to have an understanding of how the underlying HTML markup and CSS works.
So while a total beginner can build a site with BSS, it is generally geared more towards people who have experience working with Bootstrap, hand-coding, and are looking for a tool that can automate many of the time-consuming tasks, while also showing your work and changes in real-time.
Admittedly, the one place were BSS is lacking is in the documentation. A more thorough user guide would make this program a lot more friendly to novices. That's why they have this user forum, and the community is generally very good when it comes to helping beginners through obstacles.
I am with you on this... 99% you is just wrong total misinformation = 100% wrong. Surely websites hopefully have different content and images, etc. But that's quite obvious.
So, people generally use something if it's to their advantage, and what helps more -- they use more. So, I'll just let BSS speak for itself:
How Popular is Bootstrap in 2018?
Overall, BuiltWith shows around 18 million websites using Bootstrap. If you believe BuiltWith's numbers, Bootstrap is still growing, although not as quickly as in previous years. BuiltWith gives Bootstrap a 72% share of the framework market. Wappalyzer shows Bootstrap with a 52% share amongst web frameworks.
I would have to agree with the others here, no where on the website for BSS does it state you do not have to have any experience with web design in fact to quote their own website: "For some things drag and drop isn't enough. This is why Bootstrap Studio gives you full control over your markup when you need it. You can import and edit CSS, SASS, JavaScript and HTML in our Sublime Text-like editor."
People that buy this app expecting everything to be done for them directly without having to have any knowledge are misled by their own accord. The website does not mislead you in letting you think this is like Wix or any of the other drag and drop a trash site together places.
Having said that, only because I'm really sick of seeing people bashing this app because they don't have the knowledge to build a website to start with .... Background images have specific settings that allow you to fill areas in specific ways. The best thing to do is try those settings which are:
Each of the settings above for the background size will make your background behave in different ways. Find the one that fits your site best and work with it.
Another little trick to backgrounds so that they don't skew is to set them to be "fixed" so they don't scroll.
Also don't forget that if you have a background image you should be sure to remove it on mobile size so it's not extra downloading for your users.
For more information on how to set up backgrounds via your CSS you can go here and check out all the links in the left menu for Backgrounds and images too if that will help some: https://www.w3schools.com/cssref/css3_pr_background.asp
Well, this answer is quite rude, but i've done this before and easily without BSS. If anything BSS has partially made my workflow a bit tougher, because i'm running into snags that doing by hand are easier, however, I cannot upload my "by hand" changes to BSS otherwise I lose control of the whole page, and BSS gets mad at me by putting the whole thing in a "custom code" block
My problem lies within the app, and when I upload my own custom CSS, i have incredible pain editing it in the app.
When I upload my own HTML page, i have even more of an incredible pain editing it in the app.
I thought using BSS could help me design a page easier, not disrupt my workflow with the app. So far my best use for this is finding layouts, then editing my website by hand with this as a template.
The way this app restricts only editing html to attributes is frustrating at best.
I thought I would get answers with links to tutorials on how to use bootstrap studio, not answers treating me like a child. I was unable to figure out how to do this in the app, and already had it working before i decided to use this app.
Thank you all who actually did answer my question! I've learned that customization outside of templates is rough at best on this (Printninja)
And thank you for answering my question about in-app resolution (Dimi)
So, thanks for nothing Jo, your answer was quite rude and didnt solve anything other than tell me simple CSS that I already know. I have a lifetime license to this app that I will not be throwing away because I believe they can fix it and make better documentation.
I wish BSS had better documentation, and I wish BSS allowed us full control over the html and css editors in the app interface.