Tutorial 3 || Text alignment

Untitled-1.png

Greetings everyone. In this tutorial we will learn to align texts and photos. All the codes are in written form so that you can easily copy and paste it on your writing.

1. Text aligned to the right


Code


<div class="text-right">
The rose is a type of flowering shrub. Its name comes from the Latin word Rosa. The flowers of the rose grow in many different colors, from the well-known red rose or yellow roses and sometimes white or purple roses. Roses belong to the family of plants called Rosaceae.
</div>

Output

The rose is a type of flowering shrub. Its name comes from the Latin word Rosa. The flowers of the rose grow in many different colors, from the well-known red rose or yellow roses and sometimes white or purple roses. Roses belong to the family of plants called Rosaceae.

2. Text justified to spread across the entire width of the screen


Code


<div class="text-justify">
The rose is a type of flowering shrub. Its name comes from the Latin word Rosa. The flowers of the rose grow in many different colors, from the well-known red rose or yellow roses and sometimes white or purple roses. Roses belong to the family of plants called Rosaceae. Rose  plant possess different types of colour. It comes in red, orange, white, etc. The size of these flowers differ from plant to plant. Rose plant is used in garden to decorate by people. It is used in perfumes because of its sweet smell. It is used in garlands. It is also known as woody plant. When the flower blooms it looks very beautiful. It looks beautiful when it is on the plant but as soon as it is plucked it fades .
</div>

Output

The rose is a type of flowering shrub. Its name comes from the Latin word Rosa. The flowers of the rose grow in many different colors, from the well-known red rose or yellow roses and sometimes white or purple roses. Roses belong to the family of plants called Rosaceae. Rose plant possess different types of colour. It comes in red, orange, white, etc. The size of these flowers differ from plant to plant. Rose plant is used in garden to decorate by people. It is used in perfumes because of its sweet smell. It is used in garlands. It is also known as woody plant. When the flower blooms it looks very beautiful. It looks beautiful when it is on the plant but as soon as it is plucked it fades .

3. Text aligned to the left and photo aligned to the right


Code


<div class="pull-left">
Rose  plant possess different types of colour. It comes in red, orange, white, etc. The size of these flowers differ from plant to plant. Rose plant is used in garden to decorate by people. It is used in perfumes because of its sweet smell. It is used in garlands. It is also known as woody plant. When the flower blooms it looks very beautiful. It looks beautiful when it is on the plant but as soon as it is plucked it fades .
</div>
<div class="pull-right">
https://cdn.steemitimages.com/DQmReVyBEbLvjZXYoHQawjjVhV4rJgzrDAwV4nLDPQxoPQb/tirza-van-dijk-cNGUw-CEsp0-unsplash.jpg
</div>

Output

Rose plant possess different types of colour. It comes in red, orange, white, etc. The size of these flowers differ from plant to plant. Rose plant is used in garden to decorate by people. It is used in perfumes because of its sweet smell. It is used in garlands. It is also known as woody plant. When the flower blooms it looks very beautiful. It looks beautiful when it is on the plant but as soon as it is plucked it fades .

## note:
you can swap between photo and text to set the photo in the left and text on the right. Like -

Rose plant possess different types of colour. It comes in red, orange, white, etc. The size of these flowers differ from plant to plant. Rose plant is used in garden to decorate by people. It is used in perfumes because of its sweet smell. It is used in garlands. It is also known as woody plant. When the flower blooms it looks very beautiful. It looks beautiful when it is on the plant but as soon as it is plucked it fades .

Sort:  

Nice tutorial bro. Thank you, for this tutorial.

welcome friend

Share more tutorial.

feel free to tell me what tutorial should I make next .......

Any kind of writing tutorial as you wish.

Great job bro...thanka for sharing html coad with us...

Coin Marketplace

STEEM 0.16
TRX 0.03
JST 0.038
BTC 10641.93
ETH 345.49
USDT 1.00
SBD 0.95