What is the method to calculate row height in bootstrap framework?

I have limited knowledge of HTML and CSS, so I am struggling to address an issue on my website. Despite using jQuery and Bootstrap in my template, adjusting the stylesheet has not resolved the problem. The issue seems to be related to the line-height set by Bootstrap for rows, causing text overflow and shifting in subsequent rows.

The desired outcome is to align the left edge of items in each row without affecting the layout (see Figure 2).

Since I cannot upload attachments here, and I'm unsure which part of the code is causing the issue, I seek assistance with rectifying this alignment problem in the Andia template.

Thank you in advance for any help provided.

[Code Sample]

jqueryhtmlcsstwitter-bootstrap-2

Answer №1

Here is a suggestion. Feel free to add as much text as you'd like.

<div class="work-container">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 work-title wow fadeIn animated" style="visibility: visible; animation-name: fadeIn;">
                <h2>Check Out Our Latest Work</h2>
            </div>
        </div>
        // First Row.
        <div class="row">
            <div class="col-sm-3">
                <div class="work wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
                    <img src="assets/img/portfolio/work1.jpg" alt="Lorem Website" data-at2x="assets/img/portfolio/work1.jpg">
                    <h3>Impressive Lorem Website</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>

                    <div class="work-bottom">
                        <a class="big-link-2 view-work" href="assets/img/portfolio/work1.jpg"><i class="fa fa-search"></i></a>
                        <a class="big-link-2" href="portfolio.html"><i class="fa fa-link"></i></a>
                    </div>
                </div>
            </div>
            
            <!-- more columns of work items here -->

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

Answer №2

Have you considered using the "row row-eq-height" classes?

Instead of 

<div class="row"></div>
, try using 
<div class="row row-eq-height"></div>

Also, remember to include this CSS property in your custom styles:

.row-eq-height{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

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

What are the steps to establish a jQuery Cookie for a slideDown menu?

I have a dropdown menu that I want to remember its last state when the page is reloaded. To achieve this, I am using jQuery.cookie from here. This is my current approach: $("#menu h3").click(function(){ $("#menu ul ul").slideUp(); if(!$(this).next ...

jquerycookiesslidedownjquery-cookie

What steps can be taken to avoid the table row from getting hidden behind the table header?

I am aiming to implement sticky headers for a table using only CSS. You can refer to this link for guidance: Table fixed header and scrollable body Everything looks good when the page loads, but as soon as I start scrolling, a sliver of data appears abo ...

htmlcss

"Looking for a solution to the ESLint error related to 'no-unused-var' and Google Maps integration. How can I effectively resolve

I'm struggling with what seems to be a simple problem I tried adding /* export myMap */ or /* global myMap */ at the beginning of the script but I keep getting errors Code HTML <h1>My First Google Map</h1> <div id="googleMap" ...

javascripthtml

Is there a way to add ASCII art that can be seen in the Elements tab of the Dev tools window?

I need to showcase ASCII art within the Elements tab, not through console.log, when inspecting a webpage. Since I am working with React and can't access the final build generated on the server, where should I include this ASCII string for display? ...

htmlreactjsasciimarkup

Arranging inline-flex elements within a div container

I have been struggling to position two elements side by side within a single div, where the second element should be on the right side. <div className={classes.container}> <div className={classes.first}> First </div> <d ...

cssflexboxmaterial-ui

JavaScript for Audio: How to Play Sound

I've been struggling to make this play a sound in Firefox, IE, or Chrome. No matter what I do, it just won't work. <html> <head> <script type="text/javascript"> function playSound() { var audio = document.createElem ...

javascripthtmlaudio

Is it possible to navigate between jQuery EditInPlace fields using the Tab key?

Seeking advice on implementing tab functionality for a page with multiple jquery EditInPlace fields. The goal is to allow users to navigate between fields by pressing the tab key. Currently using the 'jquery-in-place-editor' plugin available at: ...

javascriptjquery

What is the best way to create a straightforward menu for my HTML game?

I have been working on a basic HTML game and it seems to be functioning more or less. I'm wondering if it's possible to create a simple menu with an image in the background and a "click to start" button within the same file. Any suggestions or ti ...

javascripthtmlmenu

I wonder about the origin of the text appearing on my website's search results page

Why are the meta tags description and title not showing up correctly on the site? They appear, but not with the content I specified. This website is built using React. Below is the meta tag code from the index.html file: <meta charset="utf-8" ...

htmlreactjs

Exploring Checkboxes in Hypertext Markup Language

Can anyone advise on the proper HTML input attribute to limit user selection in a list of checkboxes? Specifically, I want users to select no more than three out of five checkboxes without using radio buttons. Please provide solutions using only HTML and n ...

htmlinputattributes

Tips for choosing a dropdown option based on its class name in Selenium WebDriver with Java

Just starting out with selenium and currently I'm diving into it. My goal is to choose a value from a drop down menu. The dropdown has the class "ns-dropdown" and contains several options, one of which is Australian Dollar. Below is the HTML snippet: ...

javahtmlseleniumdropdownbox

Validation in ASP.Net to ensure the correct number of days between the arrival and departure dates

One of my project requirements involves checking the validation of the number of days entered between two date selectors (From & To Dates). The constraint is that the difference should not exceed 100 days. I'm considering using ASP.NET validators for ...

javascriptjquery.netasp.netvalidation

Tips for retaining the original text value even after clicking the submit button

import java.util.Map; import java.util.HashMap; import javax.servlet.ServletRequest; import javax.servlet.http.HttpServletRequest; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org ...

javajqueryhtmljsp

Step by step guide to showcasing images dynamically in user interface

My current project involves displaying a screen with an HTML table and an image. The HTML table is fully dynamic. The Code Working Process When the user loads a page (with a URL), I render an HTML table in different parts as the page loads. I retrieve al ...

javascriptjqueryhtmlcsshtml-table

Utilize JQuery to Extract HTML Elements

I'm working on developing a Chrome extension and one of my tasks is to extract specific text from the webpage I am currently visiting and store it in a variable. I have been attempting to achieve this using jQuery, however, none of the solutions I&apo ...

javascriptjqueryhtml

What is the best way to utilize require.js to load a custom script, ensuring it exports an object that can be readily accessed within my Backbone views?

I am currently utilizing require js to manage my Backbone application. I am looking to load a script named global (where I will store various miscellaneous functions that I want to utilize in specific Backbone views). Here is how I have configured requir ...

jquerybackbone.jsrequirejsunderscore.js

Something went awry when I tried to divide the HTML and CSS code

<div class="col-md-12" style=""> <div class="col-md-4 linkdetail" class="cursor"> <div class="col-md-12" style="margin-bottom:40px"> <img src="/img/product3.png" style="display:inline-block;width:100%;"> </div ...

htmlcss

Having trouble initiating an AJAX request

I'm currently facing an issue with inserting data into the database using AJAX. I have set up an ajax call to a servlet that is responsible for inserting data into the database. However, it seems like there might be an error in how I initialized the a ...

javascriptjqueryajaxservlets

Create dynamic underline or bottom border for justified text using TCPDF

I'm facing difficulties trying to apply this design to TCPDF, as shown in the attached image (taking into account TCPDF's limited html capabilities). There should be a dynamic underline based on field values. Fields with no text should have a de ...

phphtmlcsstcpdf

Innovative replacement for the horizontal rule element `<hr>` in HTML5

Currently, I am coding an HTML calendar using HTML5 and attempting to include a colored horizontal line. Although I have been utilizing the <hr> tag, I am facing difficulties in making most attributes function properly. Here is my desired style: &l ...

csshtmlattributes