Trouble with arranging nested bootstrap grid cells

Having a bit of trouble with the bootstrap framework.
I am trying to set up a simple box with an image on the left side and some text and other elements on the right side.
However, I am encountering issues when it is viewed on smaller screens.

Here is my current code.

<div class="col-md-8" style="margin-top: 3px;">
            <div class="feed-box">
                <div class="row">
                    <div class="col-md-1">
                        <img style="max-width: 52px;" src="http://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=250">
                    </div>
                    <div class="col-md-11">
                        <div class="row">
                            <p><a href="#">John Doe</a> announced something</p>
                        </div>
                        <div class="row">
                            <p>
According to the documentation, nesting is simple—just place a row of columns within an existing column. This results in two columns for desktops that scale to large desktops, with another two equal width columns within the larger column.
                            </p>
                        </div>
                        <div class="row">
                            <a href="#">Comment</a>
                            <a href="#">Share</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Visual explanation:
Desktop (padding not relevant here):

Small screen (issue):

Desired layout for small screens:

htmlcsstwitter-bootstrapresponsive-design

Answer №1

Make sure to include the column specifications for smaller screens as well, you can skip adding them for medium-sized screens.

<div class = "row">
   <div class = "col-sm-2">
   </div>
   <div class = "col-sm-10">
   </div>
</div>

Answer №2

To customize the styling for smaller screens, leverage media queries.

Take a look at this code snippet for a demonstration (try resizing your browser window).

Here's an excerpt from the CSS:

@media (max-width: 800px){
    .feed-box .col-md-1{
      float:left;
      margin-bottom:8px;
    }
    .feed-box .col-md-11{
      margin-top:15px;
    }
}

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

Comparing attribute selectors to class selectors in the realm of styling

