What is the process for adjusting positioning in bootstrap?

After spending countless hours attempting to create a responsive webpage using the bootstrap grid system, I have hit a dead end.

Here is the code I have been working with:

<div class="row">
    <div class="col-md-2" align="center">
        <div class="d-flex flex-column">
            <h1 class="border">A</h1>
            <h1 class="border">B</h1>
            <h1 class="border">C</h1>
        </div>
    </div>
    <div class="col-md-7 col-sm-9 border" align="center">
        <h1>D</h1>
    </div>
    <div class="col-md-3 col-sm-3 border" align="center">
        <h1>E</h1>
    </div>
</div>

I have managed to implement the COL-MD but now I am struggling with achieving the desired layout for COL-SM.

The goal is to achieve a layout similar to this one for COL-SM:

https://i.sstatic.net/7YdHK.png

I have tried various methods including offsets, but I just can't seem to get it right. Can someone provide guidance on how to accomplish this?

csstwitter-bootstrapbootstrap-4

Answer №1

To ensure that ABC spans the full width when displayed on small screens and each have "full width" in the container on medium screens, remember to include col-sm-12 for small displays and col-md-12 for medium displays. Here is an example:

<div class="row">
<div class="col-md-2 col-sm-12" align="center">
    <div class="row">
        <h1 class="border col-md-12 col-sm-4">A</h1>
        <h1 class="border col-md-12 col-sm-4">B</h1>
        <h1 class="border col-md-12 col-sm-4">C</h1>
    </div>
</div>
<div class="col-md-7 col-sm-9 border" align="center">
    <h1>D</h1>
</div>
<div class="col-md-3 col-sm-3 border" align="center">
    <h1>E</h1>
</div>

Check it out on JS-Fiddle: http://jsfiddle.net/79onzx0r/

Screenshots of the output:

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

https://i.sstatic.net/6DWdS.png

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

Having trouble getting a div to slide to the left on hover and collapse on mouseout using Jquery?

Hey there! I need some assistance in completing this code snippet. I have a div with overflow:hidden and a margin-left of 82px. Inside it, there is a share link and a ul list containing three external links. When I hover over the share link, everything w ...

javascriptjquerycsshoveronmouseover

Issue with Bootstrap 4 component styling in Angular 4 application test

I am working on creating a test application using Angular 4 and have successfully installed Bootstrap 4 for Angular as instructed on https://ng-bootstrap.github.io/#/getting-started. I have included Bootstrap in the main module and in my basic navbar menu ...

angularbootstrap-4ng-bootstrap

Is it possible to retrieve the current CSS value set by a media query using JavaScript?

Currently working on a website project that involves accessing and manipulating the display property of a menu. The goal is to toggle the menu open or closed based on its current state. In my setup, the initial state of the menu is defined as closed using ...

javascriptcssmedia-queries

Dim the entire website

I am attempting to apply a grey overlay across my entire site when a file is dragged in for upload. The drag event and activation of the grey overlay are functioning correctly, but there are specific areas where it does not work as intended. There seems t ...

htmlcss

Mobile-formatted inline Bootstrap

Using bootstrap and seeking to have elm1, elm2, and elm3 displayed inline on mobile devices? Take a look at the code snippet below: <div class="container-fluid"> <div class="form-group"> <label class="control-label col-sm ...

csstwitter-bootstrapresponsive-design

CSS that relies on the presence of a specific class

I'm a CSS novice and I have encountered a scenario where I need to apply a CSS class only when another class is not present. <div class="border-solid p-2 bg-white mt-1 h-fit" [ngClass]="SOME_CONDITION ? 'tile-con ...

cssangulartailwind-css

The hyperlink in the HTML code is malfunctioning

While working on a Wix website, I encountered an issue with the code snippet below: // JavaScript var countries = [ { name: 'Thailand', link: 'www.google.com' }, { name: 'Tanzania', link: '' }, { name: &ap ...

javascripthtmlcss

Date selection does not activate the onChange event

