Change the font weight of the elements.

I wanted to bold either the class "p-2 flex-myflex-item" or the Asp control Label (run at server).
What is the CSS code to implement that? I haven't decided which element to bold at this time but I'd like to know how to do that. Thanks!

        <div class="p-2 flex-myflex-item">Type:</div>
            <div class="p-2 flex-myflex-item">
                <asp:Label ID="Label1" runat="server" Text="Application"></asp:Label>
            </div>
            <div class="p-2 flex-myflex-item">Is Application in Use?</div>
            <div class="p-2 flex-myflex-item">
                <asp:Label ID="Label2" runat="server" Text="Yes"></asp:Label>
            </div>
            <div class="p-2 flex-myflex-item">
                URL
           <asp:Label ID="Label3" runat="server" Text="http:"></asp:Label>
            </div>
            <div class="p-2 flex-myflex-item">
                Server Address
          <asp:Label ID="Label4" runat="server" Text="FER-UB"></asp:Label>
            </div>
            <div class="p-2 flex-myflex-item">
                Server Address
         <asp:Label ID="Label5" runat="server" Text="Application"></asp:Label>
            </div

Open in new window

zachvaldezAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
I would advise against using one of the Bootstrap classes to target elements for custom styling - you could end up with unwanted side effects when you have other elements that share those classes but that you do not want bold.
Either
1. Add the bootstrap font-weight-bold class to the elements you want to target
https://getbootstrap.com/docs/4.1/utilities/text/#font-weight-and-italics

2. Use HTML tags to bold your text - put <strong> or <b> around the elements you want to bold - unless you want to switch bold on and off dynamically not sure what the rationale is for not using the HTML tags specifically designed to bold text

3. Put a container around the elements you want to bold so that you target just those elements
Example
<style
.bold-p-2-items .p-2 .flex { font-weight: bold};
</style>
....
<div class="bold-p-2-items">
   ... <!-- Your code here -->
</div>

Open in new window

Or if you want to target the labels
<style
.bold-p-2-items .p-2 .flex .label { font-weight: bold};
</style>
....
<div class="bold-p-2-items">
   ... <!-- Your code here -->
</div>

Open in new window

0
zachvaldezAuthor Commented:
Here's my class

.my-flex-item {
            background-color: gray;
            border: 1px dotted gray;
            height: 5px;
            font-weight: bold;
            color: blue;
        }
but it is neither turning into blue and bold
0
Julian HansenCommented:
Where is the my-flex-item class in the code you showed us - I only see flex-myflex-item - is this a case of finger trouble maybe?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

zachvaldezAuthor Commented:
Should be my-flex in first place. Typo  and Thanks
0
Julian HansenCommented:
I would need to see this in action - do you have a sample page or link that demonstrates the problem.

I am guessing that there is another style that is overriding - you need to make sure that the path to your target element matches any other path that may exist to that same element to ensure that you override the style AND your override must come after any other styles that need to be overridden
0
zachvaldezAuthor Commented:
Here's the style code
    <style>
        .my-flex-container {
            border: 2px solid #004d80;
            min-height: 400px;
            background-color: lightgoldenrodyellow;
            margin-top: 0px;
        }

        .my-flex-container-column {
            border: 2px solid #004d80;
            height: 2px;
            margin-bottom: 5px;
        }

        .my-flex-item {
            border: 3px solid;
            height: auto;
            font-weight: bold;
            text-decoration: underline;
        }
           .my-flex-item-2 {
            background-color: blueviolet;
            height: auto;

        }
        .container {
            padding-top: 15px;
            padding-bottom: 5px;
            height: auto;
        }

        .colorblue {
            color: blue;

        }

        .linethis {
            text-decoration: underline;
        }
    </style>

Open in new window

Here's a few HTML codes

        <div class="container">
            <div class="d-flex flex-row flex-wrap my-flex-container">
                <div class="p-2 flex-my-flex-item">
                    <i class="fa fa-key"></i>ServerID:
                </div>
                <div class="p-2 flex-my-flex-item2 colorblue">
                    <asp:Label ID="lblServerID" runat="server"></asp:Label>
                </div>
                <div class="p-2 flex-my-flex-item">
                    <i class="fa fa-server"></i>Server:
                </div>
                <div class="p-2 flex-my-flex-item2 colorblue">
                    <asp:Label ID="lblServer" runat="server"></asp:Label>
                </div>
                <div class="p-2 flex-my-flex-item ">Domain:</div>
                <div class="p-2 flex-my-flex-item2 colorblue">
                    <asp:Label ID="lblDomain" runat="server"></asp:Label>
                </div>
                <div class="p-2 flex-my-flex-item ">
                    <i class="fa fa-umbrella"></i>
                    User Name:
                </div>
                <div class="p-2 flex-my-flex-item2 colorblue">
                    <asp:Label ID="lblUser" runat="server"></asp:Label>
                </div>
                <div class="p-2 flex-my-flex-item ">
                    <i class="fa fa-globe"></i>
                    User Domain:
                </div>
                <div class="p-2 flex-my-flex-item2 colorblue">
                    <asp:Label ID="lblUserDomain" runat="server"></asp:Label>
                </div>

                <div class="p-2 flex-my-flex-item">
                    IP Address:
                </div>
                <div class="p-2 flex-my-flex-item2 colorblue">
                    <asp:Label ID="lblIPAddress" runat="server"></asp:Label>
                </div>

Open in new window


If possible, I'd like to control the rendering using elements my-plex-item and my-plex-item2
0
zachvaldezAuthor Commented:
I think I got it!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.