I'm having trouble displaying an inline SVG image/icon and text on the same line. Here's the code snippet:
.row.justify-content-left.icon1 {
padding-left: 260px;
padding-top: 36px;
}<div class="row justify-content-left icon1">
<div class="col-md-4 icon1">
<img src="images/icon/graph-up.svg" width="30px" class="img-fluid icon1" alt="">
<h5>INVESTMENT PLANNING</h5>
<p>This handout will help you understand how paragraphs.</p>
</div>
</div>Here's the solution...
To achieve the desired layout, you should split the image and text into two columns within the same row.
This can be accomplished by using the classes col-1 and col-11. According to Bootstrap's official documentation: Each row consists of 12 template columns, allowing for various configurations where elements can span a specific number of columns. The column classes determine how many template columns are spanned (e.g., col-4 spans four).
Hence, 1+11=12.
Please note: I have substituted your original image with a picture of a giraffe to demonstrate the outcome.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link href='https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5c7cacad1d6d1d7c4d5e5908b958b9588c7c0d1c497">[email protected]</a>/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
</head>
<body>
<div class="row justtify-content-left icon1">
<div class="col-1 icon1">
<img src="https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg" width="30px" class="img-fluid icon1" alt="">
</div>
<div class="col-11 icon1">
<h5>INVESTMENT PLANNING</h5>
<p>This handout will help you understand how paragraphs.</p>
</div>
</div>
</body>
</html>I currently have a project structured in the following way: There is an index page with a full layout Separate PHP files that are included in the index page Bootstrap is used in the index page, however, in some of the separate PHP files I also use jqgri ...
I have this code snippet in HTML: $(document).ready(function() { $("div.bhoechie-tab-menu>div.list-group>a").click(function(e) { e.preventDefault(); $(this).siblings('a.active').removeClass("active"); $(th ...
Hey there! I've been trying to implement scroll-snapping on my project but unfortunately, I couldn't get it to work. I tested it out on both Chrome and Firefox, but no luck so far. Here's the code snippet I've been working with, would a ...
Here's an HTML code snippet: <h1>Example title</h1> This is the corresponding CSS code: h1::first-letter{ display:none; } h1::before{ content: url(http://icons.iconarchive.com/icons/ariil/alphabet/32/Letter-E-icon.png); } I&apo ...
As a newcomer to ROR, I am currently using Ruby 6.1 and looking to incorporate a new feature announcement box into my web app to keep users informed about recent changes. The goal is for this announcement box to automatically pop up when accessing the logi ...
Trying to toggle the visibility of a div based on another div's input has proven to be quite challenging in this scenario. Here is the HTML setup: <div id="main-question"> <div class="form-group"> <div class="form-radios"> ...
One of my goals is to make the cancel button available only when at least one job is selected. Below is my HTML View <table> <tr ng-repeat="x in jobs" ng-class-odd="'odd'" ng-class-even="'even'"> <td style="widt ...
As a beginner, I am attempting to create a custom jQuery plugin for which I have a simple HTML form: <form id="registerForm" action = "somepage" method="post" class="mb-sm"> <div class="form-group"> <div class="col-md-12"> ...
I am currently experimenting with a bootstrap card using HTML, CSS, and Bootstrap. My main focus right now is on how to shrink the image when hovering over it. The .card-header-img has a fixed height of 150px that I do not want to modify. What I want to a ...
After testing multiple browsers, the site consistently works fine with Live Server. However, when accessed through Firefox or Chrome, my style.css fails to load completely. On Edge, an error message indicates that the file is missing. Below are snippets of ...
Currently, I am unable to find any examples on how to accomplish a specific task mentioned in the following link. If you have a tutorial with step-by-step instructions or a code project available, it would greatly assist me. Link: Evolution of WEB ...
I have a formatting object named typography that includes various styles. One common issue I've encountered is that the line-height property is consistently set to 135%. Anticipating that this might change in the future, I am looking for a way to cent ...
After searching for a solution on how to stretch the background image in HTML for this specific section of my website, I came across this code. However, despite implementing it, the desired effect is not being achieved. Can anyone spot what mistake I may ...
Currently, I'm working on developing a rule page for a game. The specific layout requirements dictate that the rules be presented in an ordered list without periods following each number: 1 Rule one 2 Rule two 3 Rule three To achieve this format ...
I have 2 divs. One is styled with float:left and has a width of 100px, making it red. The other div is green and has a margin-left:101px, but is not floated. Within the green div, I inserted another div with two floated elements: The outcome is as follo ...
My files for html, css, and javascript are structured within the /www/ directory in their own respective folders (/www/html, /www/css, /www/js). The web root is located at /www/www/ When using the readfile function in my PHP code like this: readfile(" ...
Given: Bootstrap 5.1 Visual Studio 2022 Professional Edition Blazor Server Application How do I modify the container to occupy the entire screen without any margins? <div class="container bg-primary"> Hello World! </div> Thi ...
I have a unique situation where I am integrating an angular directive into a dynamically-sized element. The directive itself is made up of an SVG which adjusts based on the size of the container. I am working on making sure the SVG automatically resizes an ...
I am currently utilizing a date and time picker that has the ability to display ['month', 'day', 'year','hour','minute','ampm']. You can find the source code here. Although everything is function ...
When using the standard bootstrap collapse tool, I encountered an issue: <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> ...