Achieving Consistent Vertical Alignment in Bootstrap 3 Among Various Rows and Columns

Just getting started with Bootstrap and facing a challenge related to vertical alignment using the grid system. Looking for some expert guidance and assistance in finding a solution.

To help explain the issue better, I have captured 4 screenshots (links provided below) showcasing scenarios for lg, md, sm, and xs. Hoping these images will give you a clear idea of the problem.

The main issue is that while everything looks aligned perfectly in the lg scenario, as the viewport size changes, misalignment starts appearing between the content in the 2 columns.

Below is the HTML markup:

<div class="container">
        <div class="row row-centered">
            <div class="col-sm-6 col-md-6 col-lg-6">

                <div class="row row-centered">
                    <div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <h2>HEADER NUMBER 1</h2>
                    </div>
                    <div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>
                </div>

                <div class="row row-centered">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
                    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                        <div>
                            <p>Teaser number 1 - Lorem ipsum dolor sit, interdum consectetur elit. Donec interdum dapibus lectus rhoncus.</p>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
                </div>

                <div class="row row-centered">
                    <div class="col-sm-6 col-md-6 col-lg-6">
                        <img class="img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
                        <h4>Sub-heading short</h4>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-6">
                        <img class="img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
                        <h4>Sub-heading longer</h4>
                    </div>
                </div>
                <div class="row row-centered">
                    <div class="col-lg-12">
                        <div>
                            <p>Link to detailed page 1</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6 col-md-6 col-lg-6">

                <div class="row row-centered">
                    <div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <h2>HEADER DIFFERENT LENGTH</h2>
                    </div>
                    <div class="hidden-xs hidden-sm hidden-md hidden-lg"></div>
                </div>

                <div class="row row-centered">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
                    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                        <div>
                            <p>Teaser number 2 - Lorem ipsum dolor sit amet. Donec interdum dapibus lectus eu rhoncus.</p>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
                </div>

                <div class="row row-centered">
                    <div class="col-sm-6 col-md-6 col-lg-6">
                        <img class="img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
                        <h4>Sub-heading different</h4>
                    </div>
                    <div class="col-sm-6 col-md-6 col-lg-6">
                        <img class="img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
                        <h4>Sub-heading 4</h4>
                    </div>
                </div>
                <div class="row row-centered">
                    <div class="col-lg-12">
                        <div>
                            <p>Link to detailed page number 2</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

No custom CSS has been implemented yet except for the .row-centered class which aligns text to the center like this:

.row-centered {
text-align:center;}

Any suggestions on how to resolve this issue would be greatly appreciated. Thank you!

Screenshots: Example

htmlcsstwitter-bootstrap

Answer №1

The Maverick, Greetings! In order to maintain alignment within the content, here is my suggested approach:
I propose adjusting the title font size at 2 specific media breakpoints.
You have the flexibility to customize this according to your preferences; I have demonstrated a slight reduction in font size for emphasis.
Additionally, I have incorporated a height adjustment at a breakpoint for the main text section, utilizing min-height instead of a fixed value. This allows room for expansion when the elements stack on smaller screens. Your original code contained excessive divs and unnecessary hidden block paddings which I have streamlined.

I took the liberty of decluttering the code to include only essential components for this demonstration.
Feel free to review the revisions and notice the improvements.

In addition, I introduced col-xs-12 into the image class.
Upon resizing the screen to a smaller size, you will observe that the image now spans the full width rather than being constrained to one side with excess space.
To center the text, simply apply the text-center class once within each of the two rows.

I trust that these modifications will provide a solid foundation for achieving your desired layout.
Here is the Fiddle link for reference.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<style>
body {
  padding-top: 50px;
}
.spacer {
  margin-top: 2%;
  margin-bottom: 2%;
}

@media(max-width:1200px) {
.adjust-fontsize{
    font-size:2em;
    font-weight: 700;
    font-weight: 600;
}
}    
@media(max-width:992px) {
.adjust-fontsize{
    font-size:1.0em;
}
.row-height{
    min-height:70px;
}    
}
</style>

