Can't seem to stack input elements in a column

Can't seem to stack input elements in a column
0.0 0

#1

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>

#2

You need to use the col classes like in the example


#3

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?


#4

If you post a link to your Codepen, we can check to make sure you have the libraries needed to make it work the way you want.


#5

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


#6

I thought you were having trouble with the above code.

The codepen link you added is nothing like the code above or the code you originally posted at the top. Can you please explain in detail exactly what you are expecting to see in your Codepen that is not happening at the moment?


#7

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.


#8

The Codepen does achieve the same thing as the FCC example. You must shrink your browser width down the mobile size to see it.


#9

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.


#10

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.


#11

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


#12

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.


#13

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.