Numerous hyperlinks cascading out of the lines

I'm struggling to keep two clickable divs side by side in my code. When I apply the link tag, the divs no longer stay in the same row. Can anyone help me fix this issue?

See my current code below:

<div class="container col-md-12 pt-5">
    <h1 style="font: Helvetica; font-weight: normal; font-size: 230%">Administrator Control Panel</h1>
    <hr>
    <div class="container col-md-12 row" style="height: 140px;">
      <!-- Sports Box -->
      <a href="" style="width: 100%; height: 100%;">
        <div id="Sport" href="" class="col-md-2 h-100 px-0" style="background-color: #167acc; border-radius: 10px;">
          <h3 class="text-white" style="float: left; position: absolute; top: 30%; left: 5%; transform: translate(-10%, -40%); margin:15px;">Sports</h3>
          <p class="text-white" style="float: right; position: absolute; top: 15%; left: 78%; transform: translate(-50%, -10%);">You have</p>
          <h3 class="text-white" style="float: right; position: absolute; top: 40%; left: 83%; transform: translate(-50%, -40%);">18</h3>
          <p class="text-white" style="float: right; position: absolute; top: 63%; left: 81%; transform: translate(-50%, -40%);">Sports</p>
          <div style="background-color: white; border:solid #167acc; border-radius: 10px; border-top-right-radius: 0px; border-top-left-radius: 0px; border-width:1px; position: absolute; bottom: 0; width: 100%;">
            <p style="float: left; margin:5px; padding-left: 10px; font-size: 75%;">Manage Them</p>
          </div>
        </div>
      </a>
      <!-- Options Box -->
      <a href="" style="width: 100%; height: 100%;">
      <div class="col-md-2 h-100 px-0" style="margin-left:5px; background-color: #5bba4a; border-radius: 10px;">
        <h3 class="text-white" style="float: left; position: absolute; top: 30%; left: 5%; transform: translate(-10%, -40%); margin:15px;">Options</h3>
        <p class="text-white" style="float: right; position: absolute; top: 15%; left: 78%; transform: translate(-50%, -10%);">You have</p>
        <h3 class="text-white" style="float: right; position: absolute; top: 40%; left: 83%; transform: translate(-50%, -40%);">18</h3>
        <p class="text-white" style="float: right; position: absolute; top: 63%; left: 81%; transform: translate(-50%, -40%);">Options</p>
        <div style="background-color: white; border:solid #5bba4a; border-radius: 10px; border-top-right-radius: 0px; border-top-left-radius: 0px; border-width:1px; position: absolute; bottom: 0; width: 100%;">
          <p style="float: left; margin:5px; padding-left: 10px; font-size: 75%;">Manage Them</p>
        </div>
      </div>
      </a>

      </div>
    </div>
  </div>

Here is the current outcome, and here is the desired outcome.

cssbootstrap-4

Answer №1

It seems like you are using Bootstrap row and column incorrectly. Remember, the correct order should be to use the container for a block, then create a row, and finally add the column. Make sure to run the code and view it on a full page. Feel free to comment if you need any further clarification.

Check out this link for more information about rows and columns in Bootstrap

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container pt-5">
        <h1 style="font: Helvetica; font-weight: normal; font-size: 230%">Administrator Control Panel</h1>
        <hr>

        <div class="row">
            <div class="col-sm-4" style="height: 140px;">
                <!-- Sports Box -->
                <a href="" style="width: 100%; height: 100%;">
                    <div id="Sport" href="" class=" h-100 px-0" style="background-color: #167acc; border-radius: 10px;">
                        <h3 class="text-white" style="float: left; position: absolute; top: 30%; left: 5%; transform: translate(-10%, -40%); margin:15px;">Sports</h3>
                        <p class="text-white" style="float: right; position: absolute; top: 15%; left: 78%; transform: translate(-50%, -10%);">You have</p>
                        <h3 class="text-white" style="float: right; position: absolute; top: 40%; left: 83%; transform: translate(-50%, -40%);">18</h3>
                        <p class="text-white" style="float: right; position: absolute; top: 63%; left: 81%; transform: translate(-50%, -40%);">Sports</p>
                        <div style="background-color: white; border:solid #167acc; border-radius: 10px; border-top-right-radius: 0px; border-top-left-radius: 0px; border-width:1px; position: absolute; bottom: 0; width: 92.3%;">
                            <p style="float: left; margin:5px; padding-left: 10px; font-size: 75%;">Manage Them</p>
                        </div>
                    </div>
                </a>

            </div>
            <div class="col-sm-4" style="height: 140px;">
                <a href="" style="width: 100%; height: 100%;">
                    <div class=" h-100 px-0" style="margin-left:5px; background-color: #5bba4a; border-radius: 10px;">
                        <h3 class="text-white" style="float: left; position: absolute; top: 30%; left: 5%; transform: translate(-10%, -40%); margin:15px;">Options</h3>
                        <p class="text-white" style="float: right; position: absolute; top: 15%; left: 78%; transform: translate(-50%, -10%);">You have</p>
                        <h3 class="text-white" style="float: right; position: absolute; top: 40%; left: 83%; transform: translate(-50%, -40%);">18</h3>
                        <p class="text-white" style="float: right; position: absolute; top: 63%; left: 81%; transform: translate(-50%, -40%);">Options</p>
                        <div style="background-color: white; border:solid #5bba4a; border-radius: 10px; border-top-right-radius: 0px; border-top-left-radius: 0px; border-width:1px; position: absolute; bottom: 0;width: 90.8%;">
                            <p style="float: left; margin:5px; padding-left: 10px; font-size: 75%;">Manage Them</p>
                        </div>
                    </div>
                </a>
            </div>

        </div>

    </div>
</body>

</html>

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

