BStudio not helping to overlay text

BStudio seems to have no features to move one component on top of another, to overlay text over HTML5 video, as is done on many websites.

I'm trying manually as follows:

Container (position:relative) <- this is the parent video (position:relative; top: 0;) Heading (align-self: center; text-align: center; position: absolute; top: 0)

This displays the video correctly in the center. But the Heading text is at the top left and is not wrapped inside the container.

Changing Heading position to relative displays the text centered under the video, which makes sense.

How do I fix this? Is it really true that there is no Bootstrap component to display overlaid text? Will there be one in the next version?

Is there something like jsfiddle or codepen that I can use for publishing Bootstrap problems like this?

Once again we need to refer you to the Bootstrap and HTML/CSS tutorials as this builder is not your typical newbie builder that would do that. This builder does rely on you having some experience with Bootstrap, HTML, CSS and overall site structuring. You'll need to do those adjustments to allow for overlapping by manipulating various settings for margin and paddings etc. You really should stop and take some time to go over that information and learn how to do the main Bootstrap setups, use Flexbox for positioning and such. There's a lot of versatility in using Bootstrap and this app, but it's not done for you so you need to be sure how to do these things.

The main thing to know here though is that BSS will "help" you build faster, but does not do "all" of the work for you and what you're asking about is part of it. You also really need to work with the CSS so that you don't put all your code inline as it shows in your post. If that's not something you want to do, you will need to work with some of the less professional builders like Wix, Weebly, etc. as they are true drag and drop and will build the site for you. You'll have lots of limitations as to what you can use, but most everything is drag and drop type setups that you are looking for here. This may be a drag and drop builder, but it's not 100% drag and drop, much of it needs to be done with CSS to accomplish the various effects we need.

You heading element needs to have a size to cover the space of the video. You can also try settings top,right,bottom,left all to 0 as well, that will fill the space. Then set it to flexbox. Then add classes justify-content-center and align-items-center. That should do it.


Post a link to your website or project so we can look at what you've done, or are trying to do, and it might be easier for us to give you a simple solution. Any problem can be solved if you know how to code. Putting text over a video is not difficult. A video is just an element inside a div. You can use positioning and z-index to stack text above images or videos fairly easily. Post your site and I'll give you a solution.

I have succeeded in solving this problem. Unfortunately, 4 or 5 more problems remain... BStudio certainly does many things, but I have to resort to DIVs and css to do relatively simple things like centering a DIV inside another DIV.

Here are the solutions for centering, if anyone needs them (they are not obvious):

center an object:
    width: 700px ;
    margin-left: auto ;
    margin-right: auto ;

position an object in the middle:

And nothing I try makes blocks space out evenly to fill the horizontal space, spilling over to subsequent flex rows as the viewing port gets narrower.

David, with all due respect, you are struggling to solve problems for which the solutions have existed for years. Not only are the solutions obvious, but some have been around for decades.

Building a website in Bootstrap requires one to understand Flexbox. Building a website in general requires one to understand many work-arounds and techniques that are "industry standard." margin: 0 auto is one of the oldest methods of position a fixed width object in a div. It's one of the first things most people learn when they learn the website "box model," just as top: 50%; transform: translateY(-50%); was a common way to center objects vertically before frameworks like Bootstrap and CSS Flexbox came along.

I feel that you would benefit greatly from spending some time doing all of the following: Watch all the BSS Tutorial videos (follow along and build the sites with the videos in real-time) Read all the BSS Tutorial texts Read the Bootstrap documentation here: Spend some time exploring the examples here:

Thank you so much for taking the time to advise me, and thanks to the others here too. I have been working with the three Web languages since 1994, when I founded my little company, and I must admit that CSS gives me the most trouble, HTML next, and JS the least trouble. CSS is one of the most peculiar of languages, not because of its syntax, which is very simple, but because of its very complex and context-sensitive semantics. When experimenting fails, which often happens, I rely on Web searches, which frequently give me solutions right away. Unfortunately, my memory is not very good, so I do notice that I sometimes search for the same solution again and again. I don't get this frustrated using JavaScript or PHP to do very complex things, because these languages make sense and perform in expected and predictable ways.

I also have spent much time thinking about software tools that might help with special-case solutions. For example, a tool like BStudio (or Weebly) could provide a simple checkbox to control whether an element is centered, horizontally or vertically (not just whether text is centered). This would help people with poor memories, like myself. I am thinking about creating such a tool myself, and a requirement would be that the user could extend it easily, either visually or using JSON, to incorporate many of the CSS context-sensitive "tricks" that are so necessary to create simple, functional, and good-looking websites.

You are quite correct in pointing me to tutorials and other learning materials. I love to use tools, though, so I do try to use BStudio when I haven't really learned it (or Bootstrap) thoroughly. I apologize for this.

