Having trouble getting text to align vertically in Bootstrap CSS?

I'm currently working on creating a horizontal counter to indicate the step in progress. We are using bootstrap 4 for this project. The CSS is functioning correctly without bootstrap, but once it is added to the project, it's not aligning vertically. The text appears below the circle.

Link to Image

The number needs to be centered both vertically and horizontally within the circle.

Any suggestions on how to make this CSS work within the bootstrap project?

HTML

.steps {
  margin: auto;
  text-align: center;
  font-size: 40px;
  text-align: center !important;
  vertical-align: middle !important;
}

.steps div{
  display: inline-block;
}

.steps .circle {
  border-radius:100px;
  width: 75px;
  height: 75px;
  text-align: center !important;
  vertical-align: middle !important;
  line-height: 75px;
}

.steps .separator {
  width: 100px;
  margin:0px -5px 0px -5px;
  vertical-align: middle !important;
}

.steps .done {
color:#35FF8B;
}

.steps .done .circle {
border:3px solid #35FF8B;
background:#385463;
}

.steps .done .separator {
border:4px solid #35FF8B;
}
<div class="steps">
  <div class="done">
    <div class="circle">
        1
    </div>
    <div class="separator"></div>
   </div>
</div>

htmlcssbootstrap-4

Answer №1

To achieve this, you can utilize line-height instead. Simply eliminate the padding and include width:75px, height: 75px;, and line-height:75px;

.steps {
  margin: auto;
  text-align: center;
  font-size: 40px;
  text-align: center !important;
  vertical-align: middle !important;
}

.steps div{
  display: inline-block;
}

.steps .circle {
  border-radius:100px;
  width: 75px;
  height: 75px;
  text-align: center !important;
  vertical-align: middle !important;
  line-height: 75px;
}

.steps .separator {
  width: 100px;
  margin:0px -5px 0px -5px;
  vertical-align: middle !important;
}

.steps .done {
  color:#35FF8B;
}

.steps .done .circle {
  border:3px solid #35FF8B;
  background:#385463;
}

.steps .done .separator {
  border:4px solid #35FF8B;
}
<div class="steps">
  <div class="done">
    <div class="circle">
        1
    </div>
    <div class="separator"></div>
   </div>
</div>

Answer №2

Here's a helpful tip for aligning elements using Bootstrap:

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

Take a look at the detailed instructions in the Vertical-Alignments-Demo section of the documentation.

Answer №3

I'm thinking about using flexboxes to center elements both horizontally and vertically in the final layout.

.plan {
  margin: auto;
  font-size: 40px;
}

.plan .circle {
  border-radius: 50%;
  width: 75px;
  height: 75px;
  background: lightblue;
  border: thin solid blue;
  display: flex;
  justify-content: center;
  align-items: center;
}

.plan .spacer {
  width: 100px;
}

.plan .completed {
  color: #35FF8B;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.plan .completed .circle {
  border: 3px solid #35FF8B;
  background: #385463;
}

.plan .completed .spacer {
  border: 4px solid #35FF8B;
}
<div class="plan">
  <div class="completed">
    <div class="circle">
      1
    </div>
    <div class="spacer"></div>
  </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

Adjust the width of xAxis[0] and xAxis[1] in Highcharts to their default values

Hi there, I need some help with Highcharts. Is it possible to adjust the width of xAxis[0] and xAxis[1] as well as reset the offset of xAxis[1] at runtime? I have a chart with two x-axes that need to be resized to fit different sized divs. You can see an ...

javascriptcsshighcharts

After uploading the WordPress theme, the wp_enqueue_style() function fails to work properly

I recently developed a new WordPress theme and encountered an issue while trying to load specific stylesheets for my child sites using the is_page(array('')) function in my function.php file. Surprisingly, only the files that were added to all of ...

phpcsswordpressloadenqueue

Incorporating Past Projects into an Angular 2 Website

Some time ago, I built a Javascript game utilizing the HTML canvas element for image rendering. Now that I have a personal website created with Angular 2, I am unsure of how to properly embed my game into my site. Due to Angular 2 removing the script tag ...

javascripthtmlangularwebhtml5-canvas

Guide on combining vendor CSS files in a React application using Webpack

Incorporating third-party libraries is an essential part of my project. For example, I have Mapbox GL installed via npm, which comes with CSS files needed for its functionality. The Mapbox GL CSS file can be found at mapbox-gl/dist/mapbox-gl.css in the no ...

javascriptcsstypescriptwebpackcss-modules

What is the best way to showcase AJAX data within a complex HTML structure?

I need assistance with displaying the JSON output in my HTML code. My current HTML code is quite complex, so I am unsure how to include this data and repeat the HTML section for every JSON element. Can you provide guidance on how to achieve this? HTML COD ...