Which is better for React: Bootstrap or Material UI?

In my experience working on various projects, I have encountered the situation where I need to incorporate a Material UI component into a bootstrap component. Surprisingly, this integration has worked seamlessly and the user interface appears as expected ...

reactjsbootstrap-4material-ui

I noticed that on my checkout sections, the toggle feature causes them to fold up and then immediately fold back down. This behavior should only happen

Is there a way to make my checkout sections fold up once instead of folding up and down when using toggle? I have created a test case in jsfiddle: (no styling done yet!) http://jsfiddle.net/Wd8Ty/ The code responsible for the behavior is located in AMLRW ...

javascriptjqueryhtmlcss

Can anyone recommend any offline editors for HTML, CSS, and JavaScript similar to JSFiddle, jsbin, or codepen?

Is there an alternative to JSFiddle.net that allows users to experiment with Javascript, HTML, and CSS offline in a similar way? ...

javascripthtmlcss

The presence of '<!DOCTYPE html>' causes my website's content to compress

After including !DOCTYPE html, I noticed that the first section of my website is shrinking even though its height is set at 120%. I attempted various solutions from stack overflow like setting the height of HTML and body to 100%, but none of them resolved ...

htmlcssdomdoctype

Switch up the design on Bootstrap 4 navigation tabs

Trying to customize the appearance of the current tab in a nav-tabs setup has been a bit challenging. I've created a simple file to test this functionality. When a tab is clicked, the content switches correctly, but I'm struggling to apply specif ...

cssbootstrap-4

I am looking for a highly specialized jQuery selector that fits my exact requirements

Hello everyone, I'm encountering an issue with a jQuery selector. Here is the HTML code snippet: <div id="Id_Province_chzn"> <a href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1"> <span> + this.default_tex ...

javascriptjqueryhtmlcss

What methods should I employ to rectify this asymmetrical border?

Within my HTML and CSS table, I've noticed that the first column has a different height compared to the rest. It appears uneven with the columns on its right. Please execute the code snippet below. The specific block I'm referring to is labeled ...

htmlcss

Tips for creating a textarea element that resembles regular text format

I am working on creating an HTML list that allows users to edit items directly on the page and navigate through them using familiar keystrokes and features found in word processing applications. I envision something similar to the functionality of To achi ...

javascripthtmlcss

The background image for a pseudo element is not functioning as expected

After researching various solutions on Stack Overflow, I attempted to set fixed dimensions for the pseudo element (height: X px; width: X px;), but this is not an ideal solution for me as I require a scalable and responsive image that fits its parent eleme ...

htmlcss

Unique perspective on web design when accessed from a different laptop

Scenario : I am currently developing a mobile web version of my website Issue : While the design looks perfect when viewed on my laptop, it appears completely different and messy when opened on a friend's laptop. For instance: font-size i ...

htmlcssbootstrap-4ui-design

Add some pizzazz to your design using jQuery!

I have been working on a web application using asp.net c#. I have a div element where I applied the following style to it at the server side: spanNivelRiesgo1.Attributes.Add("style", "display:none; visibility:hidden"); Now, I have a radiobutton list and ...

c#jqueryhtmlcss

CSS and jQuery UI URLs are not resolving properly in MVC framework after deployment

Basically, the issue is that the url for an image in jquery-ui.css file does not resolve once the site is deployed. The website is deployed under the default web site in IIS7, causing the browser console to look for the image in a different location than e ...

cssasp.net-mvc-4

Navigate to the end of a container

Is there a method to automatically scroll to the bottom of a div when the page is loaded? I have attempted several solutions without success. If you have any insights, please share them. Thank you! ...

javascriptjqueryhtmlcssscroll

Utilizing border-radius specifically on the ul element to apply rounded corners to only the outer li items

I'm exploring a concept where I want to create a curved border around the list items, both on the outside and inside. Here are some examples: Right Check out the correct curved border here Wrong: See the incorrect curved border here Please note, ...

htmlcss

Keeping Materialize CSS color changes distinct from the NPM module: best practices

In my electron application, I am utilizing the npm module materialize-css (version 0.100-2). Since npm modules are not git-tracked, I have made changes to the SASS components within the following files: node_modules/ +-- materialize-css/ +-- sass/ ...

cssnpmsassmaterialize

Jquery vertical menu with a dynamic sliding animation from the right side to the left side

Hello everyone, I am looking to have my vertical menu slide from right to left instead of the typical top to bottom sliding that comes with using .toggle() in jQuery. Specifically, when the hamburger menu is clicked, I want the menu to slide out from right ...

javascriptjqueryhtmlcsshamburger-menu

What impact does the CSS float property have on line height and element positioning?

I'm facing an issue where I have a table cell with a button inside it. When I try to float this button, it not only moves horizontally but also changes its vertical position, shifting to the top of the line. For example: <table style="width: 100% ...

htmlcss

I'm not entirely sure how JQuery processes the .each() function and the (this) keyword

I'm still learning JQuery and trying to figure it out. Can you help me understand what's going wrong with my code below? I have multiple content blocks with classes .acc-0, acc-1, and so on. I want to show and hide the .plans-breakdown when the ...

jqueryhtmlcss

Can a Material UI Select element be made unresponsive to hover effects?

When a user hovers over an element, I want to achieve the following functionality: document.getElementById("dropdownCategory").disabled = true; <Tooltip arrow placement="right" title={props.description} > <FormControl id="dro ...

cssreactjsmaterial-ui

Achieve the effect of "background-attachment: fixed" using a div element

I am attempting to replicate a similar effect as seen here, which is accomplished using the CSS property background-attachment:fixed. However, I want to achieve this effect using div elements instead. For instance, could I apply this effect to an h1 tag? ...

javascriptjqueryhtmlcssbackground