I'd like to have a responsive webpage that shows something like:
My favorite ____ is a cat.
"My favorite" is heading, __ is text input field, "is a cat" is a heading.
The whole thing should be aligned centrally, so the space between "favorite", __ (text input), and "cat" should stay fixed.
How could I do that? And How could I especially do that in a way s.t. it looks good on a responsive design.
E.g. if done using 3 columns, on "smartphone mode", the three columns appear underneath of each other. Therefore, aligning "my favorite" right would look like:
My favorite
______
is a cat.
Which is not what I want.
In pure HTML I had used
My favorite <input name="pet" type="text"> is a cat
which did exactly what I had wanted.
How can I get this done in Bootstrap Studio?
(I'm a novice in Bootstrap. I checked the bootstrap studio web demo and it looks fine, but unless I can get my question here solved, I don't want to buy it...)
Would appreciate any help.
(This specific example with the cat input is not the real use-case, of course, but you get the idea.)
I don't know the reason for needing those 2 end pieces to be headings. Sounds like not the correct way to use them, but anyways this is what I did to get you what I think your wanting short of the heading usage. If it must be done that way then it's going to take a little more time. This took me maybe 10-15min to think through it.
I have updated the CSS so as to not remove the border in some places where there is a neighbor element that has a border in order to keep spacing/height etc.. more correct.