I often come across code that looks like this: <input type="text" class="class1" name="text"> <input type="submit" class="class2" name="submit"> which is then styled as follows: input[type=text] { styles here...} input[type=submit] { sty ...

cssclassattributescss-selectors

Using Vue.js to alter the CSS class property

I am exploring Vue.js and looking to modify a CSS class property. Here is the HTML code utilizing the specified class: <div class="customTimer"></div> Here is the corresponding CSS code: .customTimer { width: 100%; height: 1 ...

javascripthtmlcssvue.jsvuejs2

jQuery: Set default option selected or reset value

I'm attempting to change the value of the nearest select option dynamically. $(document).ready(function () { $('.limitation_points').hide(); $('.field .limitSelected').each(function () { $(this).change(function ( ...

javascriptjqueryhtmltwitter-bootstrap

Issue with custom Javascript not executing in Internet Explorer versions 9 and 10

Initially, this script is found in the document's head section. <script> document.addEventListener("DOMContentLoaded", function () { var e, t = document.querySelectorAll("div.bounceInDown"); for (var n = 0, r = t.length; n & ...

javascripthtmlinternet-explorercss

"Having issues with Django not properly applying the JavaScript and CSS files I've linked in

I have completed my project and organized all the necessary files, including index.html, css, js, and settings.py within the appropriate folders. I am encountering an issue with applying a pen from the following source: CodePen index.html <!DOCTYPE h ...

javascriptpythonhtmlcssdjango

Combining the container and container-fluid classes with Bootstrap for versatile layout design

My goal is to have my website display with a fixed width on xs, sm, and md screens, but be fluid on lg screens. After researching the Bootstrap grid system, I discovered that I can use the .container class for fixed width layouts or the .container-fluid ...

csstwitter-bootstraptwitter-bootstrap-3

"Troubleshooting a bug: GetElementById function fails to find elements with hyphenated

When calling attr('id') on an immutable id attribute for an HTML element, my code runs smoothly when the id contains no hyphens. However, it encounters issues when the id includes a hyphen. $('.coloursContainer .radio-box').live(' ...

javascriptjqueryhtml

The functionality of the Bootstrap4 accordion is not functioning according to my expectations

My goal is to create a unique e-commerce checkout page design. Each panel would be opened sequentially, with the next panel unfreezing when the action button of the current panel is clicked. However, I seem to be making a mistake as it is not working as in ...

javascriptjquerycsstwitter-bootstrap

Reverse animation transition not activating in CSS

In an attempt to create a side navbar using HTML/CSS, I implemented hover animations where hovering over an icon would cause it to double in size and disperse the rest of the items in the navbar. While I successfully achieved this animation with JavaScript ...

htmlcsscss-animationscss-transitions

Tips for setting an image as the background on various mobile screen sizes

Is there a way to set an image as a background that will work effectively with multiple different mobile screen resolutions without distorting or cropping the image? For example, if I want the image to display correctly on both iPhone4 and iPhone6 without ...

htmlcssimage

Building a unique mobile number input box with country code in HTML

Struggling to design a unique mobile input box that separates the mobile number and country code with a divider. Need some assistance in creating this custom input field. Design https://i.sstatic.net/M0Wvs.png Current Implementation <div cla ...

htmlcssbootstrap-4

Arranging Cards in Layers on Smaller Screens Using Bootstrap Framework

My row of cards in various sizes looks good on larger screens like this: https://i.sstatic.net/1qF53.png However, on smaller screens, the cards lose their appeal. https://i.sstatic.net/o1NS8.png To improve this, I want to stack the cards so that the ke ...

htmlcsstwitter-bootstrapbootstrap-5

When a key is pressed, apply a background color and fade out effect using JavaScript

Whenever the enter key is pressed, I want to make a red color appear briefly and then fade out quickly to create a blinking effect. I attempted adding a new class on Keypress that would transition the opacity to 0: function enterpressalert(e, text) { ...

javascripthtmlcss

Are there any ways to bring visual attention to a GoDaddy template's SEND button using HTML or JS when the original code is unavailable?

I'm currently working on a GoDaddy website using a template that doesn't clearly highlight the SEND button in a Contact Us form. In order to comply with WCAG accessibility standards, active elements must have visible focus indicators. However, si ...

javascriptjquerycssinline-styleswcag2.0

How to Delete the Bottom Border on Selected Tabs in MUI Using React

I am attempting to customize the appearance of MUI Tabs to achieve a design similar to the image below: https://i.sstatic.net/tBS1K.png I have created a sample code example in a codesandbox environment. You can view it here: Codesandbox Example. In this e ...

htmlcssreactjsmaterial-uitabs

The functionality of Bootstrap toggle ceases to operate properly following an AJAX content update

I am currently using AJAX load to fetch some content on my webpage. I am working with Bootstrap 3 and Bootstrap toggle. When the content is loaded, the Bootstrap 3 content functions properly (the panel-primary panel is clearly visible). However, the Bootst ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Column reverse flex-direction is functioning correctly, however, it is imperative that it does not automatically scroll to the bottom

I have a Flexbox set up where I need the contents to display in reverse order. Everything is working well, but the list has many items and the newest ones are appearing at the top. Currently, the Flexbox automatically scrolls to the bottom, but I want it t ...

javascripthtmlcss

Bug in Sublime Text's Autocomplete Feature for HTML Tags

Recently, I've encountered a small bug with my Sublime Text 3. Every time I try to auto-complete certain HTML tags, an extra '<' is added before the first tag, forcing me to manually delete it each time. I'm currently using build 317 ...

htmltexteditor

Struggling with implementing a materialize modal?

I am encountering a problem with Materialize. This time, I am trying to create a modal div, but it doesn't seem to be working. The button is created, but when I click on it, nothing happens. I have made sure to link all the necessary Materialize files ...

javascriptcssmaterialize

Can one determine whether an SCSS element is devoid of content?

Can SCSS be used to determine if an element is empty? For instance, I'm interested in assigning a variable based on whether the class has content or not. <div class="defaultClass"> <!-- This div is empty --> </div> Is there a w ...

csssassstyles