Bootstrap 3.. column spanning is not working as I am expecting.. I can't get a button to span e-CodePudding

I am trying to have 2 rows: First row a 4span that has a label with a text box below. Second an 8 with a label and text box below.

Then a 12 span on second row with a button spanning the entire thing. I've included an image on how I want it to look and the code I am using.

<div >
    <div >
        <asp:Label runat="server" Text="Merchant:" Width="100%"></asp:Label>
        <asp:DropDownList ID="comMerchants" runat="server" Width="100%" AutoPostBack="true"/>
    </div>
    <div 
        <asp:Label runat="server" Text="Enter Pass Serial (GUID):" Width="100%"/>
        <asp:TextBox ID="txtGUID" runat="server" Width="100%"/>
    </div>
    <div >
        <asp:Button ID="Button1" runat="server" Text="Button" width="100%"/>
    </div>

</div>

CodePudding user response：

The thing is, when you use Bootstrap Grid row, everything in that row div will be laid out in a single row if possible.

your button has the class of col-md-12, which means that it will take up 12 columns for displays that are smaller then or roughly the same size as a medium display.

If you were to write col-12, it will use up all 12 columns on all screen sizes. but col-md-12 won't. Writing width 100% does one thing. It uses up the what's left of the columns of the row

For a better understanding of bootstrap grid I recommend:

Creating a Responsive Layout with Bootstrap Grid By Shawn Wildermuth - on pluralsight.com

Or check out the documentation from Bootstrap itself. https://getbootstrap.com/docs/4.0/layout/grid/

CodePudding user response：

You probably want to use bootstrap to style your form elements too, you're just fighting against the framework otherwise.

So your button probably needs a btn class and then the btn-default (or similar) you can then use btn-block to make it display block rather than inline.

That will make it 100% the width of the container.

If you want truly 100% then you will also need to remove the padding from the containing column which I cant remember if you can do in bootstrap3 but you can easily do yourself with your own CSS.

Like This

The main thing here is the btn, btn-default and btn-block classes on the button.

    <button type="Button" ID="Button1" >THIS IS A BUTTON</button>

in the fiddle above I have converted your server controls to HTML to make it render properly in the browser and I have applied styling to the column, button and divs (Made the outline purple to make it easier to see them).