Login

kvanaraj · 08-19-2018, 11:48 PM

I want to show three button in same line.
<button type="submit" class="btn btn-primary center-block">Back</button>
<button type="submit" class="btn btn-primary center-block">Save</button>
<button type="submit" class="btn btn-primary center-block">Continue</button>

but it shows one by one.
how to rectify

Pertti · 08-20-2018, 02:00 AM

That's a Bootstrap question, however it's the center-block that makes it "block" type over "inline" type.

Php · 08-20-2018, 09:08 PM

In you <head>

Code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

PHP Code:
<div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
</div> 

Web Developer

Afflospark · 04-18-2019, 11:25 PM

Hello,
As I read you had a difficulty to add your button in a line There are too many processes to do it.
But the best and easiest method is to do it via CSS code
First, you have to prepare a list as a class like this.

<form method="post" action="nextPage.html" name="nameForm" style="display:inline;">
<input type="hidden" name="value" value="someValue">
<input type="submit" name="submit" value="Submit">
via this code you can do multiple button is a list.
Hope this helps you.
Thanks

JLDR · 04-19-2019, 02:24 AM

With Bootstrap in your projet:

Code:
<form method="post" action="nextPage.html" name="nameForm">

        <input type="text" name="username">

        <input type="password" name="password">

        <!-- buttons -->

        <div class="form-inline">

            <input type="submit" value="Cancel"> 

            <input type="submit" value="Save"> 

            <input type="submit" value="Continue"> 

        </div>        

    </form>

form-inline gives you the hability to place elements side-by-side.
Simple.