"Discrepancy in Alignment of Bootstrap's Dual Column Layout

Currently, I am in the process of designing a straightforward two-column layout. This layout will consist of one prominent image at the top followed by two columns underneath - one for images and the other for text.

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

However, I am encountering difficulties aligning the image column with the large image at the top. While I can apply a class with a -15px margin to adjust it, this causes misalignment on XS screen sizes.


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

If I decide to add another -15px margin specifically for XS screens, I then encounter issues that need fixing elsewhere. This seems like such a basic layout problem, leading me to believe that I may be making an error somewhere.

I would greatly appreciate any suggestions or guidance on what I might be doing incorrectly and how I should go about creating a two-column layout using Bootstrap 3?

For reference, here is the Bootply Link

htmlcsstwitter-bootstrap

Answer №1

The issue arises from the <div class="col-sm-12"> located in the lower box. There are two solutions available:

  1. Remove the div entirely
  2. Insert an extra <div class="row"> following the <div class="col-sm-12">

In this case, a nested grid was inadvertently created, violating Bootstrap's requirement of starting each new nesting level with a fresh <div class="row">

Reference: http://www.bootply.com/sh13QUw39Z

Answer №2

It's crucial to follow proper nesting when organizing columns in Bootstrap, as suggested by @bspellmeyer.

THE IMPORTANCE OF NESTING

The grid system operates through a container, followed by a row and one or more columns...

A 15px padding is allocated to the container, which the row counteracts with -15px of margin. Moreover, columns adopt a 15px padding that positions the content away from the container edges and establishes a uniform 30px gutter.

The concept of having 15px padding offset solely by negative row margins may seem peculiar, but it's actually fundamental for accommodating nested columns within other columns! Refer to the visual representation below depicting how nested columns, outlined in red, seamlessly fit inside their containing column without extra padding being added.

Rest assured, once this understanding solidifies, effortlessly controlling the grid layout exactly as desired will become second nature.

Answer №3

Make sure to include the following code:

.custom-left {    
    padding: 0;
}

within your .custom-left class. Also, consider adding the same code to your .custom-right class if you want the div to align with the top image as well.

Check out the updated Bootply: http://www.bootply.com/iQYEpYqXJZ

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

quickest method for accessing the selected radio button using jQuery

I'm trying to use jQuery to retrieve the selected radio button and display the text associated with that radio button. <div id="Poll"> <div id="PollQuestion">Your favorite color?</div> <ul> <li class="liAnsw ...

jqueryhtml

Why does my function consistently notify me that my answer is incorrect?

I've created a fun Pi quiz function that awards half a point for each correct digit you type. However, even if I enter just '3', it always shows as incorrect. Can someone assist me with this issue? function pi() { var piWithoutDecimals ...

javascripthtmlmathparseintpi

Robotic Arm in Motion

GOAL: The aim of the code below is to create a robotic arm that consists of three layers (upper, lower, and middle), all connected to the base. There are four sliders provided to independently move each part except for the base which moves the entire arm. ...

javascripthtmlcsshtml5-canvaswebgl

Transferring HTML information to Flask

I'm struggling with passing a value from a text box in a web application to a Flask application. Despite my efforts, the request object in Flask does not seem to contain the data I need. Can anyone provide assistance with this issue? Below are the rel ...

javascriptpythonhtmlflask

Issue with offset calculation in bootstrap table occurs when the bootstrap-table is closed and the window is resized

