How to create a plain background?

Bootstrap Studio Help
1

I want to create a plain background element with rounded corners, padded in a bit from the viewport, on which all the other (form) elements will be shown.

I could not find any Bootstrap component to do this, so I used an outer div, with a width and height of 90%, margin 3rem, padding 2rem, and radius 1rem.

This looks very nice, except that the height is not actually displayed as 90%, but just what's needed for the contents. The width also gets too small when the viewport is made narrower, so it seems to be not exactly 90% of the viewport width.

I guess these are very basic CSS "gotchas", and I know there are many of them due to the chaotic nature of CSS's design. Can someone kindly explain why "height" is ignored and what I should do, and how to make the width perfect?

2

Height is "ignored" because you're working in a responsive framework where height changes dynamically to accommodate the contents of the box. 90% just reduces the size, but doesn't remove the responsiveness. If you want a specific height, you have to set it with an absolute size (ex. 500px)

You might also want to look into the CSS rules vw (viewport width) and vh (viewport height) which can be combined with the (calc) rule to achieve a lot of what you might be trying to do.

3

This is a nightmare.

I found this code on the Web for making an Application window div :

position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0;

This works, but I want to make a responsive set of rectangles inside of this, and they all display on top of each other because of the absolute position.

I want two columns. The left column to have three rows, and the right column to have two rows. When the viewport width is too narrow, I want the two columns to be rendered below each other. Seems simple but I'm pulling my hair out.

I can't use table, because I

4

I am not entirely clear on what you're trying to do, but in Bootstrap Studio, this is quite simple. You start with a container. Add a row. Add a column. Add 3 rows into that column. Duplicate the column. Now you should have two columns side-by-side with three rows in each. In your right column, delete one of the rows.

