I am currently exploring the implementation of Bootstrap 4. I have a basic div that includes a text box, and my goal is for the text box to occupy the full width of the div. Initially, I assumed that in Bootstrap, input elements automatically inherit the full width property.
However, what perplexes me is that when I ran the code using the provided snippet, it worked perfectly fine. Here is the snippet:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md" style="background-color: blue;">
<!-- this is the left side -->
<input type="text" class="form-control" placeholder="Email address">
</div>
<div class="col-md" style="background-color: red;">
<!-- this is the right side -->
</div>
</div>
</div>The above code mirrors my own implementation. However, I am uncertain if this is the correct approach.
It's worth noting that I am incorporating this code within a view (MVC project).
Here is how it appears in Visual Studio:
Layout:
<div class="container">
<div class="row">
<div class="col-md">
@RenderBody()
</div>
<div class="col-md d-none d-md-block">
<!------>
</div>
</div>
<footer>
<p>© @DateTime.Now.Year - My Project</p>
</footer>
</div>
And here is the view content:
<input type="text" class="form-control" placeholder="Email address">
When rendered, the view displays as shown below (please note that additional CSS styling like background color is applied which is not included here): https://i.sstatic.net/ChdLu.png