Exploring the ways to center align text using bootstrap

I used Twitter Bootstrap to arrange text and image side by side, but I'm having trouble centering the text. Do you have any ideas on how to achieve this?

<div class="row">
    <div class="col-sm-1">
        <a href="ghfhg"><i class="fa fa-calendar" style="color: rgb(72, 168, 237); font-size: 32px; box-sizing: content-box; line-height: 80px; text-align: center; width: 80px; height: 80px; display: inline-block; overflow: hidden; border-radius: 50%; background-color: rgb(224, 231, 237);"></i></a>
    </div>
    <div class="col-sm-2">
        sdsad
    </div>
</div>

Even after trying text-center, I couldn't get it to work properly: see image here

jquerycssbootstrap-modalbootstrap-4

Answer №1

To achieve the desired outcome, utilize the Bootstrap 4 classes 

d-flex justify-content-center align-items-center
:

<div class="container">
  <div class="row">
    <div class="col-xs-12 d-flex justify-content-center align-items-center" style="height:80px">
      <a href="mylink"><i class="fa fa-calendar" style="color: rgb(72, 168, 237); font-size: 32px; line-height: 80px; text-align: center; width: 80px; height: 80px; display: inline-block; overflow: hidden; border-radius: 50%; background-color: rgb(224, 231, 237); margin-right: 5px;"></i></a>
      example content
    </div>
  </div>
</div>

View a live demonstration here: http://jsfiddle.net/8hPmR/

Answer №2

To center the text, simply add the "text-center" class to the parent element.

<div class="row">
    <div class="col-sm-1">
        <a href="ghfhg"><i class="fa fa-calendar" style="color: rgb(72, 168, 237); font-size: 32px; box-sizing: content-box; line-height: 80px; text-align: center; width: 80px; height: 80px; display: inline-block; overflow: hidden; border-radius: 50%; background-color: rgb(224, 231, 237);"></i></a>
    </div>
    <div class="col-sm-2 text-center">
        sdsad
    </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

What are some ways to conceal the API connection within a button?

I have a code that allows me to perform a certain API call with a link. Here is an example: <a class="btn btn-default" href="https://testapi.internet.bs/Domain/Transfer/Initiate?ApiKey='.$user.'&Password='.$pass.'&Domain=&ap ...

javascriptphpjqueryajax

Submitting a form using AJAX without specifying the form ID when there is a change

I have a unique setup on my page where a table is created with each cell acting as a form. The goal is for these forms to submit when the input value changes (onchange) without refreshing the entire page. An example scenario would be allowing users to ent ...

javascriptjqueryajaxdjangoforms

Is it possible for CSS div to have a height of 100% when placed within fluid parents

When the parent div's height is set to 100%, you can also set the child to 100% and it will function correctly. However, if the parent's height is determined by its content, the height attribute does not work as expected. Are there any effective ...

css

Send data to webpage via AJAX and display the output in a designated div

As I work on the development of a one-page website, my goal is to dynamically load a slider with project images whenever a project is selected from a list. Unfortunately, I have been facing difficulties in passing the value through various methods, as the ...

phpjqueryajaxslider

Show the page information directly on the current page instead of redirecting it to a different page

