How to align buttons across rows in a div using css

Reply

Member

4 Points

How to align buttons across rows in a div using css

Sep 27, 2016 02:23 PM|baldwinjohn|LINK

I am attempting to display buttons inside a div panel across and down but can't seem to get it to work. They go down the page instead of across. What am I doing wrong?

Here is the code I am using:

<style>

  .col-sm-8 {
    width: 66.66666666666666%;
  }

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
}

.panel-body {
  padding: 15px;
    width: 221px;
    margin-bottom: 0px;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.rows .btn {
    margin-left:15px;
  }


.bg-color-aliceblue {
        background-color: aliceblue;
}

.panel-green {
    background-color: #1cca48;
}

.height1 {
    height: 390px;
}

  .btn-activity  {
  background: #082e75;
  border-radius: 10px;
  color: #ffffff;
  font-size: 13px;
  font-weight:bold;
  width: 210px;
  height: 50px;
   white-space:normal;
   display:table;
  
}

div.opacity1 {
    opacity: 0.8;
}


</style>

<div class ="row" >
  <div class="col-sm-8" STYLE=";top:200px;left:485px;">
      <div class="opacity1">
        <div class="bg-color-aliceblue">
           <div class="panel-green">
             <div class="panel-heading">
             </div>
           </div>
           <div class="panel-body" STYLE="opacity:0.8;;">
            <div class="height1">
                <div class="rows">
                <asp:Button ID="btnact1" class="btn btn-activity" runat="server" OnClick="btnact1_Click" />
                <asp:Button ID="btnact2" class="btn btn-activity" runat="server"  />
                <asp:Button ID="btnact3" cssclass="btn btn-activity" runat="server"  />
              </div>
            </div>
        </div>
        
    </div>
   </div>
  </div>
</div>

Reply

A2H

All-Star

50831 Points

9895 Posts

Re: How to align buttons across rows in a div using css

Sep 27, 2016 02:51 PM|A2H|LINK

baldwinjohn
I am attempting to display buttons inside a div panel across and down but can't seem to get it to work. They go down the page instead of across.

You need to increase the width of panelbody(container for all buttons) and then float the button left like below

 <style>
        .col-sm-8 {
            width: 66.66666666666666%;
        }

        .panel-heading {
            padding: 10px 15px;
            border-bottom: 1px solid transparent;
            border-top-right-radius: 3px;
            border-top-left-radius: 3px;
        }

        .panel-title {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 16px;
        }

        .panel-body {
            padding: 15px;
            width: 700px;
            margin-bottom: 0px;
        }

        .row {
            margin-right: -15px;
            margin-left: -15px;
        }

        .rows .btn {
            margin-left: 15px;
        }


        .bg-color-aliceblue {
            background-color: aliceblue;
        }

        .panel-green {
            background-color: #1cca48;
        }

        .height1 {
            height: 390px;
        }

        .btn-activity {
            background: #082e75;
            border-radius: 10px;
            color: #ffffff;
            font-size: 13px;
            font-weight: bold;
            width: 210px;
            height: 50px;
            white-space: normal;
            display: table;
        }

        div.opacity1 {
            opacity: 0.8;
        }
    </style>

<div class="row" >
  <div class="col-sm-8" STYLE=";top:200px;left:485px;">
      <div class="opacity1">
        <div class="bg-color-aliceblue">
           <div class="panel-green">
             <div class="panel-heading">
             </div>
           </div>
           <div class="panel-body" STYLE="opacity:0.8;">
            <div class="height1">
                <div class="rows" >
                <asp:Button ID="btnact1" cssclass="btn btn-activity" runat="server" style="float:left;" />
                <asp:Button ID="btnact2" cssclass="btn btn-activity" runat="server" style="float:left;"/>
                <asp:Button ID="btnact3" cssclass="btn btn-activity" runat="server" style="float:left;" />
              </div>
            </div>
        </div>
    </div>
   </div>
  </div>
</div>