Now go to the options panel, select your first column, expand the Width settings and choose what size you want the column to be below each other (let's say small) and set small to 12, and medium to 6. Do the same for your second column. Now you will have two columns that will stack at XS and SM sizes, and be side-by-side at MD and above.

5

I followed your instructions, then I added text to each row by adding a paragraph component. This seemed to add an extra column to contain the paragraph, making the Overview and html very confusing. I put a unique string into each paragraph so I could see where they were.

Now the only problem left is the second column: I made it have one row as I desire, but instead of the row being the full height of the column, it is the same height as the first row/column cell. I want the second column to span all the rows of the first column, if this is clear. I looked around and could not find an option to do this.

6

Well, actually, there is still another problem, the first one that this post was made about: I want all the rows and columns to be in a separate container with rounded corners and a margin from the body edges. If I simply insert another Container into body, BSS won't let me move the rest of the html inside the new container. However, it did allow me to create a containing div. I was able to style this new div very easily with margin and border.

So it all looks good except for the second column.

7

Usually if you are having issues moving something into a Container, it's because there is another container inside what you are trying to move. With websites, only 1 container per area is allowed, so if you make the entire website area part of a container, then you cannot move containers within it. For this reason many people that are not utlizing sidebars on their sites will put the containers within their content sections so each area has it's own container. This is to get the benefits of the default settings of a container. You can easily put settings on any column to mimic some of the settings of a container as well. Anyways, that's my guess as to why you can't move something inside your container.

8

@David2

Regarding your first post: The "extra" column appeared because rows must contain columns in order to place components in them. This is simply how Bootstrap is semantically designed. You didn't mention WHAT you wanted in the rows, so I only explained how to create the specific thing you requested. Dragging any block level element (image, paragraph, heading, etc) into an empty row will automatically add a column for it to sit in. While it adds to the complexity in the overview, its really not a big deal once you get used to the basic Bootstrap hierarchy. Containers > Rows > Columns > Content. And Columns can contain additional rows with additional columns, so you can create some very sophisticated responsive behaviors, with many nested sets of rows and columns.

Your solution by replacing the parent container with a div was correct for your particular need. If you want to be able to specifically position something, you may not always need or want to start with the container component. That's just the basic way Bootstrap sites are designed.

Regarding your issue with the rows in the second column not taking up the full height, this is easily solved through flexbox settings. Set the parent column to Flex, Direction: Column, Justify Content: Around. Then set each of the rows to Grow: Yes.

I have created a component and shared it online for you to study. Search for David2 Example and you'll find it. I am only keeping it online for 2 days, so download it, study it, and learn it.

You really need to go to the Bootstrap website, or W3C Schools and study Bootstrap and maybe do the tutorial lessons. All your issues are stemming from trying to use a Bootstrap website builder but not understanding how Bootstrap works. This is the last free lesson I am giving. :wink:

9

@Printninja I followed your instructions and the result looks perfect! Unfortunately, I can't simply use BSS to achieve this sort of result by myself because it isn't at all evident which element needs to have its options changed, and exactly in what way. You clearly have a lot of specific knowledge that doesn't come from choosing to use the Bootstrap CSS or from buying BSS, both of which I have done.

Your advice to read tutorials is good. The problem is that I keep going back to reading tutorials and getting discouraged because they are so poorly written. Instead of simply teaching how to do common tasks, they give all sorts of very specific description that has nothing whatsoever to do with common tasks. I haven't yet found documentation for all the components listed in BSS with adequate instructions for using each one. So naturally I go back to experimenting with BSS myself, but I keep reaching dead ends because BSS demands an incredible amount of knowledge which I don't happen to have. My motivation in programming comes not from learning, but working on specific projects (I generally work on a stack of projects 5-10 projects deep, one or two projects at a time).

My current top project (to explain this thread) is designing a configuration generator and editor that generates specific application configuration generators and editors. I can make lots of progress with it until I have to design even a simple layout in HTML.Then the creative process comes to a screeching halt, trying to figure out how Bootstrap or basic CSS works. I've used CSS for about 26 years now, since just before I retired from 40 years of systems software development, and still can't deal with many basic layout situations. I feel sure that most designers and developers must feel the same frustration with the craziness of CSS.

Perhaps I should also explain that I bought BSS mostly to design the HTML and CSS for two websites: my own website, and that of a nonprofit charity that I happen to run. The nonprofit charity has a website that looks so old that Google refuses to advertise it. I really need to learn how to use BSS quickly so I can get that project done.

I do appreciate your teaching, and it's okay if you stop, because someone else is always around to help. And in areas where I understand well, I also help others. That's how we give back, by passing it on.

10

I think doing some CSS tutorials via Udemy might help you with that. I too had a lot of issues learning it at first, but once I caught on to the main structure of it it all fell in place and now it's pretty much ingrained. I'm pretty sure if you can get your head wrapped around that part, the rest of the projects will be much easier. Unfortunately, CSS is really the main backbone of much of the structure of a website so it's really important that you know how it is structured best to get the most out of BSS.

I got a lot of help with this from some Udemy courses which finally got me around those problem spots. Most of building websites is about how things are positioned and styled and you really need to know much of that to use BSS efficiently. Unfortunately for many, people are buying this app assuming it's going to build the website for them and put everything where they want it etc. and it just doesn't so it's frustrating. There's really nothing else I can say on it other than if that's where your problems lie (being CSS) then that's probably why you're having so much difficulty, because it spans a good portion of all aspects of website structure and style.

There are a lot of other good courses out there I'm sure, just that I know that one helped me when I was struggling. :)

11

@David2

Eleven years ago, I had never built a website. I knew nothing about HTML, or CSS or Javascript, or coding, etc. I owned (still own actually) a graphic design company where we created artwork mainly for screen printing and offset printing. Some of my clients would ask me if I did websites and I'd always say, "no, not something I'm really interested in learning." I was more than swamped with artwork, had one full-time artist and one part-timer working for me, and was putting in 60-70 hour weeks as it was.

I have used computers my whole life. I wrote my first programs in BASIC on a TRS-80 at the public library in the early 1980s. We had Decwriters in my high school, and I learned to program on punch cards. I finally got a Commodore VIC-20 around 1982, but it was pretty much a useless toy. I spend hours and hours at the public library using their TRS-80. It wasn't until I got my hands on an Apple II that a friend loaned me that I really started to "learn" computers. By 1987 I had a Commodore Amiga, and that was the computer I started my business with, doing simple desktop publishing jobs, and I really learned everything there was to know about computers with the Amiga, from updating the hardware to writing programs, programming music, using the first basic sound digitizers, hand scanners, hard drives laser and inkjet printers. I bought every computer magazine in existence back in those days, because that was how we taught ourselves.

Commodore ultimately went bankrupt and the Amiga platform died a slow death over about 10 years. Soon there were no companies releasing anything new and I hd to switch. Fast forward to the year 2000 and I was a solid PC/Windows/Adobe user and that's what I used to build my graphic design company. Must have gone through over a dozen machines, not to mention the ones I'd get for my employees, plus the file server, and dozens and dozens of programs had to be learned and mastered to make money. The internet was still brand new. There were no "online training academies" or paid courses. You used forums, email, and Google, and built relationships with other people in your line of work.

About 10 years ago, I went through a major life changes that required a drastic alteration in my business model. I came to realize that NOT knowing how to build websites was a liability I could no longer afford, so I set out to do it. A friend and I created a partnership website company, and we started out using a rudimentary website builder provided by GoDaddy called Website Tonight. It was cloud-based, and infuriating to work with. I understood very little of what I was doing, and my main goal was to just get sites to look like clients wanted them to look, and have the information on them the clients wanted. SEO, styling, CSS, HTML, all this stuff meant nothing to me. But I knew how to use Photoshop, so I could cobble together reasonably decent looking pages. And it went on like this for 2 years.

Finally, we realized we needed a builder that could do more. We needed to not rely on cloud-based software with egregious annual fees for every website. We needed to be able to build more sophisticated sites than what could be done with Website Tonight (which was rapidly growing long in the tooth anyway.) So we did some research and gambled on a new program we found called Website Realizer. This was a hundred times more powerful than what we'd been using, but it was not easy to learn. It had some templates, but the documentation was sketchy, and like Bootstrap Studio, there was no direct access to the HTML, but you could add custom code. What it did allow was free reign over the CSS, so that was what I set out to learn first (which is basically backwards from the way most people are taught website development. Usually you learn HTML first, then CSS.) I did the opposite. Again, the main goal was to build site for clients and give them what they wanted so we could get paid. Whether we were doing things "correctly" wasn't paramount. But the sites were getting built, and the business grew.

The problem with Website Realizer was that it only built static sites, meaning everything was absolutely positioned. This was normal in the early days of web design, but by 2015, responsive design was on fire, and our clients with static sites were clamoring for "mobile websites!" They wanted people to be able to go to their websites on their phones, and we didn't have the tools or skills to provide them with what they wanted. We lost dozens and dozens of clients.

So with our business rapidly dying, in the winter of 2018, I started doing more research to find a program that I could use to build responsive websites. I settled on Pinegrow. Pinegrow, to put it simply, is a BEAR. It's not an easy program to learn. It has horrible documentation, It's UI is not terribly intuitive, and while it's improved a lot over the last two years, it's light years away from being a simple "drag and drop" builder. You really need to know HTML, CSS and ideally one popular framework to do anything productive with the program. But they do have a VERY big following of users, and an excellent support forum. I'd say the average Pinegrow user is considerably more skilled at website development than the average Bootstrap Studio user, and forums are not always kind to newbies who ask lots of newbie questions. In 2018 there were few (if any) courses on Pinegrow, and very few tutorials.

So I went back and started doing more research for alternatives. I found Mobirise, I found Adobe Muse, I found Macaw, I found Wordpress, I found Wix, Weebly, Webflow, Duda, and many others. The market was flooded with responsive builders that all advertised that you could get a "beautiful website up in minutes with just a few simple clicks." When has it EVER been that easy?

I finally came to find Bootstrap Studio. I knew what the Bootstrap framework was from Pinegrow (which supports it natively) and I liked it. It made sense to me. So I tried the online BSS demo and it seemed to be well designed, polished and intuitive. I didn't actually understand how to use the program, but it seemed like something I could teach myself. And the price was certainly right, so I bought it.

As you know BSS's documentation is not the greatest. It took about 3-4 months of reading and re-reading all the tutorials, and following along with their tutorial videos to get a handle on how everything worked, but combined with what I'd learned of CSS over the years, my experience with Bootstrap in Pinegrow, and reading the forums here, I was soon able to build responsive sites pretty quickly, and I was doing stuff that I'd never done before.

But I've never taken a single web design course. Ever. Not for any program. I made (and still make) prodigious use Google, W3C Schools, Stack Overflow and Bootstrap's own website https://getbootstrap.com/ and like you, as the demand arises, I add to my skills to meet the demand. In this way over ten years, I've slowly learned HTML, CSS, and even some Javascript and PHP. I've taught myself SEO very well, how to use FTP software, how to use CPanel and setup DNS and email and dozens of other things, but always as a consequence of a paying project being the impetus. I learn what I need to know so I can do the job and get paid, because this is my only means of income now. I make all my money through website development, so I don't have the option of giving up out of frustration or discouragement. I just have to push until I find the answers. It's how I've lived my entire life.

So if I can do it, you can do it. :wink:

12

How the world turns ;-D

Have a look here for one "expert's" opinion on whether or not people Should (You) Learn Bootstrap in 2020" "Most of us" have heard something like "If you've seen one bootstrap site, you've seen 'em all. They all look so alike" Well, Bootstrap certainly looks like being around for a looooooooooooooong time, with the next version Bootstrap 5, responding to the challenge with the emphasis coming to be on how to customise the framework to get it looking YOUR way, not just THE way, with the emphasis very much being on learning CSS (and SCSS "Sass"), as the essential first step

It will be interesting to see how existing editors respond to the coming challenges.

13

@TeschToy

I've heard that "“If you’ve seen one bootstrap site, you’ve seen ’em all. They all look so alike” many times as well, and I think it's ridiculous. Sure, if you just stick to using stock BS components and never customize the CSS, you're going to see similarities, but that's the case with any framework. It's up to the developer to give their website's a unique look and character, not the framework.

Here are some of the sites I've built with Bootstrap Studio. I don't think any one of them looks particularly "Bootstrap-ish" and I doubt a casual visitor would be able to guess what framework (if any) they were built with.

http://aceofcuts.com/ http://www.protectinteriorservices.com/ http://eliteinsights.com/ http://kajunmartialarts.com/ (this site looks a bit dated because it's almost a straight copy of how their old, non-responsive site looked, only now it's fully responsive.)

14

@Printninja Thank you for sharing your interesting background. We have many points of similarity.

@TeschToy Thank you for sharing your websites. That Kung-Fu site is certainly wonderfully adaptive to the device width and is a great lesson in how to do it.

15

@Jo Thank you for recommending Udemy. I am taking one of the Bootstrap courses; it's not expensive. It will require 11 hours, at least, but I see no other way to gain real expertise. They also have CSS and BSS courses, but I can't do everything at once. Thanks again for your suggestion. Seems better organized than most tutorials and not as overwhelming and partial as the official documentation.

16

You're quite welcome David, also, watch for their sales and many times they run sales on BitsDuJour.com as well which will send you an email with software sales that has sales for Udemy in them periodically. You can usually get lots of courses for like 11.99 through those.

17

there are free HTML/CSS/JS and bootstrap courses at EDX ( https://courses.edx.org/courses/course-v1:Microsoft+DEV203x+2T2017/course/ ) and at Coursera too (https://www.coursera.org/learn/bootstrap-4)

18

Hi David2.

I decided to learn html, css and javascript coming up for 2 years ago in December. The most valuable resource for me was https://www.w3schools.com/ It took me about 4 months before I became competent at hand coding html and writing css but it was well worth the time spent. My javascripts still a bit ropey but I can usually acomplish what I want after a bit of thought.