Creating a structured layout with Bootstrap

I'm facing some confusion with the behavior of Bootstrap. This page suggests that for a 3x3 grid, one could use code similar to the following:

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

However, when I attempted the above code:

<div class="container">
    <div class="row">
        <div class="col align-self-center">
            <img src="~/images/UpArrow.png" />
        </div>
    </div>

    <div class="row">
        <div class="col align-self-start">
            <img src="~/images/LeftArrow.png" />
        </div>
        <div class="col align-self-center">
            <img src="~/images/Background.png" />
            <textarea>test</textarea>
        </div>
        <div class="col align-self-end">
            <img src="~/images/RightArrow.png" />
        </div>
    </div>

    <div class="row">
        <div class="col align-self-center">
            <img src="~/images/DownArrow.png" />
        </div>
    </div>
</div>

The arrow images stacked vertically instead of in a grid formation. To resolve this, I altered my approach as follows:

<div class="container">
    <div class="row">
        <div class="col-md-3"></div>

        <div class="col-md-3">
            <img src="~/images/UpArrow.png" />
        </div>    
    </div>

    <div class="row">
        <div class="col-md-3">
            <img src="~/images/LeftArrow.png" />
        </div>
        <div class="col-md-3">
            <img src="~/images/Background.png" />
            <textarea>test</textarea>
        </div>
        <div class="col-md-3">
            <img src="~/images/RightArrow.png" />
        </div>
    </div>

    <div class="row">
        <div class="col-md-3"></div>

        <div class="col align-self-center">
            <img src="~/images/DownArrow.png" />
        </div>
    </div>
</div>

My question is: why did my initial approach fail? Is there another method aside from the one I've settled on that would work better to achieve this layout?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Mastering Bootstrap Grid System

Utilizing the col class in Bootstrap allows an element to behave like a column dynamically adjusting its width based on other columns within the same row. When no other columns are present, it will occupy the entire row.

In your specific scenario where you've employed col-md-3, it signifies the use of the col object, followed by the breakpoint md, and finally specifying a width of 3 columns out of 12. Therefore, this particular div will be a 3-column element on screens larger than the medium breakpoint (md).

If your intention is for this grid layout to remain consistent across all screen sizes, including smaller ones such as phones, switching the classes to col-3 would be advisable. By eliminating the breakpoint, the element will always behave as a 3-column grid item. Furthermore, enhancing alignment can be achieved by incorporating the mr-auto & ml-auto classes for centering purposes while omitting unnecessary empty divs.

Working with Bootstrap may have a learning curve initially, but once you grasp the class system, everything falls into place seamlessly.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
    <div class="row">
        <div class="col-4 mr-auto ml-auto">
            UP
        </div>    
    </div>

    <div class="row align-items-center">
        <div class="col-4">
            LEFT
        </div>
        <div class="col-4">
            CENTER
            <textarea>test</textarea>
        </div>
        <div class="col-4">
            RIGHT
        </div>
    </div>

    <div class="row">
        <div class="col-4 mr-auto ml-auto">
            DOWN
        </div>
    </div>
</div>

Answer №2

If you're looking to create a cross-like layout specifically for medium (md) screens and larger, there's a more efficient method that involves using just one div for the top and bottom rows. By applying the justify-content-center class to these rows, you can easily center the columns horizontally like this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-3 text-center border">
            <i class="fa fa-arrow-circle-up" style="font-size: 55px;"></i>
        </div>    
    </div>
    <div class="row justify-content-center">
        <div class="col-md-3 text-center text-md-right border">
            <i class="fa fa-arrow-circle-left" style="font-size: 55px;"></i>
        </div>
        <div class="col-md-3 text-center border">
            <img src="https://picsum.photos/57" />
            <div class="w-100"></div>
            <textarea>test</textarea>
        </div>
        <div class="col-md-3 text-center text-md-left border">
            <i class="fa fa-arrow-circle-right" style="font-size: 55px;"></i>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-md-3 text-center border">
            <i class="fa fa-arrow-circle-down" style="font-size: 55px;"></i>
        </div>
    </div>
</div>

The use of responsive text alignment classes like text-center text-md-right will ensure that everything aligns properly in a single column on screens smaller than medium.

To hide certain elements on smaller screens, you can utilize responsive classes like d-none (which hides the element).

<div class="w-100"></div>
acts as a divider to stack elements neatly on top of each other with a width of 100%.

If your previous attempt didn't pan out as expected, it may be due to not applying the justify-content-center class to the rows which centers items horizontally within the flexbox.

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

The problem with floating labels

I have been attempting to incorporate the floatlabels feature from floatlabels, but I am encountering difficulties in getting it to work properly. Here is the sequence of steps I have taken: Firstly, I include the JS file <script src="js/floatlabels. ...

jqueryhtmlcssforms

"Adding dots" in a slideshow using HTML, CSS, and JS

I'm currently working on a slideshow that includes navigation dots at the bottom. Although the slideshow is functioning properly, I am encountering an issue where only one dot appears instead of the intended three in a row. Despite my research and att ...

javascripthtmlcssslideshow

Personalized form outlines

