Question

I am really new to bootstrap-4 and I made a simple social media website using it. I tried to make my create-post, login and register button to the right by "float-right" but it messes up the format? Any advice would be appreciated.

I am expecting this but to the right https://imgur.com/nhqLk2M

submit button

<div class="form-group">
    {{ form.submit(class="btn btn-outline-info float-right") }}
</div>

Answer 1

You need to apply the float-right class to the parent div - otherwise you will be floating the button within the div instead of floating the div to the right of the footer.

<div class="form-group float-right">
    {{ form.submit(class="btn btn-outline-info") }}
</div>

Answer 2

Turns out I didn't add text-right at the class section so it didn't work, rookie mistake for a newbie student coder, sorry guys

Answer 3

Try to use the text-right for parent class form-group to align the button right side.

<div class="form-group text-right">
    {{ form.submit(class="btn btn-outline-info float-right") }}
</div>

Try the below format:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group text-right">
    <button type="button" class="btn btn-outline-info" value="">Submit</button>
</div>

Moving bootstrap-4 button to the right without messing up format

3 个答案: