Make all cells in bootstrap table appear in bold font

Is it possible to have normal text in the cells of a Bootstrap 4 table without bold formatting? Using font-weight doesn't seem to be working for me.

<div class="row col-md-10 px-4 py-3 ">
   <table id="ServiceTable" class="table table-hover table-striped">
            <tbody>
                <tr>
                    <th colspan="3">Title</th>
                    <td class="text-right">
                        <button type="button" class="btn btn-primary px-4 btn-sm">Learn more</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">date_isodate_set</td>
                    <td colspan="2">Thornton</td>
                </tr>
                <tr>
                    <td colspan="2">Hii</td>
                    <td colspan="2">Larry the Bird</td>
                </tr>
            </tbody>
    </table>
</div>

CSS:
#ServiceTable td {
    font-weight: 400;
}

https://i.sstatic.net/bFzqh.png

Head:

https://i.sstatic.net/F8kq2.png

Whole css:

https://i.sstatic.net/6JNJF.png

Answer №1

I discovered a solution. In the head tag of my code, I included a link for a Google font with a font-weight parameter set to 600 specifically:

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:600" rel="stylesheet">

Therefore, attempting to change the font-weight to this particular font will not work. It needs to be customized instead:

https://i.sstatic.net/BiUtW.png

An example of a customized link would look like this:

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&amp;subset=cyrillic" rel="stylesheet">

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

I have come across this building error, what do you think is the cause of it?

My attempt to launch my company's React.js project, downloaded from Tortoise SVN, is encountering an issue. PS C:\Projects\Old EHR> yarn start yarn run v1.22.19 $ next start ready - started server on 0.0.0.0:3000, url: http://localhost:30 ...

Unique symbols within HTML tags

Many times when the topic of HTML attributes is brought up, people are referring to the value of the attribute. However, I am interested in discussing the actual attributes themselves. Would you consider the following code snippet to be valid? <a href= ...

Set up Bootstrap4 in the default template of yii2

After following various guides, I attempted to add Bootstrap4 to the Yii2 basic template, but it didn't work as expected. What I tried: 1) Ran the command: composer create-project --prefer-dist yiisoft/yii2-app-basic // to install Yii2 Result: Yii2 ...

Positioning an anchor element over an image in Internet Explorer (IE)

Encountering an issue with IE9 (and 8) involving the positioning of empty anchor elements over an image. The anchors contain text, which is pushed off the page using CSS's text-indent property. Currently working on a website with promo panels display ...

Concealing the submit button until a file has been selected

How can I make the submit button invisible until a file is selected? <form action="upload.php" method="POST" enctype="multipart/form-data"> <input type="file" name="imageURL[]" id="imageURL" /> <input type="submit" value="submi ...

Embedding a file in a word document with a hyperlink

We are currently trying to access Word documents on our Intranet site. One of these documents contains an Excel Spreadsheet that we would like to directly link to, but we have been unable to find a solution so far. ...

show a different text when hovering over a table cell

I am working with a table where one column displays the employee ID, and I would like to show their names when hovering over it. Can someone assist me with this task? ...

Disabling the @import cache feature in LessCSS Assetic

I'm facing a minor issue that is robbing me of precious time. Currently, I am using the assetic plugin with the lesscss filter in my symfony2.1 project. The problem lies in Assetic not detecting changes in imported files when using the @import functi ...

What are some effective methods for overriding materialui styles?

Here is the CSS style for a checkbox in Material-UI that I captured from the console: .MuiCheckbox-colorPrimary-262.MuiCheckbox-checked-260 I attempted to override this style using the following code, but it was unsuccessful: MuiCheckBox: { colorP ...

What is the process for designing a CSS3 button?

Can someone help me with creating a button using CSS3 that looks like the one in the image? I attempted the code below. <style type="text/css"> .left, .right{ float:left; border-style:solid; width:0px; heig ...

Require assistance in adjusting a personalized dropdown menu and updating the selected value

I have created a unique custom dropdown feature as shown below: view image description here Upon selecting an option from the list, the main value will update and a label will float above it. view image description here $(".custom-dropdown-main").clic ...

XSL:include is failing to function properly

Here is the configuration I have set up: <?xml version="1.0"?> <xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:include href="top.xsl"/> <xsl:template match=""> Content will be placed here - i ...

Choose an element from within a variable that holds HTML code

I have a specific div element that I need to select and transfer to a new HTML file in order to convert it into a PDF. The issue I'm facing is related to using AJAX in my code, which includes various tabs as part of a management system. Just to prov ...

Unusual glitch involving padding

Recently, I created a basic search application using React and incorporating Bootstrap's Grid system. However, I encountered an issue where the entire interface shifts to the left by approximately 10px when four or more products are rendered. https:/ ...

When displaying content within an iframe, toggle the visibility of div elements

I'm attempting to toggle the visibility of certain page elements based on whether the page is loaded in an iframe. <script>this.top.location !== this.location && (this.top.location = this.location);</script> The above code succes ...

guide on implementing a horizontal scrolling/swipe navbar with Cordova

Currently, I am working on creating a "category list" with multiple items for a Cordova app. The initial approach was to use a simple HTML list, but unfortunately, it seems that my list is causing some unexpected behavior. Desired swipe navbar layout: ht ...

Using Flask to trigger a Python function that requires input parameters when a button is clicked

I am working on a Flask web application that includes a download button. Instead of triggering a JavaScript function, I want the button to execute a Python method. This Python method should take the recently modified HTML code from the webpage as input. H ...

Tips for adjusting the width of a Qt tooltip

In order to display a tooltip that shows a two-line text with bold and multicolor characters, I encountered an issue where the tooltip had a maximum width constraint and the text was being cut off. I attempted to calculate the width of the text and manuall ...

Create a row that has a centered heading and a button aligned to the right using Bootstrap 4

I'm currently working with Bootstrap 4 and React. I'm attempting to centralize a h4 heading while also aligning a couple of buttons to the right, all within the same row. The issue I'm facing is that the h4 heading is only centered within th ...

Issues arising from code that computes percentages

I currently have three boxes in my HTML template that are meant to calculate and display various values. The first box is calculating a score, the second box represents the total amount of points possible, and the third box is supposed to show the percenta ...