Utilizing Bootstrap for aligning a span element beneath a div container

I'm working on enhancing a project by integrating more Bootstrap elements. In one part, I have a circular div with the text "Go to Homepage" below it. My goal is to center the span under the div and have it appear on a single line. How can I achieve this using Bootstrap?

.avatar {
margin: 10px;
border-radius: 50%;
height: 90px;
text-align: center;
width: 90px;
float: right;
border: 5px solid #fafafa;
  background-color: blue;
}

.initials {
font-size: 2rem;/* 50% of parent */
position: relative;
top: 1.2rem; /* 25% of parent */
color: #fafafa;
font-weight: 700;
}
  
  .update-homepage-link {
float: right;
color: #fafafa;
font-weight: bold;
  color: pink;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-6 col-xl-2 order-xl-3">
<div class="avatar">
<span class="initials"> WW </span>
<a class="update-homepage-link" href="">Go to Homepage</a>
</div>

Previously, I had used a different method to align the text below the circle, but now I am required to utilize Bootstrap for consistency. Despite experimenting with various spacing classes, I haven't found the perfect combination yet. Any suggestions would be greatly appreciated!

htmlcsstwitter-bootstrappositionmargin

Answer №1

If you're looking to center the contents, consider wrapping the entire div in another div with the 'text-center' class instead of using Bootstrap. Take a look at the CSS modifications below:

.avatar {
margin: 10px;
border-radius: 50%;
height: 90px;
text-align: center;
width: 90px;
border: 5px solid #fafafa;
background-color: blue;
}

.initials {
font-size: 2rem; /* 50% of parent */
position: relative;
top: 1.2rem; /* 25% of parent */
color: #fafafa;
font-weight: 700;
}
  
.update-homepage-link {
color: pink;
font-weight: bold;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-6 col-xl-2 order-xl-3">
<div class="avatar">
<span class="initials"> WW </span>
    </div>
<a class="update-homepage-link" href="">Go to Homepage</a>

Answer №2

After studying your snippet, I have reconstructed it by incorporating the solution within the existing HTML structure.

To address the issue, I utilized a Bootstrap Card component along with some custom classes.

.avatar {
  margin: 10px;
  border-radius: 50%;
  height: 90px;
  text-align: center;
  width: 90px;
  float: right;
  border: 5px solid #fafafa;
  background-color: blue;
}

.initials {
  font-size: 2rem;
  /* 50% of parent */
  position: relative;
  top: 1.2rem;
  /* 25% of parent */
  color: #fafafa;
  font-weight: 700;
}

.update-homepage-link {
  float: right;
  color: #fafafa;
  font-weight: bold;
  color: pink;
}


/* Custom Classes for the Solution */

.card.avatar-card {
  border: none;
  border-radius: 0;
}

.card-img-top.avatar-bs {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 5px solid #fafafa;
  background-color: blue;
  justify-content: center;
  align-self: center;
}

.initials-bs {
  align-self: center;
  font-size: 2rem;
  color: #fafafa;
  font-weight: 700;
}

.update-homepage-link-bs {
  color: #fafafa;
  font-weight: bold;
  color: pink;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-6 col-xl-2 order-xl-3">
      <div class="avatar">
        <span class="initials">WW</span>
        <a class="update-homepage-link" href="">Go to Homepage</a>
      </div>
    </div>
  </div>
  <!-- Incorporating the Solution -->
  <div class="row">
    <div class="col-6 col-xl-2 order-xl-3">
      <div class="card avatar-card" style="width: 18rem">
        <div class="card-img-top avatar-bs d-flex">
          <span class="initials-bs d-flex"> WW </span>
        </div>
        <div class="card-body text-center">
          <a class="card-title update-homepage-link-bs" href="">Go to Homepage</a>
        </div>
      </div>
    </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

How can the height of div1 be made equal to the container and div2 without using JavaScript?

Here is the structure of the HTML: <div id="container"> <div id="blue-box"> </div> <div id="red-box"> </div> </div> The CSS styling for these elements is as follows: #container { background-color:blue; ...

htmlcss

What is the best way to show HTML code on a REACT website without disrupting the existing styles?

I am trying to showcase the following code in a REACT webpage, but it is not displaying as code. Instead, it is showing as actual elements. How can I display the button codes below as actual code? <code> <pre> <Button className='btn-grv ...

htmlcssreactjs

Tips for preventing the inheritance of .css styles in React

I'm facing an issue with my react application. The App.js fragment is displayed below: import ServiceManual from './components/pages/ServiceManual' import './App.css'; const App = () => { return ( <> ...

javascripthtmlcssreactjs

How can I make my iPad switch to landscape mode in my specific situation?

I'm attempting to trigger the landscape mode on an iPad web browser, including the address bar and tabs, when a user clicks a link. Here's what I currently have: <div> <a ng-click="click me()" href="www.cnn.com">Click me</a&g ...

javascripthtmlcssipad

What steps can I take to enhance my script and prevent the password field from being displayed alongside the username

I am currently working on a script that dynamically displays your username in the Login button as you type it. However, I have encountered an issue where the password is also being displayed, which is unacceptable. Additionally, I would like to enhance my ...

javascripthtml

Mobile video created with Adobe Animate

Currently, I am designing an HTML5 banner in Adobe Animate that includes a video element. However, due to restrictions on iPhone and iPad devices, the video cannot autoplay. As a workaround, I would like to display a static image instead. Can anyone provid ...

javascriptcsshtmljquery-animateanimate-cc

Looking to add a dropdown feature to my current main navigation bar

I've been struggling to add a drop-down menu to my website's main menu. Every time I try, something goes wrong - sometimes the menu appears inline, other times it completely messes up the layout. Here is the HTML code snippet: <ul class="m ...

javascriptjqueryhtmlcss

Expansive space for floating numerous tiny circles in the air

Presently, I have a map that features several small circles/dots created using the border-radius property. When hovering over a dot, it triggers an animation along with other effects. MY CONCERN: At the moment, I need to be incredibly accurate when tryi ...

jqueryhtmlcsscss-shapes

Let the numerical tally commence once we arrive at said juncture

Our script is designed to count numbers, but the issue arises when the page is refreshed and the number count starts over. We want the count to start only when a user reaches that specific number or point. Css:- .office{padding-right: 5px; padding-left: ...

javascriptjqueryhtmlcss

Listener for resizing events in jQuery implemented in a separate script file

One issue I am facing is separating my jQuery code from my HTML page, especially when it comes to the resize event. I have an index.html file and a main.js file where I prefer to keep all of my jQuery code. The problem arises when the resize event does no ...

javascriptjqueryhtml

"Exploring the Functionality of Page Scrolling with

Utilizing Codeigniter / PHP along with this Bootstrap template. The template comes with a feature that allows for page scrolling on the homepage. I have a header.php template set up to display the main navigation across all pages. This is the code for th ...

javascriptphpjqueryhtmlcss

Tips for adjusting the progress bar to 100% and back to 0%

My goal is to increase the progress bar percentage with each click. Currently, it only goes up to 75%. When saving, it should show 100%, but it's not displaying that properly. On clicking the back button, it should reset to 0% on the third click. HTM ...

javascripthtmlcss

Verify if a username is available using jQuery

When trying to register, I use this function to check the availability of a username. If the username already exists, the submit button is disabled. The check is done using a php script that queries the database for existing usernames. Everything works per ...

javascriptphpjqueryhtml

Bootstrap: Arrange multiple images horizontally within a row

I am trying to design a list item for a game that includes a background, an iconholder with an icon, a title, description, and up to three resources. I have been experimenting with Bootstrap and attempted using a container-fluid with an inner row but the i ...

htmlcssangularbootstrap-4

Having trouble with the Tooltip feature in Bootstrap versions 5.2 and 5.3 on my end

I've been working on building an HTML website using Bootstrap 5.2, and I followed the instructions in the Bootstrap documentation to add tooltips. However, I encountered an issue where the tooltips were not functioning as expected. When checking the ...

htmljquerycsstwitter-bootstrapbootstrap-5

As I scroll, I hope the texts will stay fixed against the backdrop image

Is it possible to make the #home section fixed to the background while scrolling, including all the texts and buttons? I envision it like having texts embedded in an image. The text is located in the middle left of the page (let's keep this as default ...

htmlcss

Creating a dropdown button in HTML table cells with JavaScript: A comprehensive guide

I'm attempting to create a drop-down button for two specific columns in my HTML table, but all the rows are being converted into drop-down buttons. I only want the "categorycode" and "categoryname" columns to be drop-down. $(document).ready(functio ...

javascriptjqueryhtml

Fixed bar on top, revealed only when the scroll attempts to conceal it

I have placed a menu on the top section of my website, but not at the very top. I would like it to stick to the top of the page when the user scrolls down and disappears from view. However, if the title is still visible, I want the menu to remain below it ...

javascriptcss

Assigning the Style property to an element using a string that includes HTML tags

My HTML string is populated with elements such as button, li, span, and more. I am looking to add specific styles to buttons based on their class name. For example, if button.btn { some styles } and button.btn-success { some other styles } O ...

javascriptjquerycss

Node Express app issue: Only one page is not having CSS applied

I've been working on a node application that utilizes Handlebars.js (hbs) as the html templating language. In my project, I have a CSS file stored in a public folder. The .hbs files within the 'views' folder successfully link to this CSS fil ...

cssnode.jsexpresshandlebars.js