Arranging column contents neatly on small screens

Although there are similar answers available, I want to address those who are trying to prevent their columns from stacking on XS display.

Despite having two columns, the content is still stacking at certain displays. This issue is occurring while using Bootstrap 4.

320 px (XS) display :

https://i.sstatic.net/zp1gg.png

480 px (XS) display, this view appears to be correct:

https://i.sstatic.net/QmhT5.png

800 px (MD) display :

https://i.sstatic.net/43thq.png

There seems to be an issue with the contents stacking. It's quite perplexing.

Code:

        <div class="row justify-content-between">
          <div class="input-group col-md-4 col-12 text-center">
            <div class="input-group-prepend">
              <button class="btn btn-primary" type="button">
                <!-- Display none in smaller than sm -->
                <span class="d-none d-md-block">Export</span>
                <!-- Display none in md or larger -->
                <i class="material-icons d-md-none">file_download</i>
              </button>
            </div><select class="custom-select text-center" id="export_type">
              <option value="1">
                Kml
              </option>
              <option value="2">
                Csv
              </option>
            </select>
          </div>

          <div class="col-md-8 col-12 text-center">
            <div class="btn btn-outline-primary">
              <i class="material-icons">autorenew</i>
            </div>
             <!-- Bootstrap Multiselect -->
            <select id="hidden_fields" multiple="multiple">
            </select>
          </div>
        </div>

In addition, I am utilizing Bootstrap Multiselect but facing issues aligning it properly with the regular Boostrap custom select. Any suggestions on how to resolve this alignment and add extra vertical space between the columns would be greatly appreciated.

Most of my current layout decisions have been based on trial and error. As a beginner in using Bootstrap, I am open to suggestions on improving the button arrangement for better aesthetics.

Answer №1

To enhance your code structure, I suggest utilizing the input-group in conjunction with Bootstrap's Grid system correctly. It is best practice to wrap the input-group in a col-*-* element instead of combining the two directly.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-md-4 mb-4 md-md-2">
      <div class="input-group">
        <div class="input-group-prepend">
          <button class="btn btn-primary">
            <span class="d-none d-md-block">Exportar</span>
            <span class="material-icons d-block d-md-none">file_download</span>
          </button>
        </div>
      
        <select class="custom-select text-center" id="tipo_exportar">
        <option value="1">Kml</option>
        <option value="2">Csv</option>
        </select>
      </div>
    </div>
  
    <div class="col-12 col-md-8">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="btn btn-outline-primary">
            <span class="material-icons">autorenew</span>
          </div>
        </div>
      
        <select class="custom-select" id="hide_fields" multiple="multiple">
        <option value=""></option>
        </select>
      </div>
    </div> 
  </div>
</div>

Here are some key points regarding the provided code snippet:

