In my bootstrap-4 layout, I have a 3 column grid where I want the middle column to be wider. However, adjusting the classes doesn't render the content correctly in the central column and makes the inner container thin. Even when I specify a width using class="col-8", the container and input don't inherit it as expected.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col">
<br /><br>
<h2>
<p style="text-align: left;">title</p>
</h2>
<br><br>
<h6 class="font-italic">
<span style="padding-left: 15px;">
<a href="{{ summary['url'] }}" target="_blank" rel="noopener noreferrer" class="slink">summary </a>
</span>
</h6>
<pre><p id="doc_summary"></p></pre>
<span><a id="more|less" onclick="toggleText();" href="javascript:void(0);"></a></span>
</div>
<div class="col-8">
<div style="text-align: center;">
<div style="display: inline-block; text-align: justify;">
<div class="container-fluid border pt-3 full-page justify-content-center" id="con-result">
<pre><div id="result"></div></pre>
</div>
<br>
<div>
<input class="col-md-9" id="input_text" name="input_text" placeholder="Enter a prompt here">
<br>
</div>
<br><br><br>
</div>
</div>
</div>
<div class="col">
some text
</div>
</div>
</div>
CSS:
.full-page {
height: 58vh;
overflow-y: scroll;
border-radius: 20px;
}
Any suggestions on how to fix this issue would be greatly appreciated! Thank you!
Check out the live demo here