I'm designing a Valentine's Day theme for my website and I was wondering if it's possible to create custom form borders, like a heart shape, without having to hard-code everything. I could always insert an image where needed, but that seems ...

jqueryhtmlcss

Is JavaScript asynchronous when it comes to manipulating the DOM?

While conducting Javascript tests on the Android browser, I monitored the number of instruction counts executed on the CPU. The test code for JS is straightforward and embedded within HTML files located in the local directory of an Android device, not on a ...

javascripthtmlasynchronous

Customize bootstrap cards to have a full height and add a bottom margin to enhance the

My current project involves creating a grid of Bootstrap 4 cards that need to meet specific requirements: All cards must be contained within a single class="row" div. This is because the number of cards is unknown and I want the layout to adjust well acr ...

cssheightbootstrap-4marginbootstrap-grid

Using a div in React to create a vertical gap between two React elements

I am working with two React Components in my project - the Right Column and the Left Column. I am trying to create space between them using a div tag. Currently, my setup in the App.js file looks like this: import React from 'react'; import LeftC ...

javascripthtmlreactjs

Looking for ways to locate encoded HTML values in chrome?

Referenced from Microsoft Docs In MVC, the Razor engine automatically encodes all output coming from variables. For example, consider the following razor view: @{ var untrustedInput = "<"123">"; } @untrustedInput In this scenario, ...

htmlasp.net-coregoogle-chromexsshtml-encode

Optimal Procedure for New Users Form (Jade / Angular) in HTML

I'm currently working on integrating a form into my app for users to create tasks. This form should only appear the first time a user attempts to create a task. As someone who is not very experienced with frontend development, I find myself wondering ...

htmlangularjsformspug

Expand the image to fill the entirety of the viewing area

Check out my development website. Whenever you click on an image, a photo slider (using photoswipe) pops up. Is there any way to have the image fill the entire viewport? I attempted using height: 100vh, width: auto, but it didn't work. https://i.ssta ...

javascriptcssvue.jssassviewport

Effective URL structure with nested ui-view in AngularJS

It is common knowledge that Angular functions as a SPA (Single Page Application). I am seeking the most effective approach to display a main left-side menu selector page, where clicking on any menu item will load the content in the right-side view div. Th ...

javascripthtmlcssangularjsangular-ui-router

Is it possible to create an input field exclusively for tags using only CSS?

I am currently facing some limitations with a website I am managing. Unfortunately, I do not have the ability to incorporate additional libraries such as custom jQuery or JavaScript scripts. My goal is to customize an input field for tags so that when us ...

javascriptjqueryhtmlcsstags

Tips for resolving Layout Shift issues in responsive images utilizing the picture & source HTML tags

One issue I encountered with the <source> element is that even when specifying the width and height attributes for both the <source> and image fallback, there is still significant layout shift. This could be due to using images with varying dim ...

htmlcssresponsivelighthouseresponsive-images

Vibrant Reverberation of Color

When creating a table connected to a MySQL database, I encountered an issue with changing the text color inside the rows. How can I display the text in white within the table? I attempted to use <style = color #34242, but it didn't produce the des ...

phpcss

Unable to view form data in .php file

How can I change the style of my "Submit" button when a user clicks on it to submit the form? The action attribute calls a PHP file, but the data doesn't show up until I remove the onSubmit attribute from the form. However, without it, I cannot use t ...

javascriptphphtmlformspost

Chrome Table not behaving as expected when expanding div

I'm encountering an issue on my website where everything works perfectly in Firefox, IE, and Safari, but there is a glitch in Chrome. You can see the problem here: http://tinyurl.com/chxg2tb In Chrome, the table at the bottom extends beyond the cont ...

htmlcssgoogle-chromecss-tables

The error message indicates a validation issue with the img tag: The attribute src has an invalid value, as it uses a backslash () as a path segment delimiter instead of

<div class="logo"> <img src="assets\images\main-logo\logo.jpg" alt="logo"> </div> </a> </div> The code was validated using validate.w3.org and this error was encountered: Bad value asse ...

html

Show text and image side by side on the same row

I am looking to showcase both image and text on the same line, similar to how it's done on tripadvisor.in/ <div style="display:inline-block"> <div style="display:inline;float:left"> <a href="CollegeProfile.php" class="white"> <h ...

css

iOS 7.0.x causing issues with the height of tabs being trimmed

Struggling to fix a nightmare of an issue with my app, so I'm reaching out for some help. Everything is working fine on Android and iOS versions 7.1.x, 8, and 9. However, when installed on iOS 7.0.4, the bottom tabs are getting cut off. See below: O ...

ioscssiphoneios7ionic-framework

Switch div and expand/shrink the rest

Apologies for what might seem like a trivial question, but after working for a few hours now, I'm finding it difficult to wrap my head around this. My initial instinct is to handle this by manipulating the entire div structure with JavaScript, but I c ...

javascriptjqueryhtmlcsstwitter-bootstrap

Refresh the data in the DataTables table using a fragment

Currently, I am attempting to reload a fragment using ajax. However, after the reload, my event select and row count do not function properly. It seems that the default configuration is not behaving as expected: @PostMapping("/admin/add") ...

htmlajaxspring-bootdatatablesthymeleaf