"Is there a way to position a button at the bottom using HTML and

Is there a way to position my button after the reviews stars?

The browser output screenshot shows the desired layout:

https://i.sstatic.net/nh63E.png

I want my post review button to be displayed after the reviews stars, not in a row.

Here is the code snippet:

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b7b647b7b6e792561784b3a253a3d253b">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>

<form action="">
                                                <input type="text" class="form-control" placeholder="Your Name" required>
                                                <textarea placeholder="Enter Your Review Here..." cols="30" rows="5" class="form-control mt-3" required></textarea>
                                                <style>
                                                    .rating {
                                                        float: left;
                                                    }
                                                    
                                                    .rating input {
                                                        display: none;
                                                    }
                                                    
                                                    .rating label {
                                                        color: #ddd;
                                                        float: right;
                                                    }
                                                    
                                                    .rating label:before {
                                                        margin: 5px;
                                                    }
                                                    
                                                    .rating>input:checked~label,
                                                    .rating:not(:checked)>label:hover,
                                                    .rating:not(:checked)>label:hover~label {
                                                        color: #FFD700;
                                                    }
                                                    
                                                    .rating-st {
                                                        font-size: 30px;
                                                        padding: 5px;
                                                    }
                                                </style>
                                                <div class="rating mt-3">
                                                    <input id="star_a-5" name="rating_a" type="radio" value="5" />
                                                    <label for="star_a-5" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
                                                    <input id="star_a-4" name="rating_a" type="radio" value="4" />
                                                    <label for="star_a-4" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
                                                    <input id="star_a-3" name="rating_a" type="radio" value="3" />
                                                    <label for="star_a-3" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
                                                    <input id="star_a-2" name="rating_a" type="radio" value="2" />
                                                    <label for="star_a-2" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
                                                    <input id="star_a-1" name="rating_a" type="radio" value="1" required/>
                                                    <label for="star_a-1" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
                                                </div>
                                                <input type="submit" class="btn btn-primary" value="Post My Review">
                                            </form>

htmlcss

Answer №1

If you're looking for a quick and easy solution, you can simply add a break like this:

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89f9e6f9f9ecfba7e3fac9b8a7b8bfa7b9">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>

<form action="">
    <input type="text" class="form-control" placeholder="Your Name" required>
    <textarea placeholder="Enter Your Review Here..." cols="30" rows="5" class="form-control mt-3" required></textarea>
    <style>
        .rating {
            float: left;
        }
        
        .rating input {
            display: none;
        }
        
        .rating label {
            color: #ddd;
            float: right;
        }
        
        .rating label:before {
            margin: 5px;
        }
        
        .rating>input:checked~label,
        .rating:not(:checked)>label:hover,
        .rating:not(:checked)>label:hover~label {
            color: #FFD700;
        }
        
        .rating-st {
            font-size: 30px;
            padding: 5px;
        }
    </style>
    <div class="rating mt-3">
        <input id="star_a-5" name="rating_a" type="radio" value="5" />
        <label for="star_a-5" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
        <input id="star_a-4" name="rating_a" type="radio" value="4" />
        <label for="star_a-4" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
        <input id="star_a-3" name="rating_a" type="radio" value="3" />
        <label for="star_a-3" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
        <input id="star_a-2" name="rating_a" type="radio" value="2" />
        <label for="star_a-2" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
        <input id="star_a-1" name="rating_a" type="radio" value="1" required/>
        <label for="star_a-1" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
    </div>
    <br>
    <br>
    <br>
    <input type="submit" class="btn btn-primary" value="Post My Review">
</form>

It's advisable to also explore the other responses for more comprehensive and accurate solutions.

Answer №2

Simply eliminated the unnecessary float property from the star and rating div in the styles and introduced a div wrapper around the 'Post My Review' button to set it as block.

