How to add Vertical line with same style as hr

user_16421248 0
Viewed 57

I have this code I've done earlier . I want to know how can I add a vertical line same as hrtag . As you can see I want to add 2 vertical lines to seperate these 3 blocs. Please open snippet in full page.

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - Page acceuil</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap"
        rel="stylesheet">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

</head>
<!-- row -->
          <body>

          <div class="row">
            <div class="col-lg-4 col-md-4 col-12 mb-3">
                <!-- text -->
              <h3 class="fw-semi-bold mb-3">Developper vos compétences</h3>
              <p class="fs-4">Avec notre platform on vous fournis des dernieres nouveautés pour assurer vos cours.</p>

            </div>
            
            <div class="col-lg-4 col-md-4 col-12 mb-3">
                <!-- text -->
              <h3 class="fw-semi-bold mb-3">Inspirer vos étudiants par vos cours</h3>
              <p class="fs-4">Aidez les gens à acquérir de nouvelles compétences, à faire progresser leur carrière et à explorer leurs passe-temps en partageant votre
                connaissances.</p>
            </div>
            <div class="col-lg-4 col-md-4 col-12 mb-3">
                <!-- text -->
              <h3 class="fw-semi-bold mb-3">Rejoindre notre communité</h3>
              <p class="fs-4">Profitez de notre communauté active d'instructeurs pour vous aider dans votre processus de création de cours.
              </p>
            </div>
              
          </div>
          </body>
          </html>

css html
3 Answers

you can achieve this task using border property. just give a class name to second column and apply that class.

.second-column{
    border-left: 2px solid red;
    border-right: 2px solid red;
}

enter image description here

user_77709420

Add a border-right: 2px solid #000 on col-lg-4. So the CSS should look like this:

<style>
.col-lg-4 {
    border-right: 2px solid #000;
}
</style>

If you don't like how the line looks, try changing its color, #000 to any other hexadecimal, RGB value, or color name, change the nature of the line, solid to dashed or dotted or any other. You can also change the width of the line, 2px to any value of any unit.

user_164698850

The most likely way I would solve this would be to use CSS to add the line between the divs, this by giving the two first a class of eg. "vSeparator".

Then do something like this in the CSS file or add it to the top using the style tags.

div.vSeparator {
    border-right: 1px solid black  
}
user_129851010
Related