What is the best way to align text to the center in a bootstrap table?

Is there a way to center-align the text in this table? The text-center class doesn't seem to be working.

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e3c31312a2d2a2c3f2e1e6b706e706c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
  <tbody>
    <tr>
      <td>name</td>
      <td>supplier </td>
      <td><button>Delete</button> </td>
    </tr>
  </tbody>
</table>

htmlcssbootstrap-5

Answer №1

To center the text in each individual td element, you need to add the Bootstrap class: text-center. Another option is to create a custom CSS rule with td { text-align: center; }, which is a quicker and simpler solution compared to adding the Bootstrap class to each td separately.

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3c1ccccd7d0d7d1c2d3e3968d938d91">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
  <tbody>
    <tr>
      <td class="text-center">name</td>
      <td class="text-center">supplier </td>
      <td class="text-center"><button>Delete</button> </td>
    </tr>
  </tbody>
</table>

Answer №2

You should utilize the class name text-center.

<div class="text-center">
  I am centered
</div>


    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>

    <body>
    <div class="container text-center">           
      <table class="table table-striped">
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="573d383f3917322f363a273b327934383a">[email protected]</a></td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cda0acbfb48da8b5aca0bda1a8e3aea2a0">[email protected]</a></td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfd5cad3c6ffdac7ded2cfd3da91dcd0d2">[email protected]</a></td>
          </tr>
        </tbody>
      </table>
    </div>
    </body>

Alternatively, in CSS, include this in the parent container

display: flex;
align-items: center;

Answer №3

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped table-bordered table-dark table-hover ">
    <tbody align="center">
        <tr>
            <td>name</td>
            <td>supplier </td>
            <td><button>Delete</button> </td>
        </tr>
    </tbody>
</table>

add align="center" attribute to the tbody tag

Answer №4

Utilize CSS classes for styling, make sure to visit w3schools for information on the centertag

.class{text-align:center;}



<tbody>
          <tr>
          <td class="center">name</td>
          <td class="center">supplier </td>
            <td><button class="center">Delete</button> </td>
           
          </tr>
         
        </tbody>`

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

Struggling to fetch a basic form field input using node.js and express

Currently, I am delving into Node.js with express and web development. For my inaugural project, I aim to craft a directory listing application. In my quest, I stumbled upon a captivating HTML form. Here's a snippet of the form's code: <form a ...

htmlnode.jsexpress

Troubleshooting: Inline Styles not displaying Background Div Images in Next.Js

I am currently attempting to display images in a component by using a map and an external JS file to store the images as objects. I then loop through them to set each one as a background image for every created div. However, it seems like my current implem ...

cssreactjsimagenext.js

What is the significance of using "your-shop" as the action form without a file extension?

I've come across filenames (with file extensions) or URLs inside the action attribute of a form, but I have never seen code like this before: <form action="your-shop" name="shop_name_form" id="shop_name_form" method="post" onsubmit="return check_s ...

html

Having trouble making changes to FontAwesome CSS using jQuery?

I am currently working on an MVC project where I am using Ajax to update a specific section of a View that contains a FontAwesome 5 icon. The FontAwesome icons are set using CSS classes, so my initial assumption was that it would be simple to remove and ad ...

jquerycssfont-awesomefont-awesome-5

Create a stylish navigation dropdown with MaterializeCSS

Incorporating the materializecss dropdown menu feature, I encountered an issue where only two out of four dropdown menu items were visible. Here is the HTML code snippet in question: <nav class="white blue-text"> <div class="navbar-wrapper con ...

javascripthtmlcssmaterialize

The battle between nested flexbox heights and max-heights

Note: I am observing some unusual behavior on Chrome 72. FireFox 64 seems to be working fine! I am experiencing an issue with a nested flexbox. In the code snippet below, I have added an artificial XL height to .root.container in order to achieve the des ...

htmlcssgoogle-chromefirefoxflexbox

Encountering difficulties linking to a stylesheet or a script in an HTML file delivered by Express server

Currently, I'm facing the challenge of breaking down my Express app code into multiple files. Unfortunately, I am unable to utilize <link href> or <script src> for linking stylesheets or scripts. Below is the relevant snippet from my inde ...

javascripthtmlcssnode.jsexpress

store user settings in local storage

After writing some code with a link that toggles text visibility upon click, I now want to incorporate saving this state in web storage so that it persists upon page reload. As a beginner in JavaScript and HTML, this task has proven challenging for me. Th ...

javascriptjqueryhtmllocal-storage

CSS - Text and dropdown misalignment due to spacing issue

I'm looking to decrease the spacing between the text "Allow type of Compartment Option" and the dropdown box. Here is the code snippet being used: .cl-checkbox { padding-left: 20px; padding-bottom: 10px; padding-top: 20px; ...

htmlcssangularformsflexbox

"Varying hues on various displays: Exploring RGB values and CSS for video color

Recently, I designed a webpage with a background-color of #f4afac. The video embedded in this page also features the same background color throughout, creating a seamless blend with no visible edges. On one screen, the colors appear perfectly consistent. ...

csshtmlvideocolors

Display extensive text content in HTML for mobile devices

As I work on developing a web app, specific requirements must be met: Pages that can dynamically load large amounts of text (around 30-100 printed pages) in HTML using $.ajax based on complex functions The complete text must be loaded upfront and cannot ...

htmljquerydomweb-applicationsrendering

Columns that can be resized in a right-to-left (

Whenever I use RTL, the columns behave erratically when resizing... I have implemented colResizable. You can see an example here: http://jsfiddle.net/r0rfrhb7/ $("#nonFixedSample").colResizable({ fixed: false, liveDrag: true, gripInnerHtml: "<d ...

javascripthtmlcss

Having trouble retrieving the routeName as it consistently returns empty

I attempted to extract the routeName from the URL in order to apply a different class to the body's layout when on the /Category page. https://i.stack.imgur.com/J0hsp.png @{string classContent = Request.QueryString["routeName"] != "/ ...

htmlcssasp.net

CSS - Curved background image in the top left corner

Currently in the process of creating a website here. There is a postcode search div on the right side, and I am looking to round the top corner of it. I have decided to use images to achieve the rounded corners effect. My requirement is that any method us ...

cssrounded-corners

Generating a dynamic method for uploading multiple files

Is there a way to dynamically generate multiple upload forms upon clicking a button? I currently have code that allows for uploading one file, but I would like to be able to add additional forms for each file. In other words, if I need to upload 7 files, I ...

phpjavascripthtml

Is there a way to alter the text color using JavaScript on the client side?

Is there a way to change the color of a list item in a ul based on whether it is a palindrome or not? Here is the JavaScript file I am working with: function isPalindrome(text){ return text == text.split('').reverse().join(''); } c ...

javascripthtmlformsstylesevent-listener

Manipulate elements by adding and removing classes sequentially based on an array

Previously, some had difficulty understanding my question. I have an array of variables representing the ids of 5 divs. My goal is to change the color of each div sequentially for a brief moment before reverting back, mimicking the behavior of traffic ligh ...

javascriptjquerycss

Efficient jQuery Algorithm for Calculating Image Viewport Sizes Without Scrollbars

I am trying to create an image hover effect, but I am encountering an issue. When I hover over certain images, unwanted scrollbars appear, and I would like to find a way to prevent this from happening. It seems to be related to the viewport and calculation ...

javascriptjquerycss

A guide on using JSON data fetched with Javascript to apply CSS styling

I'm currently working on an HTML document with dynamic content that needs to adjust its styling based on data from Google Sheets. I've successfully loaded the JSON data, but I'm struggling to figure out how to dynamically change the CSS. Can ...

javascripthtmlcssjson

Tablet displaying incomplete background image

I am facing an issue with my background image only showing inside the content blocks, as you can see in the screenshot. I have a small fadeIn animation for the content, but nothing else special. Here is the CSS code I am using: .template_home { backgro ...

htmlcssimageipadtablet