Take a look at this functional example:

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="59293629293c2b77332a196877686f7769">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<form action="">
   <input type="text" class="form-control" placeholder="Your Name" required>
   <textarea placeholder="Enter Your Review Here..." cols="30" rows="5" class="form-control mt-3" required></textarea>
   <style>
      .rating input {
         display: none;
      }
      .rating label {
         color: #ddd;
      }
      .rating label:before {
         margin: 5px;
      }
      .rating>input:checked~label,
      .rating:not(:checked)>label:hover,
      .rating:not(:checked)>label:hover~label {
         color: #FFD700;
      }
      .rating-st {
         font-size: 30px;
         padding: 5px;
      }
   </style>
   <div class="rating mt-3">
      <input id="star_a-5" name="rating_a" type="radio" value="5" />
      <label for="star_a-5" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
      <input id="star_a-4" name="rating_a" type="radio" value="4" />
      <label for="star_a-4" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
      <input id="star_a-3" name="rating_a" type="radio" value="3" />
      <label for="star_a-3" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
      <input id="star_a-2" name="rating_a" type="radio" value="2" />
      <label for="star_a-2" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
      <input id="star_a-1" name="rating_a" type="radio" value="1" required/>
      <label for="star_a-1" class="full"><i class="fa fa-star rating-st" aria-hidden="true"></i></label>
   </div>
   <div class="post-review mt-1">
       <input type="submit" class="btn btn-primary" value="Post My Review" />
   </div>
</form>

Answer №3

Please refrain from using shortcuts like adding breaks, as it can lead to buggy and inefficient code. If it does work, credit your user-agent for the babysitting service.

  • <br> is a self-closing tag, so closing it is not allowed and is considered bad practice. The correct syntax is <br> or <br/> without creating a self-invented closing tag.
  • The appropriate use of <br> is very rare, as there are numerous tools and solutions available for line breaks. Using <br> signifies a failure and placement between blocks is buggy.

The issue with the layout below is caused by using (css) float: left;
Further explanation regarding the side effects of float is readily available on the Internet.

Given your reliance on tools like Bootstrap, rearranging the entire project is not feasible. In other circumstances (writing your own code), this approach would be a remedy, but in your case, it only serves as a temporary fix:

Insert 

<hr class="break">
directly where you require a line break in your HTML
This line will be visible, and if you prefer to have it hidden, add the following CSS:

hr.break{ background: 0; border: 0; margin: 0;}

You have the option to change the class name or omit it, but be aware that this change may impact all <hr> elements on your site. Opting for a unique class name would be a better decision.

The irony lies in the fact that the one seeking a quick solution had the answer but failed to implement it properly

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating an HTML Canvas effect where images are placed onto another image

Looking to create a similar effect as seen on this website () On this site, users can upload their images (4000 * 400) and have the option to add Mickey Mouse ears over their image before saving it. The Mickey Mouse ear is resizable from all four sides f ...

javascriptjqueryhtmlcanvas

What is the best approach to passing multiple variables to a JavaScript function in HTML/PHP?

Seeking help with calling a javascript function from PHP through embedded HTML code. Below is the script: <script> // THE FOLLOWING JAVASCRIPT FUNCTION REDIRECTS TO EDITUSER.PHP AND PASSES USERID VALUE. function startMaint(mo, yr){ ...

javascriptphphtml

Ways to dynamically insert a new row into a table based on user input in a Postman-like reactive table

Is there a way to dynamically insert a row when a single character is entered into an input field in the header tab, similar to how Postman functions? 1) If a user types any single character in the td of the first row, then a new row should be added below ...

javascripthtmlangular

Using JavaScript to implement CSS3 with multiple background images

Is there a way to programmatically define multiple background images in CSS3 using JavaScript? While the common approach would be: var element = document.createElement( 'div' ); element.style.backgroundImage = "url('a.png') 0 100%, ur ...

javascriptcssbackground

What is the best way to trigger a function following a user's selection from a form-control on a webpage?

