Search code examples
htmltwitter-bootstrappanel

How to add a button on the right o bootstrap panel


I am trying to add a delete button on the right of bootstrap panel. No matter what I do it is not getting inline with panel heading. Help please.

panel with button

<div class="panel-heading">
     Update Article
     <form class="delete_form pull-right" id="delete_form" method="post" action="" enctype="multipart/form-data">
        <input type="submit" name="submit" class="btn btn-danger" value="Delete" onclick="return confirm(\'Are you sure you want to delete this item?\');" />
    </form>
</div>

Edit 1: Added rest of the panel code.

    <div class="panel-body">
        <form class="article_form" id="article_form" enctype="multipart/form-data">
            <div class="row">
                <div class="col-sm-6 form-group">
                    <label for="title" requiredField>Title*</label>
                    <input type="text" class="form-control" id="title" value="$title" name="title" maxlength="100" required>
                </div>
                <div class="col-sm-6 form-group">
                    <label for="pdf_link">PDF Link*</label>
                    <input type="text" class="form-control" id="pdf_link" value="$pdfurl" name="pdf_link" maxlength="100" required>
                </div>
            </div>
            <div class="row">
                <div class="word_file col-sm-6 form-group">
                    <label>Upload Microsoft Word file of the article.</label>
                    <input class="form-control" accept=".doc, .docx" type="file" id="word_file" name="word_file">
                </div>
                <div class="word_unavailable col-sm-6 form-group">
                    <label for="ur_name">Check if Microsoft Word file is unavailable.</label>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="chk_word" name="chk_word">
                        <label class="form-check-label" for="wordfiles">MS Word file is unavilable</label>
                    </div>
                </div>
            </div>
            <input type="submit" name="submit" class="btn btn-primary" value="Update" />
        </form>
        </div>
    </div>

I am not using any custom css.

Edit 2: Needed results

results should like this


Solution

  • <body>
    <div class="panel panel-default">
        <div class="panel-heading container-fluid">Update Article
            <form class="pull-right" id="delete_form" method="post" action="" enctype="multipart/form-data">
                <input type="submit" name="submit" class="btn btn-danger" value="Delete" onclick="return confirm(\'Are you sure you want to delete this item?\');" />
            </form>
        </div>
        <div class="panel-body">Any content</div>
    </div>
    </body>