Ensuring that two columns in Bootstrap 3 have equal heights while including padding

I would like to achieve this design without using JavaScript. Here is a screenshot for reference:

This is what I have created so far using Bootstrap 3. The CSS is inline due to the use of less, which makes it easier :)

HTML

 <section class="container-fluid" style="background-color:Red;
  background-size: cover; padding-top:145px; padding-bottom:145px;">
    <div class="container">
      <div class="row">
       <div class="col-md-6">
       <div class="element" style="background-color:white;  opacity:.90;
  -moz-opacity:.90; 
  filter:alpha(opacity=90); padding-top:20px; padding-bottom:20px; margin-top:20px; margin-bottom:44px; margin-right:15px; padding-left:15px;">
              <h2  class="color-brand">HEADING 2</h2>
              <p class="color-grey">Hello Mate</p>
            </div>
            </div>
   <div class="col-md-6">
        <div class="element" style="background-color:white;  opacity:.90;
  -moz-opacity:.90; 
  filter:alpha(opacity=90); padding-top:20px; padding-bottom:20px; margin-top:20px; margin-bottom:44px; margin-right:15px; padding-left:15px;">
              <h2  class="color-brand">HEADING 2</h2>
              <p class="color-grey">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
            </div>
          </div>
</section>

Here is the working jsfiddle link:

http://jsfiddle.net/D9tc4/

htmlcssheighttwitter-bootstrap-3css-tables

Answer №1

To create a unique spacing effect, try utilizing a negative margin in your CSS code like so:

.box{
    padding:10px;
    margin-top: -20px;
    padding-bottom: 30px;
}

Check out the live demonstration here: http://www.example.com/demo123

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

Place the text within the contenteditable body of a frame at the specific caret position

Within my iframe object, there is a contenteditable body. I am trying to paste text or HTML elements at the caret position. However, when I attempted this code snippet, I encountered an error message saying Cannot read property 'createRange' of u ...

javascriptjqueryhtmlcontenteditable

Step horizontally to scroll varying amounts

On my webpage, I have implemented two buttons to scroll left and right. When these buttons are clicked, the page should move left or right by the width of each individual div (since they all have different widths). I am unsure if this functionality can b ...

jqueryhtmlscroll

What causes Windows 7 users to consider the VS Code website unsafe?

What causes Windows 7 users to view the VS Code website as unsafe? Visit the image link here ...

html

Initiate a fresh start with an automatic input reset

When you perform an action in the first id = "benodigheden", I believe there should be a specific outcome that then triggers a second rule for id = "benodigheden". However, I have been unsuccessful in finding information on this topic online. It seems like ...

javascriptphphtmlcss

Tips for transferring a double value from HTML to PHP

I need assistance in transferring a Double value (for example, 10.9) from an HTML file to PHP. Below is the HTML code I'm working with: <form action="AddProduct.php" method="POST" target="_self"> <table> ...

phphtmlebay-api

No visible changes from the CSS code

As I create a small HTML game for school, I'm facing an issue with styling using CSS. Despite my efforts to code while using a screen reader due to being blind, the styling of an element isn't being read out as expected. The content seems to be c ...

javascripthtmlcssng-animatescreen-readers

Transmit form data via Ajax request

Thank you for your interest. I am looking to retrieve $_POST['Division'] from a dropdown list: <select name="Division" onchange="setImage2(this);"> <option value="1">Bronze</option> <option value="2">Silver</op ...

javascriptphpjqueryhtmlajax

When selecting an option triggers a pop-up in JavaScript

Implementing javascript and HTML. Consider this example: <select name='test' > <option value='1'> <option value='2'> <option value='3'> </select> If the user selects optio ...

javascripthtmlselectpopup

Enhancing user experience with jQuery tooltips

Having trouble adding a tooltip to a glyphicon. The JSFiddle example provided does not work for me as I am using jQuery to create the HTML elements like this: var trashIcon = $('<i>').addClass('glyphicon glyphicon-trash'); How ...

javascriptjqueryhtmlcss

Achieving a 100% height sidebar that remains visible on the screen at all times in Bootstrap

Looking to achieve this specific layout: I want the left col-md-3 to maintain a consistent 100% height and always be visible on the screen - it's going to be a menu. The right side should function normally with scrolling capabilities. Appreciate any ...

csstwitter-bootstrap

Ways to configure a select-multiple element to send data as an array

I am experiencing an issue with a form I have set up. Here is the current code: <form method="post" action="action.php"> <select id='select' multiple='multiple'> <option value="1"> Option1 <option> ...

phphtmlformsselect

Guide to adding a CSS class to an Ionic2 toast

i found a helpful resource on applying cssClass to my toast component. within my HTML, I have buttons: <button ion-button (click)="presentToast()"> toast</button> Here is the code snippet from my .ts file: presentToast() { let toast = t ...

cssangularsassionic2toast

Using mobile devices for multipart forms: managing actions that appear upon selecting a file input

My website features a multipart form where users are required to upload images. <form method="POST" encType="multipart/form-data" action="/uploads" id="forminho"> <div className="btn btn-success" id="submitFileBtn"> Select Image ...

htmlformsmobilemultipartform-data

Issue: Troubile in fetching CSS file from CDN and using local copy as fallback, What is the solution?

I previously inquired about this issue, however, I did not receive a satisfactory solution. Therefore, here I am asking again for your assistance. I am attempting to retrieve my CSS from an external CDN service, such as http://cdn.example.com/. This scrip ...

phpcssfunctionexternal

Incorrect form element style is only visible when contained within an unstyled HTML Details tag

A demonstration form control extracted from the Bulma CSS framework documentation performs as anticipated with Bulma 0.7.2 (most up-to-date version at the time of writing). However, when this form is contained within a standard html <details> tag, t ...

csshtmlbulma

Creating a responsive YouTube video embed within a div container with a fixed background image

Hello there, I'm currently working on positioning the YouTube Iframe on the background to make it look like the video is playing on a laptop screen. I also want it to scale down appropriately with the background image on different resolutions. The w ...

htmlcsswordpressiframe

Instructions for accessing and printing text from a nested ul tag with Selenium in Java

Hello everyone, I am currently learning about Selenium Automation and have created a website as shown below. Here is the HTML code: <!DOCTYPE html> <html> <head><title>Shop</title></head> <body> <ul> < ...

javahtmlcssseleniumselenium-webdriver

The "hover" effect is not activating on a carousel

I'm having trouble with the hover effect inside the orbit slider. It's not working at all. What am I missing here? Check out the code and fiddle: http://jsfiddle.net/Bonomi/KgndE/ This is the HTML: <div class="row"> <div class="la ...

htmlcsszurb-foundationorbit

What is the best way to retrieve user data and format the output using JavaScript into a structured form?

I am trying to achieve the functionality shown in this image: My goal is to extract user input from a form and display it on my webpage using JavaScript. Below is the code snippet that I have been working on. Code: function show(){ var ...

javascripthtml

Locate the chosen radio button within a group of <label> tags using the selenium webdriver

How can I iterate through all the label items within a div? There are multiple label tags with radio buttons inside. I'm using Selenium WebDriver and need to identify the selected radio button. Here are the two things I need to accomplish: Determine ...

javahtmlseleniumselenium-webdriverwebdriver