Responsive alignment of text, button, text

Bootstrap Studio Help
1

Hi there,

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.)

2

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.

The HTML

<form>
    <div class="form-group">
        <div class="input-group unstyle-input-addons">
            <div class="input-group-addon"><span>My Favorite</span></div>
            <input type="text" class="form-control" />
            <div class="input-group-btn">
                <button class="btn btn-default" type="button">is a cat.</button>
            </div>
        </div>
    </div>
</form>

The CSS

.unstyle-input-addons .input-group-addon {
  background-color:#fff;
  border:0;
}

.unstyle-input-addons .form-control {
  border-width:0 0 1px 0;
  box-shadow:none;
}

.unstyle-input-addons .btn {
  background-image:none;
  border:0;
  box-shadow:none;
}

Saj

3

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.

.unstyle-input-addons .input-group-addon {
  background-color:#fff;
  border-color:#fff;
  border-radius:0;
}

.unstyle-input-addons .form-control {
  border-color:#fff #fff #ccc #fff;
  box-shadow:none;
}

.unstyle-input-addons .btn {
  text-shadow:none;
  background-image:none;
  border-color:#fff;
  border-radius:0;
  box-shadow:none;
}

Hope this helps.

Saj