jqueryhtmljsonajax

Automatically submit upon selecting an option

Encountering some difficulties with the code provided below. Purpose of this code I have multiple list items (shown here is just a snippet) made up of select elements, options, and one submit input field. When an option is chosen, the user can click on ...

javascripthtmljquery

Design an HTML watermark input that remains visible as the user starts typing

I'm currently in the process of developing an application that enables businesses to access their account through theirname.mydomain.com. I am working on creating a signup form for this purpose. Today, I stumbled upon squarespace and noticed they hav ...

jqueryhtml

How to implement a Django block for loading CSS files

I have multiple pages and I need to load unique CSS for each page. I am using this method for all static files. In the head of my index.html file, I have the following code: {% block css %} {% endblock %} However, in my contact.html file, I have the fol ...

cssdjangostatic

Creating equality in height among input file fields and other elements with Bootstrap 5

Utilizing a straightforward template to display a registration form with a file attachment field: /* facing an issue when adjusting the height for myself */ .mycustom { line-height: 2.75; z-index: 999; } <!-- <a href="/cdn-cgi/l/email-protecti ...

htmlcssbootstrap-5

The process of setting up React in the terminal becomes tricky when the VS code editor is directing to a non-existent path

Issue with VS Code editor not recognizing existing path Recently attempted to install React using the npx command in the terminal, following steps from various tutorials on YouTube. Despite trying all suggested methods, the installation didn't succee ...

javascripthtmlcssnode.jsreactjs

having difficulty preserving the edited HTML document with JSoup and Java

I am facing an issue with modifying and saving changes to an existing HTML file. I can make modifications, but when it comes to saving the changes back to the HTML file, I encounter difficulties. https://i.sstatic.net/CRhUV.jpg The specific modification ...

javascriptjavahtmlselenium-webdriver

What is the best way to maintain the CSS3 animation state following ng-animate?

Attempting to alter the state of a div using ng-animate along with CSS3 transitions. The animations are functioning well with this particular CSS, except for the issue where the div loses its size and color once the animation is completed. .fade-hide, .f ...

cssangularjsng-animate

What is the best way to turn off autocorrect in a textarea on IE11 without turning off spellcheck?

In my experience, disabling the spellcheck attribute seems to solve the auto-correct issue, but it also eliminates the underlining of misspelled words. <textarea id="TextArea1" spellcheck="false"></textarea> I prefer to keep spellcheck enabl ...

javascripthtmlinternet-explorer

Translate CSS into JavaScript while maintaining selector understanding

I am interested in developing a tool that can read a .css file and generate a function that will accept an array of class names as input and output the corresponding styles for an element with those classes, represented as a JavaScript object. This tool wo ...

javascriptcsscss-modulescss-parsingglamorous

Ensure that the keyboard remains open in an Ionic chat app when a button is clicked

Having some trouble with my Ionic v1 chat application. Everything is set up, but I'm running into an issue where clicking on the send button causes the keyboard to lose focus from the input and then close. I've tried several solutions, but none ...

htmlangularjscordovaionic-frameworkandroid-softkeyboard

Sort choices based on the optgroup category label text

I want to create a system where the user can select a game from one dropdown menu and then see only the consoles that game is available on in another dropdown menu. For example, if the user selects a game like Forza Horizon which is available on multiple c ...

javascriptjqueryhtmlfilterhtml-select

What is causing this regular expression to not find any matches in the VSCode search and replace function?

Currently utilizing VSCode for my code editing needs. https://i.sstatic.net/49OmA.png Displayed below is a screenshot illustrating the search options I have chosen: https://i.sstatic.net/ILcNv.png The regex expression I'm attempting to use functio ...

cssregexvisual-studio-codehtml-email

The issue of Bootstrap modals failing to show content when a button is clicked within the Django Framework

My Bootstrap modals in the HTML code are causing issues as they do not display any content when the triggering buttons are clicked. Despite having correct IDs and attributes, the modals remain empty when the buttons are clicked. Below is the relevant part ...

htmldjangodjango-modelsbootstrap-modalbootstrap-5

What is the method for retrieving the value of a checkbox when clicked?

Managing a dynamically created HTML table with checkbox values can be tricky, especially when the value needs to reflect changes in real-time. If you are struggling to update the status of the checkboxes based on database values and pass that information t ...

phpjqueryhtml

Vue component always renders a new line

Whenever I include a <component> tag in my main application, it always renders on a new line. Is there a way to make it inline? I am trying to achieve something like this: <p>This is a component :<component></component></p> & ...

htmlcssvue.jsvuejs2vue-component