On my website (For example, Link1: http://localhost:8086/MyStrutsApp/login.do), there are multiple links available. Whenever a user clicks on one of these links, they are directed to another page (For instance, link2: http://localhost:8086/MyStrutsApp/AddB ...

javajqueryajaxstruts-1

Avoiding bootstrap modal from disappearing upon validation failure when submit button is pressed using PHP

Could somebody please help me figure out how to prevent a modal from closing when the user clicks the sign-up button under two different scenarios: If the input fields contain invalid data, I want to display a PHP error message If the inputs are valid, I ...

javascriptphpjqueryhtmlbootstrap-4

Steps to insert additional characters surrounding the innerhtml of an h2 element

After extensive searching, I still can't seem to figure this out. It's possible I'm overlooking something very obvious, and for that, I apologize. My current challenge involves adding two specific characters to multiple h2 elements. While I ...

javascriptjqueryhtml

Following the execution of the Ajax function in JavaScript, the functionality of the

My JavaScript validation function checks if an input value is empty. I now want to enhance it by adding a validation that ensures a special input is not being repeated. I have written a PHP function and utilized AJAX for this purpose. The AJAX part seems t ...

javascriptphpjqueryajax

Implementing Event Handlers Post-Infinite Scroll Refresh

I have incorporated the infinite scroll feature using a plugin that can be found at this website. This plugin helps in loading page content seamlessly. One jQuery event listener that I have set up is as follows: $('.like-action').on('click ...

javascriptjqueryinfinite-scroll

The functionality of the tree-view feature in NodeJs is experiencing glitches

My attempt at creating a Tree-view has hit a snag. The collapse icon is not being displayed as expected. Here is the code snippet I tried: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-treeview/1.2.0/bootst ...

javascriptcssbootstrap-4treeview

Is it possible to implement a jQuery function instead of utilizing an iframe? Iframe tends to have a longer loading time, so using a

Would it be possible to achieve the same functionality as an iframe using the onload function and trigger function in jQuery with a div or anchor tag? I'm looking for alternatives to iframes because they take too long to load. Here is the current cod ...

jqueryiframe

Is there a way to add Internet Explorer specific stylesheets to the Wordpress functions directory using enqueue?

I'm facing challenges setting up my Wordpress theme to be compatible with early versions of Internet Explorer. Most online tutorials have advised me to enqueue specific I.E stylesheets in the header, but this method has not been successful for me. Add ...

phpcsswordpress

Http post request failing to execute

I'm having an issue with an ActionResult that has the HttpPost attribute. It seems like I need this attribute when the user selects a date from a DateTimePicker. In my scenario, I have 2 DateTimepickers of type @html.EditorFor. These pickers correspon ...

c#jqueryasp.net-mvcdatepickerviewmodel

What is the best way to send an array to the jQuery $.ajax function?

I'm encountering difficulty passing an array named $numbers (e.g., 1,2,4) into the $.ajax function. For some reason, it's not being recognized and I'm unsure how to access this data on the subsequent page. Below is my code: <?php ...

phpjqueryajax

Tips for changing the state of a toggle button with JavaScript

I need help creating a toggle button. To see the code I'm working on, click here. In my JavaScript code, I am reading the value of a 'checkbox'. If the value is true, I add another div with a close button. When the close button is clicked, ...

javascripthtmljquerycss

`Strange behavior from Ajax on mobile and touch screen technologies`

In my application, I have implemented a dynamic form that allows users to live edit it by adding or removing input fields. However, I encountered an issue with validation where if a user made a mistake and did not fill something correctly, all newly added ...

jqueryajaxlaravelvalidation

Tips for retrieving information from a controller using AJAX technology?

I am currently using Laravel and have set up a controller to retrieve data from an external API. I have successfully fetched the data and displayed it in a select drop-down menu. Due to the size of the data, I would like to only fetch this result when a u ...

jqueryajaxlaravel

How can I correct the changing order of buttons when floating to the right?

When I align a few buttons to the right, the order of those buttons changes. I have included an image for reference. View Navbar Image This is the code I am currently using: .btn{ float: left; padding: 1.7em; text-align: center; display ...

htmlcss

Tips for creating a dashed border line that animates in a clockwise direction when hovering

I currently have a dashed border around my div element: .dash_border{ border: dashed; stroke: 2px; margin:20px; } My goal is to make the dashed lines move clockwise when my pointer hovers over the div element and stop moving ...

javascriptjqueryhtmlcss

The essence of a character undergoes a complete transformation once it is presented in

There seems to be an issue with the character "т", ascii code: 209 130 When this particular character is put in italics, its appearance changes drastically... Check out the т character in italics (take a look at the source code - it's fascinating) ...

htmlcsscharacterasciiitalics