I'm working on a div that has the following markup:
<div class="col-sm-12">
<p class="bg-info">Basic Information</p>
</div>
Here's how it currently looks:
I want to add an 'Add /Edit' link to the right side of the div, so it appears like this:
I tried adding a paragraph tag with a link next to the existing content, but it ends up moving the new content below.
Since I am new to CSS, any help would be greatly appreciated.
Thank you in advance.
Best regards.
<div class="col-xs-12">
<p class="bg-primary float-start">Essential Details</p>
<a class="float-end">Modify/Include</a>
<div class="clear"></div>
</div>
<div class="col-sm-12">
<p class="bg-info">Essential Details <a href="#" class="pull-right">Add /Modify</a></p>
</div>
Check out Bootstrap Quick floats here
I'm assuming that you're using Bootstrap based on the classes you have incorporated.
Give this a shot:
<div id="main-container">
<div style="width:80%;float:left">
Essential Details
</div>
<div style="width=20%;float:right">
Insert/Update Regulation
</div>
</div>
<html>
<head>
<style>
.bg-primary {display: inline; float: left;}
.bg-secondary {display: inline; float: right; color: blue;}
</style>
</head>
<body>
<div class="col-md-12">
<p class="bg-primary" style="float:left">General Information</p><p style="float:right" class="bg-secondary">General Information</p>
</div>
</body>
<html>
Having an issue with my dot navigation and anchor links placement. I want the anchors to be vertically centered in the middle of the section, regardless of window size. Here's what I'm aiming for : For larger windows : https://i.sstatic.net/pK4 ...
One of the directives I am currently working on looks like this: app.directive('MessageChild', function($timeout) { return { restrict: 'E', scope: { pos: '=?', msg: '=' ...
I am working with a table structure like this: <table> <tr><td class="momdad"><i class='glyphicon glyphicon-cog'></i> Hello </td><td> Mom </td></tr> <tr><td class="momdad">< ...
I am trying to prevent one of the three divs inside a fixed top navbar container from sliding underneath another, causing the navbar to become taller. The code below is using Bootstrap and the issue is with the navbar-header div sliding underneath the he ...
My anime experiences glitches as the black container crosses the red, causing a decrease in duration. Is there a way to fix this glitch? I attempted to delay the changes until the red path is completed, but the glitches persist. delayInAnimeSub = ourVilla ...
When creating a webpage, I included a META tag like this: <META http-equiv="refresh" content="5;URL=http://www.google.com"> The issue is that mobile browsers do not support this meta tag. It redirects properly on web browsers, but not on mobile dev ...
I recently posted a query on show hide jquery table rows for imported xml data regarding how to toggle visibility of specific table rows using jQuery. Now, I am seeking advice on how to make the first 5 elements always visible within the same context. Belo ...
I'm trying to create a hover effect where an image appears and is clickable when hovering over an element, similar to what is seen on many websites. For example, I want to display a bin icon when hovering over an element by using the ::before pseudo-e ...
It has come to my attention that the browser remains silent when I use non-existent attribute names for HTML tags. For example: <!DOCTYPE html> <html> <head test1="abc"> <title test2="cba">My Sample Project</title> ...
I'm currently working on adding a search menu to the navbar in two different designs - one for screens below 767px and another for screens above 767px. Although I have been successful in expanding the search bar, I am facing issues with the correct p ...
Exploring how elements within a div can be monitored for changes made by the user (thanks to contentEditable), I created a sample page with the following setup: before_html = $("#example_div").children(); $("#differences_button").on("click", ...
When attempting to make my Jquery code more flexible, I decided to extract the selector and access it through a variable. However, despite creating variables for both selectors, neither of them seem to be functioning properly. I am confident that the issue ...
I am looking for a solution that requests users to upload 4 different files when filling out the form. Check out this example of one of the inputs: <div class="custom-file"> <input type="file" class="custom-file-input" accept="video/*" id="v ...
I am working with a table that has the following structure: html { width: 400px; } <table> <tr> <td>Description:</td> <td style="white-space: pre-wrap;"> Some text which could be quite long with some &apos ...
I can't figure out why my ajax request is sending to the same link instead of the specified url. It's only this ajax request on the entire page that is behaving strangely. Can anyone shed some light on this issue? $(document).ready(function(){ ...
Working on a project, I want to include Instagram profile pictures by embedding them. Although I have the image URL, I am struggling to integrate it into my HTML page. Take a look at this sample: This provided link displays the Instagram profile picture. ...
While Soundmanager2 is a useful app, many find the code to be overly complex and difficult to navigate. It almost seems as if it was purposely written in a way to confuse rather than clarify. Are there any recommended alternatives to Soundmanager2 that are ...
When I access Firefox version 17.0.1 and request document.body.getBoundingClientRect().top; on a simple site with no CSS styling applied, it returns an incorrect value. Instead of the expected 8, which is the default for the browser, it shows 21.4. However ...
When creating cards, I encounter a challenging issue. I am struggling to fill the background-color of the entire box content as I am new to HTML and CSS and unsure how to achieve this. Below are my codes. .box-container1 { display: flex; justify-con ...
Hello everyone, I could really use your assistance with a problem I'm facing. WebElement wb=driver.findElement(By.name("NavHeader1$tabs$ctl00$btnNavHeaderTab")); Actions act=new Actions(driver); act.moveToElement(wb).perform(); ...