CODEWITHSUNDEEP
htmlcss
Venice Christopher
Venice Christopher

Reputation: 9

How do i arrange 20 buttons in a format of 5 rows and 4 columns in HTML with a decent amount of space between the columns?

I have created a webpage which has 20 buttons in a random row format. I want to make in a format of columns with a decent amount of space such as one column in the left the other in the center and respectively. Kindly help me with this.

Upvotes: 0

Views: 1877

Answers (1)

Asifuzzaman
Asifuzzaman

Reputation: 1783

If I understand your question clearly, I hope you are looking something like This below fiddle. If you want it using html then see this Fiddle with HTML: 

#outer {
  width: 100%;
  text-align: center;
}
.inner {
  display: inline-block;
}
#outer2 {
  width: 100%;
  text-align: center;
  padding-top: 4px;
}
#outer2 .inner {
  display: inline-block;
}
#outer3 {
  width: 100%;
  text-align: center;
  padding-top: 4px;
}
#outer3 .inner {
  display: inline-block;
}
#outer4 {
  width: 100%;
  text-align: center;
  padding-top: 4px;
}
#outer4 .inner {
  display: inline-block;
}
#btndiv {
  margin: 100px 100px 100px 100px;
}
<div id="btndiv">
  <div id="outer">
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn2" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button class="msgBtnBack">button</button>
    </div>
  </div>

  <div id="outer2">
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn2" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button class="msgBtnBack">button</button>
    </div>
  </div>


  <div id="outer3">
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn2" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button class="msgBtnBack">button</button>
    </div>
  </div>

  <div id="outer4">
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button type="submit" class="msgBtn2" onClick="return false;">button</button>
    </div>
    <div class="inner">
      <button class="msgBtnBack">button</button>
    </div>
  </div>
</div>

You can also use bootstrap buttons same like this your question was about to create this by using html so I did this with html.You can add customize design as your desire.

Hope it will help you.

For extra padding:

#outer2 .inner {
    padding: 2px; 
}

Can add padding-top, padding-right, etc I just add the padding for all. Thats it.

Upvotes: 1

Related Questions