Bootstrap is great for generating a consistent and modern design, but by itself it doesn't make constructing a website as easy as constructing a computer program, even with the aid of BStudio. I feel sure that other users must encounter situations as I have when using BStudio, that produce an hour or more of frustration each, just trying to get some simple layout to work, especially if we try to use a Bootstrap component in a way that it was not designed for.

Most of the tutorials can be found right inside of BSS as well now since a few updates ago. When you first open the program where it shows you your projects, look to the top and you will see the greyed out Tutorials tab. It's hard to see that those are actually tabs, but everything in the tutorials of the site seems to be in the app now so check that out if that helps.

As for the centering etc. Once you get used to the app you will realize you were struggling because you were doing things the wrong way. When you try to adjust things spatially, you can do so by setting up the container/row/col they are in rather than the components. If you have text inside a col you can set the col to text-center via the Options pane and setting the Alignment to center or whatever way you want it to be, or by typing text-center in the Class names of the HTML window. Both do the same thing. Many other settings for specific spacing can be done the same way as well as many other types of styling. We are very used to setting things on the component itself like the text, that this new way of doing this does take some getting used to indeed.

Do the tutorials as suggested by others, you'll find some things are a bit outdated as to how the app is now, but the basics are pretty close and should help a lot I think.

Jo, I think you may be incorrect about using BStudio to set centering (horizontal and vertical). As I said, I'm not trying to center text (that has always been easy), but to center a div containing both a video and an overlaid text. I don't think that Bootstrap provides a component that does this, so BStudio can't do it.

Yes, it does provide it and that's why you need to learn how to use the app and the code styles (Bootstrap, CSS) used within it Flexbox is used to do most positioning within BSS and done by BSS if you set it up correctly, you need to learn about Bootstrap and Flexbox in order to know how to handle these settings.

Same thing applies as what I said above. You apply the settings to the container your Div is in, not the div with your content in it.

I have to agree with Jo. It's simply a matter of understanding the underlying technology (like Flexbox) and then how to implement it through BSS. Of the two, the latter can sometimes be the more frustrating, because while there are tons of online websites for learning Flexbox, most BSS questions end up getting answered here in the forums by more experienced users. There is a BSS Facebook group that is absolutely useless. You might find an occasional Q/A on Quora, but they're few and far between. Basically, all the program support for BSS comes from this forum, and about a dozen dedicated users.

@David2 Another simple centering trick. If you drop an image into a column, it will be left justified. If you set the text alignment to center, it will also center the image. The text component and image component are treated the same way, as inline-block elements. You add a div, create a class as follows:

.mydiv { display: inline-block; width: 100px; height: 100px; background-color: red; } Assign it to the div and it will be centered. But this is the old way of doing things.

With Flexbox you no longer need to do this. Working at mobile viewport size (since Bootstrap is a mobile-first framework,) delete the display: inline-block; on the mydiv class. Then go to flexbox section of the Options panel, select the parent column and simply click on the "center" icon. This will assign the classes to the column d-flex class, and the justify-content-center and your box is centered.

If you want to start stacking elements, (like text on top of your box) then you have to start using CSS position values, z-index, OR switch to CSS grid, which has provisions for stuff like this.

HTML and CSS are not true programming languages, which may be why, as a programmer, you're struggling with them. HTML is a markup language, and CSS is a styling language. HTML is fairly straightforward, and doesn't take much to understand. CSS can become very complex, especially with how the cascade works, and the many different things that have been added on to it over the years. When it first started it was pretty simple. Make text red.... make a background yellow, or give it an image. Now you can do animations, and complex responsive layouts, there a pseudo-classes and I've seen some truly amazing effects done with pure CSS that could have only been done with javascript (or Flash) years ago. I'm competent with CSS, but certainly no expert, and I often have to refer to WC3 for reference to the usage of things I don't use often, and I would be lost without Stack Overflow for more complex things.

Stick with it. You'll eventually get it figured out, and soon find that BSS is a major boon to you website development.

Thank you, this was very useful and supportive!

.parent {
  display: grid;
  place-items: center;

as per

there are lots of different ways to achieve that result. But you have to know Bootstrap, CSS and HTML. BSS is just a tool to speedup frontside development. It does NOT substitute robust web building techniques knowledge

And with Flexbox already built into BSS, that is your go to setup for positioning pretty much anything uniform. Obviously just pushing something over a bit one way or the other will need custom CSS setups, but centering, spacing out multiple columns/components, etc can all be done using Flexbox. There are quite a few tutorials out there for that as well, just Google Flexbox Tutorial and you'll find plenty of them to get you started, same with Bootstrap and CSS (I mention CSS only because you state it's not a strong point for your designing, and unfortunately, most all styling is done using CSS so it is a good idea to get a good handle on it. Once you do, as a programmer, you're going to hit your forehead and go "Duh" why didn't I see that sooner?! lol :P