Can't seem to stack input elements in a column

Using Bootstrap 4, I’ve tried many different approaches including wrapping <i> in <div class="column"> and individually <div class="col-xs-6"> but they still appear as a row. I’m doing the same on another area of my HTML and and have four images appearing correctly, stacked two high, two rows.

<div id="contact" class="box clearfix">
  <h1>contact</h1>
  <div class="row center">
    <div class="col-xs-6">
      <i class="fab fa-instagram"></i>      
    </div>
   <div class="col-xs-6">
      <i class="fab fa-instagram"></i>      
   </div>
   <div class="col-xs-6">
      <i class="fab fa-instagram"></i>      
  </div>
 </div>
  <div class="row center">
    <div class="column">
      <i class="fab fa-instagram"></i>         
      <i class="fab fa-instagram"></i>         
      <i class="fab fa-instagram"></i>      
</div>
    
  </div>
</div>

You need to use the col classes like in the example

1 Like

Thanks for your help.

I can still only get rows of icons, even with your code. I occasionally get them to stack, but with a missing </div> oddly enough. I am trying to get the icons in a vertical column, for test purposes, I will replace with <input> after I get it right. I just can’t see what the problem is, unless it’s with my width value somewhere.

Okay, so on FreeCodeCamp editor this code;

  <div class="row">
 <div class="col-xs-6">
    <button>button</button>
    <button>button</button>
    <button>button</button>
</div>
<div class="col-xs-6">
     <button>button</button>
     <button>button</button>
     <button>button</button>
    </div>
  </div>

Makes fcc_columns

But the same code on CodePen creates;
cp_columns

Is this a library problem? Bootstrap?

Thank you. I can’t see a share link, so copied a direct link, I hope this is the right one.

Sorry, I’ve got many tabs open and I’m trying things out on the code at the same time.

I reset the CodePen code to what it is above. It creates two groups of three buttons in a row on CodePen. In the FreeCodeCamp exercise here it is the same code except two columns of three buttons.

Edited to say I want to achieve the FCC example in my CodePen code.

Ahhh, I see. So if I want to get stacked items in a column I would need to restrict the width of the parent element?

Thank you for your help.

If you want the buttons to stack regardless of the device width, you will need to change the default value of the display property of the button element from inline-block to block.

1 Like

That’s brilliant, thanks for bearing with me :slight_smile:

First I understood that on desktops you want then inline and on mobile you want them stacked. My example was for that. I have changed it to be stacked on mobile and desktops as well using bs4 and no bs4.

1 Like

That looks interesting. flex class seems to be easier to implement, more efficient (less lines of code)? I’ll be playing around with it, thanks again.