tips for maintaining text size without affecting the layout of surrounding elements

https://i.sstatic.net/xQLFr.png

I need to align the content of two divs in the same location, but the length of text in the first div is affecting the positioning of the body content. This is causing the two divs to look different. I want the body content of the second div to be positioned similarly to the body content of the first div. Please refer to the screenshot attached for clarification.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f4f9f9e2e5e2e4f7e6d6a3b8a4b8a4">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous"
    />
  </head>
  <body style="padding: 40px">
    <div class="d-flex flex-column border border-primary " style="max-width: 400px ; height: 130px ">
      <div class="w-100 bg-warning text-center p-2">
        <a href="">Somecontent from a map function here dsdsadsadsffffffff</a>
      </div>
      <div class="h-100">
        <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" onclick="alert('hey')" >
          <text class="bg-warning"> discussed </text>
          <div  onclick="alert('hey click me')">icons here</div>
        </div>
      </div>
    </div>


    <div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px ;  height: 130px;">
        <div class="w-100 bg-warning text-center p-2">
          <a href="">Somecontent from a map</a>
        </div>
        <div class="h-100" onclick="alert('hey')">
          <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2"  >
            <text class="bg-warning"> discussed </text>
            <div  onclick="alert('hey click me')">icons here</div>
          </div>
        </div>
      </div>

    <script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6964647f787f796a7b4b3e25392539">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Answer №1

Adjust your content by removing the fixed height and utilize the .py-3 class to add 1rem of vertical padding to your .h-100 div.

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

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afcdc0c0dbdcdbddcedfef9a819d819d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
</head>

<body style="padding: 40px">
  <div class="d-flex flex-column border border-primary " style="max-width: 400px; height: 140px;">
    <div class="w-100 bg-warning text-center p-2">
      <a href="">Content from a map function here dsdsadsadsffffffff</a>
    </div>
    <div class="h-100 d-flex justify-content-between align-items-center">
      <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 w-100" onclick="alert('hey')">
        <text class="bg-warning"> discussed </text>
        <div onclick="alert('hey click me')">icons here</div>
      </div>
    </div>
  </div>


  <div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px; height: 140px;">
    <div class="w-100 bg-warning text-center py-3">
      <a href="">Content from a map</a>
    </div>
    <div class="h-100 d-flex justify-content-between align-items-center" onclick="alert('hey')">
      <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2 w-100">
        <text class="bg-warning"> discussed </text>
        <div onclick="alert('hey click me')">icons here</div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9994948f888f899a8bbbced5c9d5c9">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>

</html>

Answer №2

If you prefer not to adjust the height, your options are to either truncate the text or increase the width of your elements.

<!DOCTYPE html>
<html lang="en>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap demo</title>
    <link
      href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="197b76766d6a6d6b7869592c372b372b">[email protected]</a>/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous"
    />
 <style>
span {
 width : 100%;
 word-break: break-all;
 overflow: hidden;
 position: relative;
 display: block;
 text-overflow: ellipsis;
 white-space: nowrap;
 
}
</style>
  </head>
  <body style="padding: 40px">
    <div class="d-flex flex-column border border-primary " style="max-width: 400px ; height: 130px ">
      <div class="w-100 bg-warning text-center p-2">
        <a href=""><span>Somecontent from a map function here dsdsadsadsffffffff<span></a>
      </div>
      <div class="h-100">
        <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2" onclick="alert('hey')" >
          <text class="bg-warning"> discussed </text>
          <div  onclick="alert('hey click me')">icons here</div>
        </div>
      </div>
    </div>


    <div class="d-flex flex-column border border-primary mt-2 " style="max-width: 400px ;  height: 130px;">
        <div class="w-100 bg-warning text-center p-2">
          <a href="">Somecontent from a map</a>
        </div>
        <div class="h-100" onclick="alert('hey')">
          <div class="d-flex align-items-stretch justify-content-between pt-4 pb-2 px-2"  >
            <text class="bg-warning"> discussed </text>
            <div  onclick="alert('hey click me')">icons here</div>
          </div>
        </div>
      </div>

    <script
      src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671209150915">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous"
    ></script>
  </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

The press of the Enter key does not trigger the button

I'm facing an issue with a form that has just one field for user input and a button that triggers some jQuery to hide the login form when clicked. However, pressing enter after entering text causes the page to refresh... I'm starting to think th ...

javascriptjqueryhtml

"Modify hyperlink attributes to enhance security and optimize user experience

$("a[href*='youtube']").attr('rel', 'prettyPhoto'); Having some trouble targeting links on a page containing "youtube" in the URL. I'm trying to set their rel attribute to "prettyPhoto" so they open in a lightbox window. ...

javascriptjqueryhtml

What is the method to extract div text using Python and Selenium?

Is there a way to extract the text "950" from a div that does not have an ID or Class using Python Selenium? <div class="player-hover-box" style="display: none;"> <div class="ps-price-hover"> <div> ...

pythonhtmlseleniumweb-scraping

The HTML retrieved cannot be accessed by external JavaScript code

