user13843526
Reputation:
how can i align button bottom html css
How Can I fix my button is showing with reviews
I want to show my button after reviews stars
browser output screenshot:
I want something like that
how can I do that
I want my post my review button after reviews star, not like a row
Here is My Code:
<!-- 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/[email protected]/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>Upvotes: 1
Views: 81
Answers (3)
Mr J.
Reputation: 225
A quick and dirty way to do it is by adding break like so:
<!-- 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/[email protected]/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>I highly recommend to check the other answers as they provide the proper and correct solution.
Upvotes: 1
black blue
Reputation: 819
Please, don't use quick way by adding break because it is buggy and poor code. If it works, thank your user-agent for the babysitting service
- <br> it is a self-closing tag, closing it is prohibited, is bad. Correct syntax is
<br> or <br/>without self-invented closing-tag - correct use of <br> - a very rare need to break line inside block of text. Very rare because there are plenty tools and solutions intended for this purpose. Using <br> means that you are fail. Using it between blocks is buggy
Problem with setting bellow caused (css) float: left;
I won't elaborate about float's side effects - its widely described and detailed in the Internet.
Since you are using tools like Bootstrap, you cannot reorganize the entire project. In other situations (own code) the strategy would be a cure, in your case all you get is a bandage:
Put <hr class="break"> right in place where you need break line in your html
This line will be visible, if you don't like it add to css:
hr.break{ background: 0; border: 0; margin: 0;}
You can change class name, omit class - but it may affect every <hr> in your site. Change it's name for something spectacular will be a better choice.
Ironically, the quick guy got the solution but failed to implement it
Upvotes: 1
Yogendra Chauhan
Reputation: 825
Just removed unnecessary float property from star & rating div in styles and added a div wrapper on 'Post My Review' button to make it block.
Check this working 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/[email protected]/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>Upvotes: 1
Related Questions
- Align button at the bottom of div using CSS
- How to align the button at the bottom center of its container?
- CSS Align button at bottom of div
- Align button to the center bottom of its container
- Align buttons in bottom of div
- how to make a button aligning bottom with float property within a div?
- How do I position button to the bottom right using css
- How do I align a button to the bottom center?
- How can I align a button at the bottom of a div?
- Align a button?