</head>

<body>

    <nav class="navbar navbar-inverse navbar-fixed-top ">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand " href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

<div class="container col-lg-12 spacer"></div>
    
    <div class="container col-xs-12 col-sm-12 col-md-12 col-lg-12">
        
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 text-center">
            
            <div class="row col-lg-12">
                <h2 class="adjust-fontsize">HEADER NUMBER 1</h2>
            </div>
            <div class="row col-lg-12 row-height">
                <p>Teaser number 1 - Lorem ipsum dolor sit, interdum consectetur elit. 
                Donec interdum dapibus lectus rhoncus.
                </p>
            </div>
                
            <div class="row col-lg-12">
                <div class="col-xs-12 col-sm-6">
                    <img class="col-xs-12 img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
                    <h4>Sub-heading short</h4>
                </div>
                <div class="col-xs-12 col-sm-6">
                    <img class="col-xs-12 img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
                    <h4>Sub-heading longer</h4>
                </div>
            </div> 
            <div class="row col-xs-12">
                <p>Link to detailed page 1</p>
            </div>
        </div>

    
    
    
        <div class=" col-xs-12 col-sm-6 col-md-6 col-lg-6 text-center">
            <div class="row col-lg-12">
                <h2 class="adjust-fontsize">HEADER DIFFERENT LENGTH</h2>
            </div>
            <div class="row col-xs-12 row-height">
                <div class="col-xs-12">
                    <p>Teaser number 2 - Lorem ipsum dolor sit amet. 
                    <br>Donec interdum dapibus lectus eu rhoncus.
                    </p>
                </div>    
            </div>
        
            <div class="row col-lg-12">
                <div class="col-xs-12 col-sm-6">
                    <img class="col-xs-12 img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
                    <h4>Sub-heading different</h4>
                </div>
                <div class="col-xs-12 col-sm-6">
                    <img class="col-xs-12 img-responsive" src="http://placehold.it/200x200&text=Square" alt="">
                    <h4>Sub-heading 4</h4>
                </div>
            </div>
            <div class="row col-xs-12">
                <p>Link to detailed page number 2</p>
            </div>
        </div>
        
    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></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

What is the best way to format a condensed script into a single line?

There are times when the script in the web browser is packed into one line like function a(b){if(c==1){}else{}}. I have attempted to locate something that would display it in a more normal format. function a(b) { if(c==1) { } else { } } Howev ...

javascripthtmlbrowser

The Bootstrap navbar is missing the collapse button

<nav role="navigation" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a href="" class="navbar-brand">Online Notes</a> <button t ...

twitter-bootstrapbootstrap-4navbar

What is the best way to alter an HTML element using Ruby with Sinatra and Bootstrap?

