What could be the reason for the d-flex class in bootstraps preventing my div from expanding to 100% width?

I have a div where I need to display two elements next to each other: a search input field and the corresponding submit button.

My attempt so far was to achieve this using the following code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">

<div class="container w-100 mt-4 border-bottom pb-3 h-25 align-content-center" style="box-sizing: border-box;">
<div class="row">
<div class="col-1 position-relative d-flex align-items-center"><span class="mh-100" style="line-height: 1rem">Class20</span>
</div>
<div class="col-7 mw-100 align-items-center position-relative d-flex">
<form action="" class="justify-content-center position-relative m-0">
<input type="search" name="" value="" placeholder="search" class="w-100 align-items-center pl-3" id="search">
</form>
<button class="btn-outline-primary"type="submit">Search</button>
</div> <!--column 7-->
<div class="col-4">
<button class="btn-outline-primary"type="submit">Log In</button>
<button class="btn-outline-primary"type="submit">Sell your stuff</button>
</div> <!-- col-4 -->
</div> <!--row-->
</div>

The use of "d-flex" achieved the desired layout with the search box and button aligned horizontally. However, it created extra white space between this section and the next due to not stretching across all 7 columns as intended. How can I fix this without affecting the placement of the button?

htmlcssflexboxbootstrap-4

Answer №1

It appears that the width of your col-7, which contains the input and button, is correct. However, the issue lies in the fact that the input and button do not span the entire width of their parent container (the col-7).

To resolve this, you have a few options. One approach is to add specific bootstrap classes to the input (such as col-8) and the button (like col-4). This will ensure that they occupy the entire width of the parent.

Alternatively, you can directly style them using CSS by defining custom widths in percentages or utilize other bootstrap classes like col-9, col-3, etc.

Another option is to add the following CSS:

.d-flex form{
  flex-grow: 1
}

This CSS rule will make the input expand and occupy all available space within the col-7 parent.

You can view an example implementation in the snippet below (using col-8 and col-4) or check out this JSFiddle link for reference.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container w-100 mt-4 border-bottom pb-3 h-25 align-content-center" style="box-sizing: border-box;">
  <div class="row">
    <div class="col-1 position-relative d-flex align-items-center"><span class="mh-100" style="line-height: 1rem">Class20</span>
    </div>
    <div class="col-7 mw-100 align-items-center position-relative d-flex">
      <form action="" class="justify-content-center position-relative m-0 col-8">
        <input type="search" name="" value="" placeholder="search" class="w-100 align-items-center pl-3 " id="search">
      </form>
      <button class="btn-outline-primary col-4" type="submit">Search</button>
    </div>
    <!--column 7-->
    <div class="col-4">
      <button class="btn-outline-primary" type="submit">Log In</button>
      <button class="btn-outline-primary" type="submit">Sell your stuff</button>
    </div>
    <!-- col-4 -->
  </div>
  <!--row-->
</div>

The Bootstrap framework divides the total width into 12 columns. To ensure two elements sitting side by side cover the full width, the sum of their column numbers should equal 12 (for example: col-8 and col-4, col-6 col-6, col-9 col-3, etc.).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to embed an image into HTML code?