In a recent project, I utilized the bootstrap table. However, upon closing the bootstrap table with the following script: $(document).ready(function () { $(".removetable").click(function (e) { $(".table-aria").remove(); ...

javascripthtmljquerybootstrap-5bootstrap-table

Drupal 6 encountering an inline AJAX error

Is there a way to add custom inline error messages to a form in Node, including CCK and other elements? I have looked at multiple modules, but none of them seem to offer a complete solution as they lack CCK support, upload support, error messages, etc. ...

cssajaxdrupalinline-formset

When using HLS with Media Source Extensions on mobile devices, the <video> element with the muted and autoplay attributes may freeze on the first frame

I recently added a background video to our website using mux.com. The video is set to autoplay with HLS, but Chrome requires Media Source Extensions for playback. To ensure the HTML5 video auto plays, I included the necessary mute parameters as well. How ...

htmlreactjshtml5-videohttp-live-streamingnext.js

Unique Google Maps API V3 PEGMAN Customization

Can custom zoom controls and Pegman controls be styled with the same design? To add custom zoom controls, follow the instructions provided in this question's answer: <!DOCTYPE html> <html> <head> <meta name="viewport" cont ...

javascriptjquerycssgoogle-mapsgoogle-maps-api-3

Is there a way to incorporate the ::after or ::before pseudo-elements into an image tag?

While working on my project, I attempted to incorporate the ::after tag (I had used ::before as well) for an image within an img tag. However, I am facing difficulties as it doesn't seem to be working. Any advice or guidance would be greatly appreciat ...

javascripthtmlcssimageselector

Is it possible to set a unique identifier in Vue.js that persists even after the page is reloaded?

Currently, I'm working on a small project diving into Vue js - a Habittracker. Unfortunately, there is a bug in my code. When the page is reloaded and new habits are added, the function that should change the background doesn't work as expected. ...

javascriptcssvue.jslocal-storagequasar-framework

Modify the appearance of the element that is currently chosen

I have a navigation menu and I would like to change the style of the element that is selected from the list in the navigation menu. I am using React with the Grid element from material-ui. NavigationMenu.tsx: import React, { useState, useEffect } from "r ...

cssreactjsmaterial-ui

"Exploring the Possibilities of Dynamic Styling with VueJS

I am facing an issue with a data property called editMode set on a Vueity Card. When I click on a button, the editMode switches to true and an icon appears on the v-img. However, I want to adjust the opacity of the image to 0.3 when editMode is true, witho ...

javascriptcssvue.jsvuetify.js

In what ways can the accessibility of a website be impacted by using CSS

After reading numerous articles on Google and Stack Overflow, I have decided to ask my question straightforwardly in the hopes of receiving a clear and direct answer. Adding another layer to the discussion about whether Does opacity:0 have exactly the sam ...

cssaccessibilityopacitywai-aria

Executing npm run build index.html results in a blank page being generated without any error messages or warnings

After building my react app with npm run build, I encountered a problem where clicking on index.html resulted in a blank page opening in the web browser. I explored several solutions to address this issue but none seemed to work. Some of the strategies I ...

javascripthtmlreactjsnpm

Discovering the initial word of a string using jQuery

I'm currently facing an issue with jQuery that I need help solving. Here's the scenario: I am creating tooltips and positioning them directly under a specific trigger using CSS. Everything is functioning correctly, but there is one problem: In ...

javascriptjqueryhtmlcsstooltip

How to perfectly align columns using Bootstrap

Looking to create two fixed columns in Bootstrap. The current layout can be seen in the image below: https://i.sstatic.net/w41sD.png I want the left and right column to align at the top regardless of the number of items in each column. Refer to the image ...

htmltwitter-bootstrapcss

Altering webpage content through the use of Ajax

I need a solution for dynamically updating web page content using JavaScript AJAX. One idea I had was to store different div layouts in separate files, like so: BasicDiv.div: <div> <p>Some Text</p> <button> A Button </ ...

javascripthtmlajax

When deciding between .attribute=, setAttribute, and attr(), which is the best option to use?

.attribute in Javascript let friendDiv = document.getElementById("friend"); friendDiv.className = "list"; VS setAttribute in Javascript let friendDiv = document.getElementById("friend"); friendDiv.setAttribute("class","list"); VS .attr in Jquery $(" ...

javascriptjqueryhtml

Enhance the current menu item in WordPress by assigning a class to the anchor tag

function updateActiveClassOnMenu($item_output, $item, $depth, $args) { $menu_locations = get_nav_menu_locations(); if ($item->menu_order == 1){ $item_output = preg_replace('/<a /', '<a class="active" ', $item_o ...

phpjqueryhtmlcsswordpress

CSS Styling Dropdown Menu for Internet Explorer 5 and Internet Explorer 11

I am encountering an issue with a select box that is coded as follows: <html:select property="list_data" size="12" style="width: 350px;" ondblclick="JavaScript:doOK()"> <html:optionsCollection property="list_data" label="codeAndNameLabel" val ...

htmlcssinternet-explorer-11