I've integrated Bootstrap 4 into my React JS project. To add the bootstrap datepicker, I simply linked it in my index.html file like this: <!doctype html> <html className="no-js" lang="zxx"> <head> <meta cha ...

reactjsbootstrap-4onchangebootstrap-datepicker

What could be causing the nonassign error to occur in the angular-bootstrap tabset?

<tabset class="paygrade-tabs"> <tab ng-repeat="tab in rps.currentPayGrade | orderBy: 'payGrade.code' : true track by $index" ng-click="changeTab(tab)" active="activeTabId === tab.id"> <tab-heading> <span> ...

angularjstwitter-bootstrapangular-uiangular-ui-bootstrap-tab

Discovering the block's height with the power of Jquery

I have written a piece of code that sets the height of a block of text and then applies that height to an image within the block. However, the size of the image ends up being smaller than the size of the block. https://i.stack.imgur.com/QUFWy.png <scr ...

jqueryhtmlcsscarousel

CSS: A guide to correctly setting an image URL for a checked checkbox

In my current situation, I have a list of checkboxes with corresponding images. When a checkbox is checked, I would like to add a black circle behind the image. Here is an example of the current output: This is what I expect the output to look like: Her ...

htmlcssreactjscheckbox

How come the margin-bottom is displaying as the margin-top?

When I attempt to add margin-bottom on a div inside its parent, it seems to display as the parent's margin-top. Why is that? HTML: <div id="wrapper"> <div id="content"> <div id="box"></div> </div> </d ...

htmlcss

Troubleshooting: WordPress failing to launch Bootstrap Modal

I recently transformed my PHP website into a WordPress theme, but unfortunately, I am facing an issue with my Bootstrap modal not opening in WordPress. ***Header.php*** <a id="modal_trigger" href="#modal" class="sign-in-up"><i class="fa fa-user ...

javascriptphphtmlwordpressbootstrap-4

Interactive Bootstrap 4 button embedded within a sleek card component, complete with a dynamic click event

I am trying to create a basic card using bootstrap 4 with the following HTML code. My goal is to change the style of the card when it is clicked, but not when the buttons inside the card are clicked. Currently, clicking on the test1 button triggers both ...

htmltwitter-bootstrapangulartypescript

Can a website be designed to load a specific font for mobile phones, such as Arial Black for iOS?

Although the font Arial Black is commonly available on both Mac and PC systems, it is not accessible on iOS devices. Is there a way for a webpage to implement CSS techniques or tricks (such as assigning a class like "mobile" or "ios" to the body element), ...

htmlcssiphonewebfonts

Is there a way to apply border-radius to the header of a table in Bootstrap 5?

My use of Bootstrap 5 for styling a table has encountered an issue. Even with the border-radius set on the table-dark class, the thead element's border does not change. I am looking for a way to address this problem. Any suggestions? .table-dark { ...

htmlcss

Prevent side-to-side scrolling on elements that exceed the width of the screen

I am working on building a navigation system similar to Google Play, where there are fixed tabs for browsing through the app. I have created a container div that holds various content sections. <div id="container"> <div class="section"> .. ...

javascripthtmlcssmobile

Excessive Blank Areas

I needed to create 3 horizontal paragraphs side by side, and the only solution I found was using the position property, but it didn't turn out as expected. Despite my efforts to make it look clean, it always ends up like this. Below is the code I use ...

htmlcss

Adjust the CSS within a <style> element using jQuery or javascript

What I aim to accomplish: I intend to dynamically add and modify rules within a <style> tag using JavaScript/jQuery. Reason behind this goal: I am in the process of creating a color scheme editor where changes made by the user should be reflected ...

javascriptjqueryhtmlcss

Styling components using classes in Material-UI

I recently started using material-ui and noticed that it applies inline styles to each component. After running a test with multiple instances of the same component, I realized that there was no CSS-based styling - only repeated inline styles were generate ...

javascripthtmlcssreactjsmaterial-ui