I am trying to enhance the appearance of a phone number inside an HTML code that is loaded into a UIWebView by adding a background image. NSString *stringToReplace = [NSString stringWithFormat:@"<a style=\"color:white; background-color:#707070; te ...

iphonehtmlcssiosuiwebview

Automate populating input fields with data

I need help with a form that has four input boxes. Is it possible to automatically fill the remaining three input boxes with the value entered in the first box when the user clicks a button using JavaScript? Or should I aim to prefill the textboxes with ...

javascripthtml

Inject environment variable into SCSS file while using webpack

I'm new to webpack and I need help with reading a specific value, which is the env variable from the webpack.config.js file, in a sass file. This will allow me to have different CSS styles based on the environment. For example: If the env is set to ...

javascriptcsswebpacksass

CSS: A guide to correctly setting an image URL for a checked checkbox

In my current situation, I have a list of checkboxes with corresponding images. When a checkbox is checked, I would like to add a black circle behind the image. Here is an example of the current output: https://i.sstatic.net/Pq4vP.png This is what I exp ...

htmlcssreactjscheckbox

Is there a way to delete content in HTML after a particular text using Python and BeautifulSoup4?

I am currently in the process of scraping information from Wikipedia. My goal is to extract only the necessary data and filter out any irrelevant content such as See also, References, etc. <h2> <span class="mw-headline" id="See ...

pythonhtmlpython-3.xweb-scrapingbeautifulsoup

Styling text on a HTML webpage

Is there a way to center text in the caption and add a link on the far-right of the caption? Let me know if this is possible. The format for the caption should be: Centered Text Right-justified link ...

htmlcss

Tips for managing the width of tr:nth-child(odd)

I am in search of a way to style my datasheets using tr:nth-child(odd). Below is the code snippet I am currently using: My main concern lies in adjusting the width. I aim for it to occupy a space that measures 200px by 400px The depth does not pose an is ...

htmlcss

Terminal throws an error stating that no default engine was specified and no extension was provided

I have been working on executing a backend program in Node.js using MongoDB. I have created a form with two input fields for password and name. I am not utilizing any HBS or EJS and my VS Code terminal is displaying the following error: No default engine ...

javascripthtmlcssnode.jsmongodb

Shopping cart feature in PHP - Ajax response only functioning once

I'm in the process of developing a shopping cart. I start by adding products to the cart, then use Ajax to dynamically update the quantity when it changes. Everything works smoothly after the first change, but subsequent quantity updates do not refres ...

javascriptphpjqueryhtmlajax

Align columns to the right and left using Bootstrap

It should be simple enough, but I can't seem to find my mistake. Goal: The entire markup should be centered with a width of col-10. Within the same 10-column width, there should be two divs each taking up 50% of the space. Using Bootstrap 5, for so ...

htmlcsstwitter-bootstrapbootstrap-5

Incorporating PHP script within a stylesheet

Is it possible to include php code within a css file for adding conditions to css properties? styles.css <?php if($suserid == 2) { ?> .proverb { border:0px solid blue; margin-left:34px; width:250px !important; margin-top:6px; } <?php } e ...

phpcss

Can the Caption Adapt to the Image?

Code snippet: <script type="text/javascript> function displayNextImage() { x = (x === images.length - 1) ? 0 : x + 1; document.getElementById("img").src = images[x]; } function displayPreviousImage() { x = ...

javascriptjqueryhtmlcssimage

How can I extract the "href" attribute from an anchor tag using XPath?

I am working with HTML code that looks like this: <a href="/images/big_1.jpg" class="class-a"> <img class="class-img" src="/images/small_1.jpg"/> <span class="class-span"> <img src="/images/img_1.png"> </ ...

htmlparsingxpath

Display the GIF when the mouse hovers over it, but ensure it plays just a single time

Is it possible to make a GIF only play once when you hover over it on a website? I want to avoid the animation repeating if the user hovers over it again without refreshing the page. Currently, I have a static image that changes to a gif on mouseover, but ...

htmlcss

Can you explain the contrast between "#msg" and "#msg div" when used in a style tag?

<html> <head> <style> #msg { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align:center; ...

htmlcss

changing the gradient color stops of an SVG on hover

Here's a CodePen I've been working on: https://codepen.io/naregjan/pen/MBzQWp Within this CodePen, I have an SVG container with four rectangles, two of which have gradients applied. My goal is to create a hover effect that transitions the gradie ...

htmlcsssvg

Why doesn't the div click event trigger when the mouse hovers over an iframe?

My dilemma involves a div element with a click event. When the div is positioned over an iframe area (closer to the user than the iframe), the click event fails to trigger. However, if the div is located elsewhere and not above the iframe, the click event ...

javascriptjqueryhtmlcssiframe

Issue with internal URI directory structure affecting SEO mod_rewrite

I recently implemented a mod_rewrite rule on my website that transforms example.com/en/about/topic into example.com/en/view.php?p=pages/about/topic.php The specific rule I used is: RewriteRule ^en/([a-zA-Z0-9/]+)$ en/view.php?p=pages/$1.php In view.p ...

htmlregex.htaccessmod-rewriteseo

Can someone please clarify how the nth-of-type selector functions?

I can't understand why the nth-of-type selector needs to be set to 2 instead of 1 for the first sibling of this type in the code. To see the code in action, check out this jsfiddle: https://jsfiddle.net/xj5hvn16/ If anyone could kindly provide an ex ...

htmlcsscss-selectors

The compatibility of IE9 with tables and the use of display: block

When optimizing my site for low-width mobile devices, I adjust the display property of various table elements such as tr, td, and th to block in order to stack them vertically. This technique helps wide tables to show all their content without overflowing ...

htmlcssresponsive-designinternet-explorer-9internet-explorer-10