What is the best way to create a responsive layout using bootstrap or HTML and CSS without relying on JavaScript?

Explaining the issue in words is a bit challenging for me as English is not my first language. Please take a look at the image I have linked below for a better understanding of my problem.

https://i.sstatic.net/68zan.jpg

Currently, I am utilizing bootstrap 4, but if accomplishing this using pure CSS and HTML is possible, that would also work for me. The problem lies in the variation of word counts in the titles and paragraphs of each column card. However, it is imperative to achieve a consistent layout.

All titles should align at the top and be on the same line.
All paragraphs should align at the top right after the title and be aligned in the same horizontal line.
All buttons (green squares) should align at the bottom of the card.

I have utilized min-height in CSS to address this issue. However, when dealing with short titles and paragraphs, the user interface does not appear optimal.

Please provide guidance on how to tackle this challenge. Thank you in advance.

Answer №1

In my opinion, in order to accomplish this task, you will need to merge Bootstrap card with Flexbox. Alternatively, you could solely utilize flexbox and insert the element into each flexbox while applying justify-content: flex-start; and align-content: space-between;.

Answer №2

If your paragraph overflows its height, consider adjusting the overflow properties or using @media queries for window widths over 992px.

Learn more: https://www.w3schools.com/css/css3_mediaqueries_ex.asp

https://www.w3schools.com/css/tryit.asp?filename=trycss_overflow_intro

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

Toggle button to create a fade in/out effect

Below is the HTML code snippet: <html> <head> <Script type = "text/javascript" src = "CprMdlrSrch.js"></Script> <link type="text/css"rel="stylesheet"href="CprMdlrSrch.css"/> </head> <body> <div id=" ...

javascript html

What is the proper way to generate an iframe with a width set to "100%" or left empty, rather than width = "100"?

I am currently utilizing vimeowrap to iterate through a playlist of videos. I would like the iframe that is generated by vimeowrap to have either a width and height set to "100%" or nothing at all. For more information on Vimeo Wrap, visit: To see my tes ...

javascript html json vimeo

Ways to ensure a <div> element adjusts its height based on inner content dimensions

When using buttons in a chatbot that have text which changes based on selected options, I've encountered an issue where the text length sometimes exceeds the button's space. I'm looking for a way to make the containing div automatically adj ...

css bootstrap-4 flexbox vue-component vuejs3

Despite using twitter bootstrap, the elements on my webpage are still overlapping one another

While implementing Twitter Bootstrap on my website, I encountered a problem where elements start overlapping if the window size is reduced. This issue does not look appealing, and I expected Twitter Bootstrap to ensure that my website is fully responsive a ...

html css twitter-bootstrap

Is there a way to display one of the divs in sequence each time the page is reloaded?

Is there a way to display the divs sequentially when the page is refreshed? For instance, on the initial load, only div 1 should appear, and with each refresh it should cycle through divs 2, 3, 4, and 5 before starting over. Below is an example I'm c ...

javascript html jquery

Hosting images with an online service on jsfiddle: A guide

Exploring the world of HTML canvas and honing my skills in HTML and CSS through jsfiddle, I am eager to incorporate my own images. While sites like Google Drive provide free image hosting, I wonder if I can utilize them with drawImage(); Is there a way to ...

javascript html image

Leverage the power of HTML5 localstorage in order to maintain the toggle state of jQuery even

After discovering the HTML5 "localstorage" function, I decided to try implementing it in combination with jQuery toggle to keep a div in its most recent state even when the page is refreshed. It seems like a more modern alternative to using cookies. Howeve ...

jquery html local-storage

Triggering a click event on two separate modal divs

I am encountering an issue regarding click events on various modal divs. I have a modal div 'A' that displays an overlay div with specific information. This div is shown by clicking a button labeled A. Therefore, if this overlay div is displayed ...

events html click overlay

The most recent iteration is replacing the previous results on the web

After reviewing the previous question, I have made some adjustments and added additional functionalities. In the previous scenario, the loop was iterating for multiple IPs and a single command. Now, I want the loop to iterate for multiple IPs and multiple ...

python html django

Unexpected failure in retrieving data with Javascript Fetch

I'm attempting to create a login form that retrieves data from another website, but I keep encountering an error that says Error: Failed to Fetch Upon inspecting the code, I can't seem to identify any issues, but it's possible that the prob ...

javascript html node.js json express

Converting numerical values into currency format using Angular

Can anyone provide guidance on how to format a number received from the API as currency in Angular 15? This is what my HTML currently looks like: <thead class="fixed-top cabecalhoTabela"> <mat-card-header> & ...

html angular format angular15

Troubleshooting Problems with display:table and display:table-cell Alignment in Internet Explorer Versions 7 and 9

I have been struggling with the layout of a website that contains multiple columns. After extensive work, I believed I had everything properly aligned. Adobe BrowserLab seemed to confirm this, aside from various issues in IE6 and IE7 which I decided to ove ...

html css internet-explorer css-tables

JavaScript: Modify the dropdown class with a toggle option

Hi there, I'm currently facing a small issue and I could really use some assistance. I have a dropdown menu with two selection options - "green" and "blue", and I need to toggle a class based on the selected option. If you'd like to take a look, ...

javascript jquery html css drop-down-menu

The jQuery datatable offers a convenient date function that allows for date manipulation in milliseconds format

Recently, I have been working on updating the task owner ID using a lookup field selection in my code. The tasks are displayed based on the selected date from a datepicker value under the query in the controller. However, I encountered an issue where the a ...

javascript jquery html datatable

Struggling to locate the correct path for the CSS file in Express and Handlebars

As part of a student exercise, I am attempting to access an API containing information about presidents and style them using CSS. However, I am facing issues with linking the style.css file. I have tried various methods to change the path and public path ...

css node.js express

Exciting animation in sidebar links text during toggle transition animation running

As the sidebar collapses, the text adjusts to its width in a choppy transition I'm seeking a way to display the text only when it fits perfectly within the sidebar without breaking into two lines I want the text to appear only after the collapse tra ...

javascript html css twitter-bootstrap bootstrap-5

Organize items without consideration of their dimensions

I am in the process of creating an alphabetized list of categories, from A-Z. I am utilizing ul and li elements to achieve this. My goal is to have the elements displayed consecutively, regardless of their height. While my current code successfully arrange ...

css

Utilizing Ajax to update the login form without reloading the page and displaying any errors

I have created a login form that utilizes ajax to handle login errors such as "incorrect password" from my login.php file. Instead of reloading a new page with the error message, it now displays the errors on the same login form, which is working perfectly ...

javascript php jquery html ajax

HTML: Checkbox not responding to unchecked value... malfunctioning

I am encountering an issue with setting the Checked / Unchecked value of a checkbox. The problem I'm facing is that when the checkbox is unchecked, it returns an empty string. Any thoughts on how to solve this? Here's what I have done so far: ...

java html bootstrap-4 thymeleaf

Utilize jQuery to choose a specific tab

I have implemented a jquery tab in my UI. I want to have the second tab selected when the page loads, instead of defaulting to the tab with the "Active" class. Here is my HTML tab code: <div class="typo"> <div class="container-fluid"> ...

javascript jquery html

CSSer Q&A