I've encountered a major issue. I'm using ajax to retrieve content in HTML format, but my main JavaScript file is unable to manipulate any retrieved elements - tags, classes, IDs, you name it. Is this normal? How can I work with the data once it& ...

jqueryhtml

Utilize Twitter Bootstrap 4 to organize menu items in neat rows

I would like my menu to be structured in rows rather than wrapping and breaking to the next line when there is no more space. For instance: https://i.sstatic.net/dInTx.png Currently, it looks like this: https://i.sstatic.net/QkVS6.png Even changing to ...

csstwitter-bootstraptwitter-bootstrap-4

Various web browsers (display: -webkit-inline-box;)

Recently, I encountered an issue with my CSS code: .tudo ul { width: 100%; margin: 0px; display: -webkit-inline-box; } Surprisingly, Mozilla Firefox does not recognize the following line: display: -webkit-inline-box; Is it possible to set d ...

cssbrowser

Troubleshooting the Ineffectiveness of the CSS Custom Property Url in Asp .Net

Working on styling some cards within an MVC project, I have a custom property in my CSS file called "--bg-img" which is defined as follows: background-image: linear-gradient(rgba(0, 0, 0, var(--bg-filter-opacity)), rgba(0, 0, 0, var(--bg-filter-opacity))) ...

cssasp.net-mvcasp.net-coreurlcss-variables

MaterialUI Box reigns supreme in the realm of background images

In my React component, I have a form that is structured like this: <Box display="flex" justifyContent="center" alignItems="center" style={{ minHeight: "100vh", backgroundColor: "gray", opacity: "0.8" }} > ... </Box> ...

cssreactjsmaterial-ui

Ways to display an icon upon hovering or clicking, then conceal it when the mouse is moved away or another list item is clicked using ngFor in Angular 7

Within a simple loop, I have created a list with multiple rows. When a row is clicked or hovered over, it becomes active. Subsequently, clicking on another row will deactivate the previous one and activate the new one. So far, everything is functioning c ...

htmlcssangular

Scale up each image with the use of Java script

I have a main container with three different sub-containers, each containing an image and text. I want to achieve the effect of zooming in on the image of the specific sub-container when hovering over it. Currently, when I hover over any sub-container, all ...

javascriptjqueryhtml

What is the best way to display an element once an input field with type "date" is populated with a value

Struggling to create a dynamic form that reveals additional fields when a date picker is used? I've searched for solutions, but everything I find involves complex validations and logic that exceed my needs. I've had some success with revealing e ...

htmljquerycssformsdate

Is there a way to set a max-width using a Pseudo class

I am utilizing a css tooltip that is linked to a span element in the following manner: <span class="mytooltip" data-mytooltip="Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here."> Has Tooltip </ ...

csspseudo-element

Ways to alter the color of a link after clicking it?

Is there a way to change the link color when clicking on it? I have tried multiple approaches with no success. The links on this page are ajax-based and the request action is ongoing. <div class="topheading-right"> <span> ...

javascriptjquerycsscakephpcakephp-2.0

What could be causing the loss of my <textarea> information in the $_POST submission?

I have been working on a script that takes form data and displays it in a PDF or another printable format. There is a "New Line" button at the bottom of the form, which when clicked adds a new line to the form and stores the previous line's data in an ...

phphtmlformspost

How can these lines be drawn in a simple manner?

I have been using the div tag to create a line, but I'm looking for an easier solution. If you have another method in mind, please share it with me. #line{ background-color:black; height:1px; width:50px; margin-top:50px; margin-left:50px; f ...

javascripthtmlcss

Make those Bootstrap links pop with rounded corners!

Can someone help me create round corners on a link? I've attempted to use this code, but have had no success. Here are all the different samples I have tried. I suspect the issue might be that I am trying to change a link using btn btn-success, and ...

bootstrap-4

Tips for setting HTML content in a text field using SOAP API in Tuleap

We are using the Tracker SOAP API to create fresh tracker artifacts. While making changes to an artifact in Tuleap, there is an option to choose between plain text and html in a dropdown menu for a text field. Our goal is to input html-formatted text into ...

htmlsoaptrackertuleap

How can I make my JQuery datatable span the full width of the screen, regardless of the resolution?

In my Rails application, I am using JQuery Datatable with the following code: <%= content_tag :table, role: :my_datatable, id: 'my_datatable', style: 'height:500px; overflow-y: auto;&apo ...

htmlcssdatatables

Problem with app-theme.html not being recognized within a custom element

While developing a web app with polymer, I encountered an issue with a custom element called side-bar. I have a separate file named app-theme.html where all the styles for the app are defined. However, when I moved the side-bar element into its own templat ...

htmlcsspolymerpolymer-1.0

What type of JavaScript scope is accessible by an anchor tag's href attribute?

My current query involves using an <a> tag to invoke a JavaScript function: <a href="javascript:doSomething();">link</a> In which scope does this JS function need to be defined in order to be reachable? Is declaring it globally necessar ...

javascripthtmlscopeanchor