HTML alignment and spacing (without CSS)
Question
I have the following piece of code.
<div class="row no-gutters"> <div class="col-6 text-right text-uppercase font-weight-lighter" style="letter-spacing: 1px;"> placeholder <i class="fa fa-caret-right fa-xs"></i> </div> <div class="col-6 text-uppercase font-weight-lighter">placeholder</div> </div>
I have 2 questions about this piece of code:
How do I align the text (placeholder) to the icon?
How do I add spacing between the 2 pieces of text and the icon?
(all of the code is inside a card-block)
I'm using an older version of HTML (before HTML5) and I cannot use CSS. (this is my first time really delving into HTML, my apologies if my code is awful)
Thank you in advance!
2 answers
solution1
0 2020-02-29 19:01:40
you use bootstrap class in your code , and if you insert bootstrap file in your html you can use these styles with class.
Where property is one of:
m - for classes that set margin p - for classes that set padding Where sides is one of:
t - for classes that set margin-top or padding-top b - for classes that set margin-bottom or padding-bottom l - for classes that set margin-left or padding-left r - for classes that set margin-right or padding-right x - for classes that set both *-left and *-right y - for classes that set both *-top and *-bottom blank - for classes that set a margin or padding on all 4 sides of the element
solution2
0 2020-02-29 19:05:00
You can use bootstrap for alignment and spacing.
In this case I'm using uniform spacing, but you can use bootstrap grid system to change the spacing between the fiels as you see fit.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap spacing</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> </head> <body> <div class="row no-gutters"> <div class="col-3 text-right text-uppercase font-weight-lighter" style="letter-spacing: 1px;"> placeholder </div> <div class="col-3 text-right text-uppercase font-weight-lighter" style="letter-spacing: 1px;"></div> <div class="col-3"> <i class="fa fa-caret-right fa-xs"></i> </div> <div class="col-3 text-uppercase font-weight-lighter">placeholder</div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.