I am looking to insert a link into each column, but unfortunately, the styling is becoming disrupted whenever I attempt to do so due to the constraints

Is there a way to add links to each column without disrupting the current styling? Apologies for the messy code, I am still new to this field.

<div class="row justify-content-end">
            <a href="#"><div class="col-md-2 py-5 ms-3 my-sm-2 cbi_1" id="cbi">
                <div class="col-txt-box text-center  text-dark text-uppercase">
                    Digital Creator
                </div>
            </div></a>
            <div class="col-md-2 py-5 ms-3 px-1 my-sm-2 cbi_2" id="cbi">
                <div class="col-txt-box text-center  text-dark text-uppercase">
                    graphic designer
                </div>
            </div>
            <div class="col-md-2 py-5 ms-3 px-1 my-sm-2 cbi_3" id="cbi">
                <div class="col-txt-box text-center  text-dark text-uppercase">
                    Web Designer
                </div>
            </div>
        </div>
htmlcssgridbootstrap-5styling

Answer №1

Instead of enclosing the entire row, only wrap the content with a link:

        <div class="row justify-content-end">
        <div class="col-md-2 py-5 ms-3 my-sm-2 cbi_1" id="cbi">
            <div class="col-txt-box text-center  text-dark text-uppercase">
                <a href>Digital Creator</a>
            </div>
        </div>
        <div class="col-md-2 py-5 ms-3 px-1 my-sm-2 cbi_2" id="cbi">
            <div class="col-txt-box text-center  text-dark text-uppercase">
                <a href>graphic designer</a>
            </div>
        </div>
        <div class="col-md-2 py-5 ms-3 px-1 my-sm-2 cbi_3" id="cbi">
            <div class="col-txt-box text-center  text-dark text-uppercase">
                <a href>Web Designer</a>
            </div>
        </div>
    </div>

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

The reverse of the alt text is displayed

Utilizing a right-to-left language with dir='rtl' on the body element. This causes the entire page to flow correctly from right to left. However, the alt text within images is showing up in reverse for some reason. Check out this jsFiddle link ...

htmlcssright-to-leftalt

Angular - CSS Grid - Positioning columns based on their index values

My goal is to create a CSS grid with 4 columns and infinite rows. Specifically, I want the text-align property on the first column to be 'start', the middle two columns to be 'center', and the last column to be 'end'. The cont ...

htmlcssangular

What could be causing the .text method to not retrieve text even when it is present?

Currently experimenting with web scraping using Selenium to extract the color of a particular dress. Despite finding the text content under the 'screen-reader-text' class when inspecting the website, my attempts at fetching it result in an empty ...

javascriptpythonhtmlseleniumweb-scraping

Activate Bootstrap Tooltips in Rails 7

Currently in the process of transitioning my Rails 7 application from Sprockets to the new jsbundling+esbuild method. Even though I believe I am following the instructions precisely, I am struggling to make Bootstrap's tooltip feature function properl ...

bootstrap-5ruby-on-rails-7jsbundling-rails

Hamburger must be used in order for the menu to be displayed

Whenever I visit the site, the menu remains hidden. However, when I resize the page and use the hamburger icon, the menu appears as expected. Even after resizing the page back to its original size, the menu continues to be visible. Refreshing the sit ...

htmlcss

Ensuring that jQuery(document).ready(function() contains the appropriate content

Recently, I've been attempting to integrate a javascript gallery into my WordPress site. However, I'm encountering some confusion regarding what needs to be included in the .ready(function) to successfully run the gallery. The original jQuery fun ...

javascriptjqueryhtmlcsswordpress

Troubleshooting: Issue with jQuery not retrieving the value of input:nth-child(n)

My goal is to dynamically change the price when the model number changes, requiring the id number and quantity to calculate it accurately. Here is the HTML code I have: <div class="col-sm-9 topnav"> <span> ...

javascriptjqueryhtmlcss-selectors

The :focus pseudo-class is failing to target the input element

I'm dealing with a simple input field of type text: <input matInput type="text" placeholder="{{placeholder}}" class="input-field" [ngClass]="{'error': hasErrors}" [readonly]="isReadonly&quo ...

htmlcssangular8

Is there a way to render an image onto a canvas using an input tag?

Looking to create an image preview using canvas? Upload the image with the input tag and watch it display on canvas. I've experimented with various methods such as using img tags, setting img src for canvas using img tags, and trying onclick function ...

javascripthtmlhtml5-canvas

Is it possible to toggle all parent targets in Bootstrap?

When trying to showcase my point, I believe it is best demonstrated by visiting Bootstrap documentation at https://getbootstrap.com/docs/4.0/components/collapse/ and viewing the "multiple targets section." In this section, you will find three buttons: togg ...

javascriptcss

In a React application, the input field unexpectedly loses focus after typing just one character

Has anyone encountered an issue with a dropdown menu causing input field focus to be lost after typing one character? I've attempted setting unique keys for each field, but it hasn't resolved the problem. For reference, here is the link to the p ...

javascripthtmlreactjsreact-hooks

Error: The column 'joinedactivities.searchact id = searchact.id' is not recognized in the 'on clause'

I keep encountering this particular error: Error: Unknown column 'joinedactivities.searchact id = searchact.id' in the 'on clause'. I have meticulously inspected the table names and even attempted to make modifications, but multiple err ...

phphtmlmysqlsql

What is the method for identifying the selected radio button that has been dynamically generated after clicking the submit button?

Despite this question being asked multiple times before, I am struggling to find a solution that fits my specific scenario. Initially, I have a static radio button that I create. The HTML code is as follows: <body> &l ...

javascriptjqueryhtml

:root variables not being recognized in SCSS and Vue3 with Vite

I am encountering an issue with setting variables in my root SCSS file, as they are not being recognized correctly. Within my Vite configuration, I have included the following to import my styling: css: { preprocessorOptions: { scss: { additio ...

cssvue.jssassvuejs3vite

Guide on aligning a popup next to the button that activated it using CSS and JavaScript

I am currently generating a dynamic quantity of divs, each containing a button that triggers a popup when clicked. I am attempting to position the popup below the specific button that activated it, but it remains static and does not move accordingly. <d ...

javascripthtmlcsspopup

What is the best way to exclude HTML tags from the innerHTML attribute?

Currently, I am in the process of developing a messenger application and facing an issue where my messages are not ignoring HTML tags. This is happening because I directly paste the input text into the innerHTML of the message. The code snippet responsible ...

javascripthtmltagsescaping

Extract time value from html datetimepicker input

Recently, I've been utilizing a datetime_picker that I found on the web to create a value for an html text input. However, I encountered a problem in separating the value into distinct date and time components. When using the date_picker, the TEXT inp ...

phphtml

Display a featherlightbox popup when the page loads

Well, here's the deal. I don't have any experience with wordpress php coding at all, but I can make basic adjustments using the wordpress admin. Now I've run into an issue. I tried to use the feather lightbox js, and below is a snippet of co ...

javascriptphpjqueryhtmlwordpress

Step by step guide on how to connect a stylesheet in CSS

Hey there, I recently attempted to link a style sheet in my HTML for the first time. Unfortunately, I encountered an issue where it didn't work. Here's the code I used: <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" /> W ...

htmlcssbackground

Alter the Header/Navigation to switch colors depending on the section of the website currently being viewed

I'm currently revamping my personal portfolio website and had an idea for a cool feature. I want the header/navigation bar to change color based on which section of the webpage it's in (the site is one page only). My initial thought was to add o ...

javascriptjqueryhtmlcss