Unable to Apply Margin to Element within ASP.Net View Code Section

I've exhausted all my ideas and even searched Google without finding a solution.

<div class="col-md-12">
    <div class="card-header text-white" style="background-color:cornflowerblue">
        <div class="col">
            @if (User.Identity.IsAuthenticated && User.IsInRole("Admin"))
            {
                <a class="text-white float-right" asp-action="Edit" asp-route-id="@item.Id"><i class="bi bi-pencil-square"></i></a>
            }
        </div>

        <div class="col">
            <p class="card-text">
                <h5 class="card-title">@item.Name</h5>
            </p>
        </div>
        <p class="text-dark">@item.Price.ToString("c")</p>
    </div>
</div>
<div class="col-md-6">

My main goal is to make the bi-pencil-square icon float towards the right edge of the card header. I've tried using Bootstrap's float right and 

style="Margin-Right: 0px"
. I've experimented with setting styles on the a tag, on the enclosing div, and even on the i tag, but nothing has been successful.

Any suggestions from anyone?

htmlcssasp.net-coreviewbootstrap-5

Answer №1

I finally solved it. It turns out that the issue was resolved once I wrapped the two divs inside a row element.

<div class="col-md-12">
    <div class="card-header text-white" style="background-color:cornflowerblue">
        <div class="row">
            <div class="col-md-1 offset-11">
                @if (User.Identity.IsAuthenticated && User.IsInRole("Admin"))
                {
                    <a class="text-white" asp-action="Edit" asp-route-id="@item.Id"><i class="bi bi-pencil-square"></i></a>
                }
            </div>

            <div class="col card-text">                                    
                    <h5 class="card-title">@item.Name</h5>                                    
            </div>
        </div>
        
        <p class="text-dark">@item.Price.ToString("c")</p>
    </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

Showing information in a table on a webpage using JavaScript and HTML

