I have a simple question. I currently have a button:
<button class="btn btn-warning" style="width: 20%; color: white">
<i class="fa fa-plus-circle">
<h5>
<strong>Add Branch</strong>
</h5>
</i>
</button>
And I want to change it from this:
https://i.sstatic.net/FYO1z.png
To something like this:
https://i.sstatic.net/SPjsg.png
Can anyone advise me on how to achieve this?
Thank you!
give this a shot
<button class="btn btn-danger" style="width: 30%; color: black">
<h2><strong>Add location</strong> <i class="fa fa-map-marker"></h2>
</button>
The reason the button text appears below the icon is because it is contained within an <h5> tag, which is a block element.
If you wish to maintain the styling of the <h5> tag but have the text appear on the same line, you can simply add the d-inline class to the h5 tag, transforming it into an inline element:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdbc1d9c1df">[email protected]</a>/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/fontawesome.min.css">
<body class="p-4">
<p>Original button with <h5></p>
<button class="btn btn-warning" style="width: 20%; color: white">
<i class="fa fa-plus-circle">
<h5>
<strong>Añadir sucursal</strong>
</h5>
</i>
</button>
<p class="mt-4">Button with <h5 class="d-inline">:</p>
<button class="btn btn-warning" style="width: 13rem; color: white">
<i class="fa fa-plus-circle">
<h5 class="d-inline">
<strong>Añadir sucursal</strong>
</h5>
</i>
</button>
</body>Using Javascript, I successfully translated a circle from the center of the canvas to the upper left. Now, my aim is to create a function that randomly selects coordinates within the canvas and translates the object accordingly. However, I'm encounter ...
I recently incorporated Vue Js into my main MVC application. I want to be able to bind a Vue Js v-model to dynamically loaded HTML from a partial view. For example, in my partial view, I have the following: <input type="text" id="firstNam ...
Currently, I am working on developing a legal document automation program for my company. However, I have encountered an issue during the final stages of completing this web application. For the layout and setup, I am using the default angular Dashboard l ...
I created a cool feature that takes users to a random link, but I currently have a large list of links and wanted to find a way for JavaScript to read them from a text file. The code I have tried so far is not working, and I have experimented with other s ...
I am looking to have the background color change randomly each time on a Django website. For example, I want it to be bg-success, bg-primary, bg-light, bg-dark... etc. Is there a way to achieve this? <div class="bg-success"> </div> ...
As a college student, I have completed multiple web development and design courses. Throughout the past few years, I have utilized various tools such as PHPStorm, Visual Studio Code, Notepad++, SublimeText3, and Atom. Although I don't necessarily hav ...
I'm curious about the excessive padding above and below the text in this fiddler box. http://jsfiddle.net/fZ6d7/1/ CODE <style> .simplebox { padding: 6px; background: #eee; border-radius: 8px; border: 1px ...
In the world of web accessibility guidelines, labels are typically associated with form controls like <input> or <textarea>. But what happens when dealing with complex Angular / React / ... components that function as form controls? Picture a ...
I am dealing with the following HTML structure <md-select id="testSelect" ng-model="objElements" ng-change="onElementChange()" name="objElements" placeholder="Select Stuff"> <md-option id="testOption" ng-r ...
I am working on a unique way to showcase a dynamic countdown date progression using Bootstrap 4 progress bar. The challenge lies in displaying the progress percentage based on a specific date input format from an admin. After retrieving the deadline date ...
The website's background image displays on all devices such as laptops and Android phones, but not on iOS mobile devices. I even resized the image to 768px * 365px, but it still doesn't work. .bg-img { position: absolute; left: 0; ...
I am currently working on setting up a form in asp.net with Bootstrap and I am facing an issue with incorporating a date/calendar picker for one of the input fields. Despite my efforts, all I can see is a plain input field with no functionality. The cale ...
I've been meticulously following the Google PageSpeed guidelines in order to optimize the performance of my website. Upon running an analysis, Google provides me with a score based on their set guidelines. There's one particular guideline that ...
Encountering a compatibility issue on IE8 (surprise, surprise) and here's what it looks like: The current setup involves products as list items with image and details: <li class="product ships-free on-sale">stuff</li> With corresponding ...
I recently added a favicon to my wordpress website, but for some reason it's not appearing on Chrome. If anyone could lend me a hand, I would greatly appreciate it! Any assistance would be wonderful, thank you! ...
Having just started learning about web scraping in R, I've encountered an issue with websites that utilize javascript. My attempt to scrape data from a specific webpage has been unsuccessful due to the presence of javascript links blocking access to t ...
I want to attach breadcrumbs to the top of the navbar. Currently, I am developing an application using Angular and Bootstrap 4. app.component.html <nav class="navbar navbar-expand-lg navbar-toggleable-lg navbar-dark bg-dark sticky-top" style="position ...
After stumbling upon this code that allows a menu to collapse when the user clicks on the minus sign, I noticed that it displays all the contents within the Main Item when the page first loads. My goal is to only show the Main Item when the page initially ...
Is there a simple way to extract data using dev tools and insert it into a fetch request? I am trying to make a POST request through the console, but I am struggling to correctly copy a token. I attempted to use querySelector but instead of finding the t ...
_Layout.cshtml: <head> <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> </head> <body> @if (HttpContextAccessor.HttpContext.Session.GetString("IsLoggedIn") == null) ...