Styling a span within a row in Bootstrap to automatically indent using CSS

I have integrated Bootstrap into my project and I am utilizing its grid system. I start by creating a row, then adding a span inside the row which functions as a column (col-12).

The text inside this span is underlined, with <br> elements used to separate lines. Strangely, the first line of text auto-indents more than the other two lines. I tried using the &nbsp; tag to fix it, but it creates an unwanted underline before the text due to the styling.

Has anyone encountered this issue before? Any help would be appreciated.

Below is the code snippet in question:

.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>

csstwitter-bootstrapbootstrap-4

Answer №1

It seems like your layout is displaying with a right indentation, possibly due to the <u> tag being placed outside of the <span class='col-12'>

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

To correct this issue, you have a few options:

  1. Include the <u> tag within the span (example 1)
  2. Delete the <u> tag and apply the CSS attribute text-decoration:underline to the span (example 2)
  3. Eliminate the <span> tag and assign the classes col-12 mainBodyTxt to the u element (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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing the appearance of div content in Angular by utilizing local template variables and material elements

Within this particular implementation, I have utilized an md-sidenav component with a local template variable #sidenavsearchArea. <md-sidenav #sidenavSearchArea align="" mode="push" opened="false"> sidenav content here.. </md-siden ...

cssangular

Customize your Google Translate experience by choosing your own option values

Is there a way to trigger the same JavaScript calls by clicking on an option value in an HTML select element as with text-based links in the Google Translate widget? Check out this jsfiddle for more information <html> <body> <select i ...

javascriptjqueryhtmlcss

Can the CSS of an iframe be modified if the iframe is located on a different domain?

Is it feasible to modify the CSS of an iframe if the iframe is not located on the same domain? If so, what are some ways to apply and alter CSS for this situation? Any assistance would be greatly appreciated. <iframe id="frame1" width="100%" height="35 ...

javascriptjqueryhtmlcssiframe

Adjust the size of the buttons based on the width of the screen

I have successfully implemented a dropdown menu with both text and an icon. However, I am now faced with the challenge of removing the text while retaining the icon when the screen width is reduced to a maximum of 768px. Is it possible to modify the conten ...

htmlcsswidthscreen-size

Is there a way to eliminate the bottom border on the active navigation tab?

Here's the information I've gathered: Below is a snippet of code that I have: .nav-tabs { border-bottom: 3px solid #3FA2F7 !important; } .nav-tabs .nav-link { color: #02194A; font-size: 13px; padding: 12.5px !important; } ...

htmlcssbootstrap-4

How can the $spacer variable in Bootstrap be modified?

My attempt to adjust the $spacer variable in SASS to increase margins seems to be failing. Here is my code: @import url(../node_modules/bootstrap/scss/_functions.scss); @import url(../node_modules/bootstrap/scss/_variables.scss); @import url(../node_module ...

htmlcsssassbootstrap-5

The desired styling is not displaying as expected in Django's CSS configuration

As a beginner in Django, I am attempting to utilize static files for adding color to my website. Here is the layout of my directory hierarchy- https://i.sstatic.net/sL7Nl.png I am trying to style this HTML using the following code- https://i.sstatic.net/ ...

pythoncssdjangostatic-linking

How can I make a DIV grow taller without impacting neighboring DIVs?

I am working on expanding a specific DIV within a series of DIVs for an image gallery. However, I am facing an issue where when I expand the particular DIV, it affects all the following ones and causes them to shift positions, leaving a large blank space t ...

htmlcss

Tips for styling an asp:DropDownList to resemble a bootstrap dropdown list without relying on the form-control class

As I work on updating an old application with Bootstrap styling, one challenge that keeps arising is how to style an asp:DropDownList to look like a Bootstrap dropdown. I found a helpful Stack Overflow post suggesting the use of the form-control class. Wh ...

c#cssasp.nettwitter-bootstrap

Animate the entire paragraph with CSS hover effect

I'm seeking ideas on how to achieve a specific effect without the need to wrap individual lines in inner elements like span or a. Check out this example <div class="m-linkitem"> <h1>Hover Below</h1> <a href="#">Lorem ...

javascriptjqueryhtmlcss

Trying to reduce the cursor box area within an A link containing a div box

My communication skills are lacking, so I have included an image to better illustrate my issue. Here is the problem .body { text-align: center; display: flex; flex-direction: column; align-items: center; } .flex-container { display: flex; ...

htmlcss

customized multiselect dropdown with grouping options using Bootstrap

My dropdown menu looks like this: <select class="selectpicker" multiple> <optgroup label="option 1"> <option value="1">1</option> <option value="2">2</option& ...

jqueryeventsbootstrap-4bootstrap-multiselect

Filtering through select options made easy with Bootstrap 4 in Angular

I am currently working on an Angular project and have integrated Bootstrap 4 into it. Within the project, I am utilizing a select element: <select> <option value="one">One</option> <option value="two">Two< ...

angulartwitter-bootstrapbootstrap-4

Panel with Bootstrap Collapse feature causes a slight movement when padding is applied

After applying the collapse behavior to a panel element, I noticed that the animation stops abruptly at the padding of .panel-body, causing it to snap instantly to height. This issue can be observed in the basic example on codepen: http://codepen.io/FiveSi ...

jquerycsstwitter-bootstrap

Creating fundamental forms using HTML, CSS, and Javascript

I am tasked with creating a unique web application where users can sketch and annotate simple shapes. The purpose of the app is to create basic store maps. These shape drawings must be saved in a database, including their coordinates, sizes, labels, and cu ...

javascriptjqueryhtmlcss

Minimize the number of clicks needed to navigate using the HTML/JavaScript navigation

On my website, I have a navigation bar that changes the contents of a div when a user clicks on an item. However, if the user clicks multiple times in quick succession, the content changes too many times. I want to ensure that the content only changes once ...

javascriptjqueryhtmlcss

The material UI tabs text is missing the ellipses due to a coding error

As a newcomer to web development, I am experimenting with adding an ellipsis to the span element within the tabs. <div class="MuiTabs-scroller MuiTabs-fixed" role="tablist" style="overflow: hidden;"> <div class="MuiTabs-flexContainer"> ...

cssreactjsmaterial-ui

Changing the container's height in an HTML document

enter image description hereim struggling to change the height of the white dash container, and I can't quite figure out how to do it. Here is the code, any help would be appreciated: analytics.html : {% extends 'frontend/base.html' %} {% l ...

pythonhtmlcssdjangoplotly-dash

JavaScript allows you to create matrices from squares

Hey everyone, I'm facing an issue with creating matrices in HTML. I need to display a 5x5 matrix where each index is represented by a square. I tried using a span template for the box and then wrote a script to populate the matrices, but it's no ...

javascripthtmlcssmatrix

Issues arising from the alignment of css in html documents

Can anyone assist with my issue? I am trying to add a header to my webpage, but I'm facing a problem where the order of div declarations determines their placement on the page. The first declared div appears on top, and the second one appears below, r ...

htmlcss