After running a console log, I am presented with the following data: 0: {smname: "thor", sim: "9976680249", pondo: "10"} 1: {smname: "asd", sim: "9999999999", pondo: "0"} 2: {smname: "asd", sim: "4444444444", pondo: "0"} 3: {smname: "bcvb", sim: "78678967 ...

javascripthtmlhtml-table

What are some ways to align text both vertically and horizontally within columns?

How can I center text both vertically and horizontally inside two columns using Bootstrap 4? <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> <div class="row"> <div class="co ...

htmlcsstwitter-bootstrapbootstrap-4

What could be causing my border to spill over into the adjacent div?

Trying to set up the contact section of my portfolio but running into an issue where the border of one div is overflowing into the next. Here's a snippet of the code: //CSS .contact-cont { padding: 4rem 12rem 0rem; height: 90vh; ...

htmlcssreactjs

html interactive/expandable tree

I've come across this code which generates an HTML tree, but I'm facing an issue where the tree expands every time I refresh the page. What I want to achieve is to have certain branches expanded and others collapsed when the page is opened, depe ...

javascriptjqueryhtmlcss

Can you explain the significance of the symbol "<<<HTML"?

During my code reading, I came across the symbol <<<H.TML. My colleagues mentioned that it is often used to embed HTML within a PHP file. I attempted to gather more information on its usage but could not find much. Could someone please explain ho ...

phphtml

Issues with hover functionality in Javascript, CSS, and HTML

Seeking assistance with my JavaScript, HTML, and CSS development, I ran into an issue while trying to create a hovering function for my webpage. Despite my efforts, the links are not displaying anything when hovered over, and the divs meant for specific ho ...

javascriptjqueryhtmlcsshover

A guide on retrieving all the table data and displaying it in the user interface using templates in Django

I am working on a Django project where I have created a model named "Files" with fields such as Id (auto-generated) and file_name. My goal is to retrieve all file names from the database and display them as a list on the user interface. To achieve this, I ...

pythonhtmlcssdjangotemplates

Tips on hiding the menu toggler in PrimeNg

Struggling with PrimeNg implementation in my Angular project, I am unable to find a simple solution to hide the menu toggler. Allow me to illustrate my current setup in the first image and what I desire in the second. Let's dive in: View First Image ...

htmlcssangularsassprimeng

Transferring identification data between views within an application (AngularJS, NodeJs, HTML)

I'm working on an HTML page that lists users from MongoDB. The page allows for deleting and updating users. I am encountering an issue with the update button - I want a new HTML page to appear with a form when the button is clicked, capturing the user ...

javascripthtmlangularjs

How can I use JavaScript to show a div upon clicking an input element?

I am looking to make a block div visible when an input field is clicked. <input class="indifferent" type="radio" name="decision" value="indifferent"> Indifferent </br> <div class="input" style="display: none;"> Please assist with our com ...

javascripthtmlcssinputtags

SignalR's postback interrupts the functionality of jQuery actions

On my screen, I have a widget that updates data and changes its class based on server-side interactions. It also responds to mouse clicks. To notify multiple clients of updates simultaneously, I'm using SignalR. The problem arises when I wrap everythi ...

c#javascriptjqueryhtmlasp.net

The HTML required attribute seems to be ineffective when using AJAX for form submission

Having trouble with HTML required attribute when using AJAX submission I have set the input field in a model Form to require attribute, but it doesn't seem to work with ajax. <div class="modal fade hide" id="ajax-book-model" a ...

javascripthtmlajaxlaravel

How can we determine if the submit function in HTML5 is returning an error or not?

I have implemented HTML5 validation on my website. <form class="" id="myForm" method="post" action="#" > <input type="text" required /> <input type="submit" /> </form> <div> <input type="button" id="myButton" /></di ...

jqueryhtml

Transferring Data Between Two Forms

Is there a way to transfer data between two HTML forms? For example, let's say we have two forms: Form 1: Contains a field for name and a submit button. Form 2: Contains fields for name, email, and a submit button. I would like to be able to fill o ...

phpjavascripthtmlforms

Is there a way to adjust the font size of a select option?

Looking to customize the appearance of a select option dropdown list. Wondering if it's possible to change the font sizes of individual options rather than keeping them all the same? For instance, having the default: -- Select Country -- displayed a ...

csshtml-selectfont-size

As soon as I hover over my icon to enlarge it, I notice that my entire page starts to

Whenever I hover over my icon, the font size increases causing the div to expand slightly and move the page. This doesn't look great. How can I prevent the div from resizing when hovering over the icon? Here's my code: <div className="bg- ...

htmlcssreactjsreact-nativesass

Is there a way to generate a hierarchical list menu using strings?

Within an HTML Application (HTA), I am utilizing vbscript to retrieve a list of subnet locations which is output as text in the following format: Chicago Denver Dallas Dallas/North Dallas/South Dallas/West Dallas/West/Building1 Dallas/West/Bu ...

javascriptjqueryhtmlvbscripthta

Can anyone tell me how to retrieve the value of {{org}} in this situation?

<head> <title>My Unique Page</title> </head> <body> <input type="text" ng-model="selectedOrg" ng-show="!isSuperAdmin" readonly /> <select id="nameOrg" ng-model="selectedOrg" ng-cha ...

javascriptjqueryhtmlangularjsfunction

The React Bootstrap modal refuses to fully close no matter how many times I click away or even on the close button

I am facing an issue with a modal in my React component. When I open the modal, it does not completely close when I try to click away or hit the close button. The backdrop disappears but the modal itself remains on the screen. (Screenshots attached for r ...

cssreactjsreact-bootstrap

The Surprising Nature of <div> when containing <a> (anchor tags)

There are 3 div elements on a page. div { display: inline-block; margin: 10px; width: 200px; height: 200px; background-color: #333; color: white; text-align: center; } <div></div> <!--Div ...

htmlcss