(1) For an expanded view, you can refer to the same code on Bootply (https://www.bootply.com/gCYqfuhpIe)

(2) If your CSS includes additional modifications to alter the appearance of Bootstrap, note that this answer showcases Bootstrap 4's default styles. The differences in border radius and handling of a <select> with the multiple attribute might require adjustments if your CSS extensively modifies Bootstrap's styling.

Answer №2

For this particular case

<div class="col-md-8 col-12 text-center">

make sure to include the col-xs-12 class to allow the content to occupy the entire horizontal space. Therefore, it should look like this:

<div class="col-xs-12 col-md-8 col-12 text-center">

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

Creating a multi-tiered cascading menu in a web form: Harnessing the power of

In my form, there is a field called 'Protein Change' that includes a multi-level dropdown. Currently, when a user selects an option from the dropdown (for example, CNV->Deletion), the selection should be shown in the field. However, this funct ...

Incorporating React State into CSS Styles

Currently, I am immersed in a project based on NextJS where I have to utilize React State to determine the width of a div. In the existing setup, this calculation takes place within a .tsx file using constants and is incremented upon clicking a button. The ...

CSS Hyperref and Anchor tags

It appears that when adding an 'href' tag to my anchor, all of the CSS formatting is lost. Is there a special way that CSS treats links? Below is the basic CSS: .topmenu > ul > li > a:visited, .topmenu > ul > li > a:active, .t ...

Modify the CSS formatting of a specific element with its designated ID

On my HTML page, I have an element that looks like this: <label id="lb">Label1</label> In my corresponding CSS file, I have defined the following style for it: #lb{ width:100px; } I want to override this style. What would be the most effect ...

Guide to inserting a custom image into an Icon in next js

For my Next.js 13 and Tailwind project, I am looking to customize a chat/messenger icon by filling it with an image of my choice. While attempting to use the Lucide React Messenger icon, I found that it only allows hex color values for filling, but I want ...

Divs are unable to be positioned at the top of the container

I am struggling with the alignment of blocks inside a container that can be dragged and re-sized within their container. The default position should have 7 divs side-by-side at the top of the container, however, they are appearing stacked on top of each ...

In Chrome, the "div" with the style attribute "resize:both" is unable to shrink, while it functions properly in Firefox

Here's the div code I'm working with: <div style='overflow:hidden;resize:both;border:1px solid orange;'> <div style='background-color:#aaa;width:400px;height:300px;'> </div> </div> You can view i ...

What is the best way to clear and fill a div without causing it to resize?

I am faced with a challenge involving four thumbnail divs labeled .jobs within a #job-wrap container. When a .job is clicked, I want the #job-wrap to fade out, clear its contents, load information from the selected .job, and then fade back in. However, whe ...

Is it possible to utilize the Wicket:id for generating CSS?

Can the wicket:id attribute of an element or component be used for CSS styling instead of the "class" attribute? For example: .tooltipster-arrow span, .column-shifter { display: block; width: 0; height: 0; position: absolute; } Let&apos ...

Element in list does not cover entire ul

I'm having trouble getting my list elements to span the entire width of the unordered list. I've tried applying styles to the nav ul li and setting the width to 100%, but nothing seems to work. How can I achieve this? .nav-container { border- ...

Is there a way to show an element on a website only when the height of the HTML content exceeds the height of the viewport?

My webpage serves as a dynamic to-do list, allowing users to add an endless number of tasks of all types. As the list grows in size, the page height increases and a scrollbar appears. Positioned at the bottom right corner of the page is a fixed button that ...

Issue with margin-top in combination with clear:both does not function as expected

<div style="float: left;">Left</div> <div style="float: right;">Right</div> <div style="clear: both; margin-top: 200px;">Main Data</div> What is causing the margin-top property to not work as expected for 'Main Dat ...

Troubleshooting CSS keyframe animation issues in IE and Edge

I have created an animation that works perfectly in all browsers except for IE and Edge. You can view the page here. .progress-container { position: relative; } .background-progress-bar, .progress-bar { width: 100%; height: 10px; top: 0px; left ...

What is the best way to synchronize the scale of images with the tempo of a song?

I just started learning CSS, JS, and HTML and I have a question about scaling an image based on a song. Despite searching through YouTube and various forums, I still haven't found a solution. Any help would be greatly appreciated :) Here is the HTML ...

Guide to placing an image below a <div> using HTML?

Before diving into the creation of my website, I took the time to draft a wireframe using Balasmiq. You can take a look at the wireframe here. Upon reviewing the wireframe, you'll notice that the first section bears a semblance to this layout: https:/ ...

Implementing CSS in Laravel 8

After placing my CSS file in the public/css folder, I included it in the head section with the following code. <link href="{{ url('/css/app.css') }}" rel="stylesheet"> Unfortunately, the CSS styles are not being applied ...

MaterialUI AppBar is missing a crucial element

I recently dived into the world of Material UI for React and it's been a good experience so far. However, I've noticed a white gap in my header that I can't seem to get rid of. https://i.sstatic.net/zAZJu.png Here is the snippet from my in ...

The image is not appearing on the webpage even though the online URLs are functioning correctly

I am currently facing an issue with my Django portfolio website where I cannot get my photo to display even though the path is correct. However, online images are displaying properly on the site. <html lang="en"><head><link href="https: ...

"the content does not occupy the entire space of the parent

My TableRow expands across the width of the screen, and within it is a ListView with a layout_width set to match_parent. However, the ListView does not expand properly. This issue arose when I added two buttons in the next TableRow. Even after setting the ...

Creating a Delicious Earth Progress Pie

I'm looking to incorporate a unique progress bar design on my website, similar to this one: The progress pie Can anyone guide me on how to create a progress pie with an image inside it that changes color as it moves? ...