ResposiveNess of div with multiple content - html

Question

I am using Bootstrap 4. My HTML code is like below.
<div class="font-weight-bold col-12">
<span>Filter :</span>
<input type="text" class="form-control" />
</div>
Before decrease the browser size my output is like below
After decrease the browser size my output is like below
How can I keep both elements in the same line after I decrease the browser size?

Answer 1

Try like that:
<div class="font-weight-bold col-lg-12 col-md-12 col-sm-12"> // use fullwidth for large, medium and small devices
<span>Filter :</span>
<input type="text" class="form-control" />
</div>
You can read more about bootstrap grid system here.

Answer 2

You can do a few things here:
1) get rid of the "form-control", add a class of your own and set its width using CSS
HTML
<input type="text" class="my-input" />
CSS
.my-input {
width: 100px; // or the width you desire
}
2) Overwrite the CSS of the element inside the media query.
Somewhere in bootstrap CSS you have a selector (of "form-control") inside a media query which gives the input a smaller width. You can create your own media query and selector and overwrite it.
3) Sort of a combination of both. You can just add a class to the input
<input type="text" class="form-control my-input" />
and then add CSS according to the screen width.
It might not be that elegant - but you can also use !important on the width and then it won't be overwritten when the screen size changes.
Like:
.my-input {
width: 100px !important; //again - not elegant, but will do the work
}

Answer 3

Write the CSS for input as:
input {
width: calc(100% - 55px)
}
HTML
<div class="font-weight-bold">
<span>Filter :</span>
<input type="text" class="form-control" />
</div>
55px is the width allotted for the label. The input will adjust itself as per the screen and the label width without using any bootstrap also.