CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
NodeReact020
NodeReact020

Reputation: 506

Bootstrap, CSS - span within row auto indenting

In my project, I implement bootstrap and I use it's grid system. I create a row, and then I add a span inside the row which acts as a column (col-12).

This span I use is underlined, and I add <br> elements within the span to separate line. The first line auto-indents to the right more than the other two lines. I attempt to use the &nbsp; tag, however this doesn't work as my text is underlined and it creates an unwanted underline before the text.

Does anybody know the issue? Thank you.

Here is my code:

.mainBodyTxt {
  color: white;
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-size: 54px;
  z-index: 2;
  left: 200px;
}
.container-fluid {
  background:lightgrey;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <!-- <div class="col-md-4 col-lg-6">-->
    <u style="color: white;"><span class="col-12 mainBodyTxt">I really like <br>
    Blue <br>Sandwiches</span> </u>
  </div>
</div>

Upvotes: 0

Views: 211

Answers (1)

H. Figueiredo
H. Figueiredo

Reputation: 928

Your layout is giving you a right indentation probably because you're using a <u> outside the <span class='col-12'>

col-x elements should be direct descendants of row elements!

To solve this, you could:

  1. Put the <u> tag inside the span (example 1)
  2. Remove the <u> tag and give span the CSS attribute text-decoration:underline (example 2)
  3. Remove the <span> tag and give u the classes col-12 mainBodyTxt (example 3)

.mainBodyTxt {
  color: white;
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-size: 54px;
  z-index: 2;
  left: 200px;
}
.container-fluid {
  background:lightgrey;
}
.mainBodyTxtUnderlined{
  color: white;
  text-decoration:underline;
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-size: 54px;
  z-index: 2;
  left: 200px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="" crossorigin="anonymous">

<!-- example 1 -->
<div class="container-fluid">
  <div class="row">
    <span class="col-12 mainBodyTxt"><u style="color: white;">I really like <br>
    Blue <br>Sandwiches</u></span> 
  </div>
</div>
<br>

<!-- example 2 -->
<div class="container-fluid">
  <div class="row">
   <span class="col-12 mainBodyTxtUnderlined">I really like <br>
    Blue <br>Sandwiches</span>
  </div>
</div>
<br>
<!-- example 3 -->
<div class="container-fluid">
  <div class="row">
    <u class="col-12 mainBodyTxt">I really like <br>
    Blue <br>Sandwiches</u>
  </div>
</div>

Upvotes: 2

Related Questions