Here is my HTML code using Bootstrap4:
<div>
<span class="d-inline-block">
<i class="fa fa-file-alt fa-3x text-primary"></i>
</span>
<span class="d-inline-block">Cadastre number: <strong style="font-size: 22px;">8741/0002:0014</strong></span>
</div>
Currently displays as:
https://i.sstatic.net/VUZSW.png
However, I need it to be inline like this example:
Could it look something like this?
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- code written below -->
<div class="d-flex flex-wrap">
<span class="align-self-center p-2">
<i class="fa fa-file-alt fa-3x text-primary"></i>
</span>
<span class="align-self-center d-inline-flex p-2 flex-column">Parcel Number:
<strong style="font-size: 22px;">8741/0002:0014</strong>
</span>
</div>By including the div class d-inline-flex, I was able to successfully achieve my goal.
I am looking to create a dynamic effect where three words slide in and out individually. The first word should slide in and out, then the second word, and so on. How can I make this happen? Here's what I've tried: HTML: <p class="fp-animate ...
I am currently using a hosting service to store the images that I include on my blogger platform. However, I have encountered an issue where blogger does not automatically fetch the image url to use as the thumbnail when the image is hosted externally. C ...
Here is a custom function in Codeigniter for uploading files: public function doctor_signup() { $this->load->library('encrypt'); $rand = time() . rand(0, 9999); if($_FILES["file"]["name"]!="") { $config['upl ...
Finally Got It to Work! After troubleshooting, I managed to fix the code on the first page and successfully link it to this second page. Despite using the same CSS and similar HTML, I couldn't figure out why the buttons were not displaying at all. Im ...
removeConnection(event) { let parentElement = document.getElementById('RemoveElement'); let childElement = document.getElementById(event.target.id); parentElement.removeChild(childElement); } Whenever I try to remove the child ...
I have a collection of buttons that I want to display in rows of two. I am looking for a way to set the specific width of each button and decide whether they should be aligned left, center, or right. Ideally, the outcome would resemble the following: http ...
Take a look at this code: .gallery { display: flex; overflow-x: auto; resize: both; background-color: rgb(200, 200, 200); padding: 10px; height: 200px; } .item { display: flex; flex: 0 0 auto; max-width: 100%; } .item img { max-w ...
After creating some graphics using Amcharts, I encountered a challenge in displaying the table of data (dataProvider) right below each graph on my HTML page. Despite searching extensively for a solution, I have been unable to find one. The table of data ...
So I have this Vuejs application that has three divs using CSS grid: a sidebar, a config panel, and a preview. I want to dynamically set the width of the preview div in pixels based on the current screen size and when the screen is resized. To give a bett ...
Recently, I delved into the world of Bootstrap 4 and decided to create a collapsing menu. Everything seemed to be working fine when I clicked the button and saw the content display perfectly. However, things took a turn for the worse when I tried to collap ...
I am working on looping through a JSON object and converting it into HTML. While I can iterate through all the objects in the JSON, I am having trouble extracting just the first object. var res = '[{"ID":"246","mobile":"samsung","feedback":"feedback ...
I can't figure out why my H1 is not visible. It seems to be hidden by a div. What's strange is that the parent div is visible when I change the background color to something other than transparent. Even an input tag within the same div displays c ...
Looking for some advice on implementing a "working hours" module. Just need something simple like: Monday: 10:00 - 18:00 ... Saturday: 11:00-16:00 with some additional info. I'm currently attempting to... <form id="working_hours"> <s ...
Please help! I've been struggling to get the <span> to appear behind the #sideBar using z-index: -3, but it's not working as expected.</p> body { margin: 0px; font-family: "Signika Negative", sans-serif; background-color: #25 ...
My goal is to customize my off-canvas menu in Foundation 6.3.1 so that it appears on desktop while displaying an accordion menu on mobile devices. On desktop, I want the off-canvas menu always visible (see example). For mobile, when the hamburger icon is ...
My code successfully implements the counter-increment feature, however I am looking to initiate the counter at 100 for the first section, and then at 200 for the next. Here is my current code snippet: Chapter>Section>Subsec1>Subsec2>Tit { ...
I'm having an issue with adding an image to my table. Whenever I place the img tag between the <td> tags, the content in the neighboring cell behaves as if there are <br> tags above it. I attempted to use display:inline-block, but it had ...
Initially, the code block appears as follows: <pre>test_line1 test_line2 test_line3 test4</pre> However, upon double-clicking, it displays as: <pre>test_line1 test_line2 test_line3 test4</pre> The line breaks are not being r ...
const studentNumber = $('#studno').val(); $(document).ready(function () { $('.go').click(function () { $('.inup').load('prochat.php', { studno: studentNumber }); }); }); I've ...