How to use br tag in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. How to use br tag in bootstrap with code example.

Here, we will be using the .w-100 class to break the paragraphs in Bootstrap.

Table of contents

  • Framework and cdn link setup
  • Included JS 3 bootstrap
  • Div element and define its class name

This article will guide you to adding to break the paragraphs in Bootstrap with example.

Step 1: Framework and cdn link

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

<!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">  

Step 2: included JS 5 bootstrap

Now, load the Bootstrap JavaScript file before closing the body tag and done.

<!--Bootstrap 5 JS included-->  
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Step 3: Div element and define its class name

After that, create the break with a class name .w-100.

       <div class="row">
        <div class="col" style="background-color: rgb(22, 146, 146); color: aliceblue;">Hi My name is Viraj.</div>
        <div class="w-100"></div>
        <div class="col" style="background-color: blue; color: aliceblue;">I live in Mumbai</div>
    </div>

Example.

Let’s look at the following example to understand how it basically works:

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Bootstrap</title>
</head>

<body>
    <div class="row">
        <div class="col" style="background-color: rgb(22, 146, 146); color: aliceblue;">Hi My name is Viraj.</div>
        <div class="w-100"></div>
        <div class="col" style="background-color: blue; color: aliceblue;">I live in Mumbai</div>
    </div>

    <p>Hi My name is Viraj<br>I live in Mumbai</p>


    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


</body>

</html>

In the above code, we have used .w-100 class to br tag in bootstrap

Check the output of the above code example.

Bootstrap, Break

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts