Tips on arranging images in a horizontal layout

My images are appearing vertically instead of horizontally when I try to align them. What am I doing wrong?

 <div class="col-1 text-right pt-4">
                    <div class="row d-block">
                            <a href="" target="_blank">
                                <img src="{{ asset('img/icons/yyy.svg') }}" class="img-fluid" alt="">
                            </a>
                            <a href=""   target="_blank">
                                <img src="{{ asset('img/icons/yyy.svg') }}" class="img-fluid" alt="">
                            </a> 
                            <a href=""   target="_blank">
                                <img src="{{ asset('img/icons/xxx.svg') }}" class="img-fluid" alt="">
                            </a> 
                            <a href=""   target="_blank">
                                <img src="{{ asset('img/icons/xxx.svg') }}" class="img-fluid" alt="">
                            </a> 
                    </div>
 </div>
htmlcssbootstrap-4

Answer №1

When you include the class "d-block" in the parent element of links and images, it causes an issue. In bootstrap, the .row class equals display: flex, which defaults to rendering elements in a row.

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

Tips for creating a unique custom UI headline using ReactJS, CSS, and bootstrap

Looking to create a design that is responsive in ReactJS using Bootstrap or CSS if needed. I need assistance with placing separators between columns and ensuring the values of each label are aligned in the same column but on the next line. The layout shoul ...

javascriptcssreactjsflexboxbootstrap-5

retrieve all entries from a paginated grid

Currently, I am utilizing the datatable feature in bootstrap4 with a table that has pagination set to display 10 items per page. I have implemented a function to retrieve values from the table, however I am facing an issue where I am only able to retriev ...

javascripthtmljquerybootstrap-4bootstrap-table

Angular bindings expression involving HTML elements

Can HTML elements be inserted in an Angular expression? Let's explore a few examples. For instance, we might want to achieve something like this: <table> <tr ng-repeat="employee in employees"> <td>{{employee.firstname ? ...

htmlangularjs

The angular-ui modal is always visible from the start

I'm currently referencing this Angular recipes page for guidance on implementing a modal dialog in my user interface. The suggested markup includes adding a button to one of my views. ... html for my view is here ... <button class="btn" ng-click=" ...

htmlangularjsangular-uiangular-ui-modal

There seems to be an issue with the on() function in jQuery when using mouseover

I am trying to implement a small popup box that appears when I hover over some text, but for some reason it's not working as expected. Can someone please help me troubleshoot this issue? My goal is to display the content from the "data-popup" attribut ...

jqueryhtmlcss

Scaling images proportionally using CSS (without the need for JavaScript, ideally!)

Is there a way to proportionally scale images using CSS? I'm looking for a solution where the image adjusts to the full container size, becoming larger or smaller based on the container dimensions. Additionally, I want the image to be displayed in th ...

htmlimagecss

Tips for positioning icons inserted using the :before method

Is there a way to center align an icon added using the :before method? Below is the current code snippet: <div class="button submit"> <a class="submit check_car_search" href="#" >Some Text</a> </div> CSS: .button a{ backgr ...

htmlcss

Is it possible in HTML to detect *any* changes made to an input, not just those made by the keyboard?

Let's consider a scenario where we have an input element like this: <input id="myInput" type="text" /> The question now arises, how can we detect when the value of this input is changed programmatically (such as through $("#myInput").val("new ...

javascripthtmldom

When hovering over an element, I must utilize a selector and reference a variable that was defined outside of the hover state in order to

Explaining this code may be a challenge, but I'll give it my best shot. Here's the code snippet: $('#navibar a').hover(function(){ var position = $(this).position(); var width = $(this).width(); $('#underliner'). ...

javascriptjqueryhtmlcss

Click event for altering text

Hey there, I'm new to HTML and could really use some assistance. My goal is to create 3 buttons that, when clicked, will change the text displayed next to them. For each button, I've included the following code: <a href="#" onClick="document ...

javascripthtmlbuttontextonclick

Inspecting the options within a dropdown menu to adjust a styling attribute

I am in the process of developing a website that features multiple select options for creating sentences. My goal is to detect when users are changing these options to form specific sentences, such as changing "I", "Am", "Blue" to reflect the color blue. T ...

javascripthtmljquerycssdetection

Methods to fill a data table cell

I have recently created a table and I am facing an issue in populating the tds cells using JavaScript. The data for the table is coming from the server. Here's my table: <table id="report" class="infoRecurso" id='testExportId' style="wid ...

javascriptjqueryhtml

Ways to enable smooth scrolling feature in Safari

I attempted to implement smoothscroll using a polyfill by adding the following code to the bottom of my body tag: <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e99a8486869d819a8a9b868585c ...

javascripthtmlcss

Creating a Curved Border with Clip Path in CSS

Hey there! I'm currently attempting to add a speech bubble at the bottom left using clip-path, but I'm struggling to adjust the pixels just right to achieve the clear and exact look I want. Can someone provide suggestions on how to accomplish thi ...

javascripthtmlcss

Tips for arranging two divs from a single column to display side by side on smaller screens instead of stacked on top of each other

My knowledge of CSS, HTML, and bootstrap is quite limited. I'm trying to figure out how to split a single column on a large screen into two columns on a smaller screen so that the content in two divs appears side by side instead of stacked on top of ...

htmlcssbootstrap-4

When a button is dynamically updated in Vue, the @click event handler seems to mysteriously vanish

I have a button within a modal that closes the modal and collects data from radio button selections. <button type="button" class="btn btn-primary" @click="getCheckedBoxes" data-dismiss="modal" id="productsMod ...

javascriptphphtmlvue.js

Issue with centering content using margin auto

Hello there, I've been dealing with a CSS issue lately. I'm trying to center my div tag on the page using margin-right: auto and margin-left: auto, but for some reason, it's not working as expected. I have looked for solutions online, but I ...

csshtmlcontainerscentermargin

Style the "focus" pseudo-class of an input element using Vue programmatically

Currently, I have been utilizing event listeners to manipulate the :focus pseudo-class of an input element: const element = document.getElementById("myElementID"); element.addEventListener("focus", (e) => { e.target.style.borderCo ...

cssvue.js

The media query in Bootstrap v4 does not seem to be functioning properly when using the device tool in

Utilizing a div with the Bootstrap classes: "d-none d-md-block", I anticipate the div to be hidden on smaller devices. Yet, while in Chrome Developer Tools and utilizing the device toolbar it seems to disregard the dimensions.. With Laravel version < 4, ...

bootstrap-4google-chrome-devtools

AngularJS: Error encountered when trying to assign a value to a read-only property in the ng-submit directive

I've been working on a personal project to practice angularJS, but I've encountered a problem that seems unsolvable to me. The issue arises when I try to utilize the submitLogin() function in my LoginCtrl.js file upon form submission. An error m ...

javascripthtmlangularjs