I am looking for a way to automatically execute a function when a year is selected without needing a button. I am using HTML, JavaScript, and bootstrap 5. Any suggestions on how to achieve this? Thank you. function onSelect() { console.log('Hel ...

javascripthtmlwebbootstrap-4bootstrap-5

What are the best practices for ensuring design responsiveness with the Bootstrap grid system across various screen resolutions?

<div class="row"> <div class="col-xl-4 col-md-12 col-sm-12 col-lg-4 data-one"> <one /> </div> <div class="col-xl-4 col-md-12 col-sm-12 col-lg-4 dashboard-two"> <two /> </div> <div ...

cssbootstrap-4media-queries

What is causing compatibility issues between Firefox and the provided CSS code?

I am experiencing an issue with the page layout in FireFox. The widths are not displaying correctly and the upload button does not work. However, I have no problems when using IE or Chrome. I have reviewed the code but cannot find any errors. Here is the ...

htmlcssinternet-explorergoogle-chromefirefox

Tips on adjusting the color of a chosen tab using the CSS :target Property, no JavaScript needed!

I am currently attempting to modify the color of the active tab using CSS and the :target property. The issue I am facing is that I am unable to identify the clicked tab when using the :target property. Therefore, I would like the active tab to be visible ...

htmlcss

A guide on interpreting Ascii code within a character using PHP

String received in the following format solr/?key=color&facet=Blue%26keyword%3Dwoo Desired string format is as follows solr/?key=color&facet=Blue&keyword=woo ...

phphtmlasciidecodeurldecode

"What is the best approach to adjusting the width of one div based on the width of another div using CSS Grid

As a beginner in programming, I'm trying to work with CSS Grid but facing some challenges. My goal is to create a component with two columns: the left column should have a width of minmax(570px, 720px), and the right column should be minmax(380px, 10 ...

javascriptcssflexboxcss-grid

Show a variety of logos on the website based on the current date

I've been experimenting with displaying a unique logo on my website based on the current date (for example, showing a Christmas-themed logo during December). Here's what I have so far: <img class="logo" id="global_logo" sty ...

javascripthtml

Convert HTML style text annotations into a collection of dictionaries

Currently facing the following issue: Suppose I have a string "<a>annotated <b>piece</b></a> of <c>text</c>" To create a list with the desired result as [{"annotated": ["a"]}, {"piece": ["a", "b"]}, {"of": []}, {"te ...

pythonhtmlparsinghtml-parsingnlp

Discovering whether a link has been clicked on in a Gmail email can be done by following these steps

I am currently creating an email for a marketing campaign. In this email, there will be a button for users to "save the date" of the upcoming event. I would like to implement a feature that can detect if the email was opened in Gmail after the button is cl ...

javascriptjqueryhtmlcssgmail

How can HTML text be highlighted even when it's behind a transparent div?

In my React application, I am facing an issue with a transparent div that serves as a dropzone for draggable elements. This div covers text and also contains children elements that may have their own text content. <Dropzone> <SomeChild> . ...

javascripthtmlcssreactjspointer-events

The function addClass() seems to be malfunctioning

I'm currently experimenting with creating a scrolling cursor effect on a string of text. The goal is to make it look like the text has been highlighted with a blinking cursor, similar to what you see in your browser's search bar. window.setInter ...

javascriptjquerycss

Using Regex named groups in JavaScript's replace() method

Currently in my JS project, I am facing a challenge while trying to create an object using the code snippet below. My difficulty lies in extracting regex named groups using the replace function provided. var formatters = { 'p': 'padding& ...

javascriptphpcssarraysregex

How do I trigger a click event on an autocomplete search bar in Vue with a router link enabled?

I'm working on an app that is similar to Github, and I want to create a search bar functionality just like Github's. However, I'm facing an issue with my search bar located in the navbar option section as it doesn't seem to register any ...

javascripthtmlcssvue.jsbootstrap-4

Dynamic container elements (already arranged)

After creating a marksheet generator, I noticed that the divs positioned over an image on the resulting page are not responsive when trying to print. The print preview ends up looking strange and distorted. How can I make these already positioned divs resp ...

htmlcssresponsive

CSS - Absolute positioning appears to be slightly choppy in Microsoft Edge

I have successfully implemented a slip scrolling function to reveal/hide a fixed logo on scroll, but I am facing some issues with Microsoft Edge browser. While testing in various browsers, everything works smoothly except for Microsoft Edge. In this brows ...

javascriptjqueryhtmlcssmicrosoft-edge

IIFE and the Twitter share button are a powerful duo

As I experiment with this quick creation of mine, two questions have arisen. The first one is, how can I encapsulate all the JS code within an IIFE without breaking it? The second question is about finishing the twitter button to enable sharing the act ...

javascripthtmlapitwitteriife