Below is the content of my index.erb file: <a class="btn" href='javascript:TestFunction()' role="button">TestFunction</a> <script language="javascript"> function TestFunction() { $.post("test_function", { action ...

htmlrubysinatra

The CSS "ul" selector targets unordered lists in HTML

How can I target the ul elements highlighted below in my HTML markup without using a class or id for reference? Here is the relevant portion of my HTML code: <div id="mainmenu"> <ul class="menu"> <li class="item-472"> < ...

htmlcsscss-selectors

Is there a way to give a unique color to a single <a> element with a specific class, differentiating it from the

Apologies if my title is not precise enough. Describing this in just a few words for the title was a bit challenging. Context I am personalizing a template on wordpress.com. The website in question is: I have enclosed the DONATE menu item in a gold-col ...

htmlcss

Unable to create a responsive layout because of the use of inline CSS with "margin"

Currently, I am working on a design for a webpage that must be responsive to large, medium, and small screens. To achieve this responsiveness, I am using Material UI Grid container and placing Chips inside it with the style={{ marginLeft: 60 }} from the se ...

cssreactjsresponsive-designmaterial-ui

What steps can I take to ensure this conversion meets markup validation requirements?

I keep encountering a validation error that keeps coming up: $("#preview").html('<div align="center"><img src="/ajaximage/loader.gif" alt="Uploading...."/></div>'); The error message states: document type does not allow elemen ...

javascripthtmlw3c-validation

Guide on assigning a value to an input field using Vuejs

<div class="col-md-8"> <va-input label="Address 1" v-model="Address1" id="address" class="inp"> </va-input> </div> After calling the API to retrieve data, I need to populate the above input field wit ...

javascripthtmlvue.js

Discovering the clicking actions on PDF elements within an HTML environment

I am currently working on developing a web application that involves rendering various pdf objects. My main goal is to be able to detect the position of a click inside the pdf container. However, it seems like the OnClick event is not functioning as expe ...

javascriptjqueryhtml

Executing a JavaScript function at a specified interval

I am a beginner in the world of programming and javascript. What I aim to accomplish : Executing a JavaScript function on page load, specifically showVideo(). I would like this function to run for approximately 10 seconds before moving on to the next func ...

javascriptjqueryhtml

Issue with Dependent Drop Down functionality

I am a beginner explorer diving into the world of PHP & MySQL, and I am currently working on creating a dependent drop-down list. The first drop-down seems to be working fine, but I am facing issues linking the second drop-down with the first one. Can anyo ...

phphtmlcssmysqlapache

Using AJAX to submit a single form

Within my HTML view, I have multiple forms that are displayed using a PHP foreach loop. One of the form examples is as follows: <form method="POST" class="like-form-js"> <input type="hidden" name="post_id" value="<?= $post['i ...

javascriptphpjqueryhtmlajax

Button remains disabled using jQuery until input has passed validation

Hey there! I've set up a form in my custom web app that allows users to update their details. Check out the code: <g:form class = "updateCustomerClient" controller="customerClient" action="updateCustomerClient" id=&quo ...

javascripthtmljquerycss

What is the most effective way to shorten a long URL while adding additional parameters?

Having a dilemma here. I am faced with a difficult situation regarding my URL - for example, www.mywebsite.com/first/second/something/index.html. What I would like to do is transform it into something along the lines of www.mywebsite.com/index.html?a=64& ...

javascriptjqueryhtmlcssurl

What is the method for changing the input color when it is "being autocompleted" in Microsoft Edge?

My CSS file sets the color of all elements to white, but overrides this for inputs with a black font color. However, when Edge autofills an input, the "matched characters" inside the input appear in the default wildcard color, making them invisible on the ...

cssmicrosoft-edge

Is it possible to develop a mobile app using Django and HTML5 technologies?

Just curious if any developers out there have experience building an HTML5-based mobile web app with Django. How did you address Django's limited support for certain HTML5 elements and attributes? In hindsight, would you stick with Django or opt for a ...

djangohtmljquery-mobiletwitter-bootstrapkendo-ui

How can I retrieve the page title in a React app when using jest and enzyme for testing purposes?

After creating a react app using create-react-app, I found the barebones to be pretty good! Now, I am looking to modify the title of the page in index.html and test it. Although enzyme is useful for testing individual components and producing HTML, I am cu ...

htmlreactjsjestjsenzymecreate-react-app

Learn the steps to Toggle Javascript on window resize

Is there a way to toggle Javascript on and off when the window is resized? Currently, resizing the window causes the navigation bar to stick and remain visible above the content. <script> if ( $(window).width() <= 1200 ) { }else{ $('nav& ...

javascriptjqueryhtmlcss

Creating flexible DIV columns that adjust to display changes using Bootstrap 3's CSS

I am currently facing a challenge with a simple layout problem: My objective is to create a toggle side menu. When the side menu is visible, the main layout should be 80% width, and when it is not visible, the main layout should be 100% width, as shown be ...

htmlcsstwitter-bootstraplayoutweb

Toggling classes in JavaScript on a button to expand a div element

I am facing an issue with a website feature where there is an expanding widget area in the topbar above the header. You can check it out at this link: After clicking the arrow to expand the area, the button changes its direction. However, when I click it ...

javascriptjqueryhtmlcss