Arranging Bootstrap divs vertically and then horizontally in mobile view

My website layout is relatively straightforward. It consists of a header at the top, a navigation bar with an image inside a column on the left, and the main content displayed on the right side. https://i.stack.imgur.com/yYzaG.png

For mobile responsive viewing, I am looking to have the navigation column show both the navigation list and an image side by side, instead of stacking them vertically as in the default view.

https://i.stack.imgur.com/tcM1n.png

Currently, this is the code I have been using:

<div class="row">
    <div class="col-lg-2">
        <div class="row">
            <div class="col-sm-10">
                <ul style="margin-left: 50px;">
                    <li><a href="/news">News</a></li>
                    <li><a href="/events">Events</a></li>
                </ul>
            </div>
            <div class="col-sm10">
                <img src="/images/navbg.png" class="img-fluid">
            </div>
        </div>
    </div>
    <div class="col-lg-9">
        <h3>Blog Title</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </div>
</div>

While the layout displays correctly in the default view, the smaller responsive view causes the image and unordered list to stack vertically rather than side-by-side, taking up more space. Additionally, I would like to crop the image from the top using CSS or consider using a smaller image size.

Any assistance on resolving these issues would be greatly appreciated.

htmlcssbootstrap-4responsive

Answer №1

For optimal responsiveness, it is recommended to utilize the col- classes within the designated column...

https://www.example.com/code-sample

<div class="row">
    <div class="col-md-3 col-12">
        <div class="row">
            <div class="col-md-10 col-9">
                <ul style="margin-left: 50px;">
                    <li><a href="/articles">Articles</a></li>
                    <li><a href="/blog">Blog</a></li>
                </ul>
            </div>
            <div class="col-md-10 col-3">
                <img src="//placehold.it/200" class="img-fluid">
            </div>
        </div>
    </div>
    <div class="col-md-9">
        <h3>Page Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
</div>

The initial col-md-3 will span the entire width (col-12) on smaller screens, allowing the nested columns (col-9, col-3) to display side-by-side. Feel free to adjust breakpoints and widths to suit your needs.

Answer №2

Adding onto ZimSystems' response (I am unable to comment at this time), he is correct in mentioning that by utilizing the responsive col classes (depending on the version of Bootstrap), you can also use the order class in conjunction with the responsive classes to control the order of elements on your page.

<div class="col-8 order-2 order-md-1"></div>
<div class="col-4 order-1 order-md-2"></div>

The order class essentially allows you to rearrange divs as needed, a highly requested feature that now greatly enhances the flexibility of arranging content on web pages responsively :')

For further information on bootstraps Order features, you can refer to their official Documentation

Answer №3

<div class="row">
<div class="col-md-3">
    <div class="row">
      <div class="col-xs-12 col-md-12">
        <div class="row">
          <div class="col-md-12 col-xs-8">
              <ul class="m-l-10">
                  <li><a href="/blog">Blog</a></li>
                  <li><a href="/articles">Articles</a></li>
              </ul>
          </div>
          <div class="col-md-12 col-xs-2">
             <img src="/images/navigation.png" class="img-fluid">
          </div>
        </div>
      </div>
    </div>
</div>
<div class="col-md-9">
    <h3>Latest Posts</h3>
     <p>Phasellus tincidunt, dolor nec fringilla auctor...</p>
</div>
</div>

Give this setup a try.

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

Spin the object at regular intervals

Recently, I stumbled upon this interactive Pen: https://codepen.io/golle404/pen/BoqrEN that caught my eye. I thought it would be interesting to make the object move every few seconds. My first attempt involved using the following code snippet: setTimeout( ...

javascripthtmlcss

The onKeyUp event is not functioning as expected in React, unlike the onChange event

For a React coding challenge, I am required to update a value onKeyUp instead of onChange. However, after changing it to onKeyUp, my fields are not updating and I cannot type anything into the textarea. class MarkdownApp extends React.Component { constr ...

javascripthtmlreactjsonkeyup

What steps can I take to help EventListener locate a specific class if it is experiencing difficulty?

In the process of creating a responsive navigation bar, everything seems to be functioning correctly except for a small javascript error that arises in my sub menu when clicking. Despite thoroughly checking through my index, script, and style files, I am ...

javascripthtmlcsstypeerrornavbar

Troubleshooting: Images not appearing on HTML pages

I've recently started learning HTML and can't figure out why my code isn't working. I am trying to add an image but it only appears as a blue box with a question mark in it. Here is my code: <head> <title>Welcome</title> ...

htmlimage

Display fixed or absolute elements within a scrollable container

I want to create a unique design with overlapping divs that can be selectively displayed through scrolling. While this effect is possible with images using background-attachment: fixed, I am seeking a solution that can work for any child element. Here is ...

css

Steps for Sending Data Using a URL

I am having trouble deleting a row based on its id. Below is the code I am using: <tr> <th>ID</th> <th>Nom etudiant</th> <th>Prenom etudiant</th> ...

phphtml

Creating a dropdown menu with a blur effect using CSS

I attempted to match the opacity and blur effect of my dropdown menu with that of my navbar. While the opacity adjustment worked correctly, the blur effect did not apply as expected. I've heard that I need to utilize a pseudo-class to achieve this, b ...

cssdropdownnavbarbootstrap-5blur

Issues detected with Foundation Block Grid in small size setting

I created a React component to display a series of div elements on a page using the Foundation Block Grid system to control the number of divs per row. However, I am facing an issue where the number of divs does not change when switching to a small-sized s ...

cssreactjszurb-foundation

Responsive Grid with Card component using React Material UI

Struggling to devise a responsive grid layout with same height cards featuring images in a React and Material-UI setup. After hours of tinkering, the "flex" part is proving to be quite puzzling. Seeking guidance. The code snippet in question: const useSt ...

cssdatagridviewflexboxmaterial-uiresponsive

spacing between elements vertically

             I am struggling with a common issue and despite searching, I have not been able to find a solution that works for me. Here is my setup: <div id="wrapper">   <div class="content-area-top"></div>   <div clas ...

htmlcss

Ways to widen the header to fit the entire page?

I'm having trouble stretching my header to fill the entire page. I've tried using margin-left and right, but it's not working as expected. My Header CSS: background: green; height: 70px; width: 100%; display: flex; just ...

javascripthtmlcssreactjsmaterial-ui

How to Use CSS to Crop a String from the Middle

My file has a long name and I am using CSS text-overflow: ellipsis to crop it. <style> #fileName { width: 100px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } </style> <div id="fileName"> ...

htmlcss

What is the best way to apply a class for styling my JavaScript code in CSS? I'm having trouble getting classList

I am having trouble adding a class to my JavaScript script in order to animate the images created in JavaScript to fall off the page. I have tried using the code element.classList.add("mystyle");, but every time I insert it, my JavaScript stops working. T ...

javascripthtmlcssweb

How to assign a value to a textarea element in an HTML form?

I am struggling to populate a text area with the value using this code snippet... <?php $message = $_REQUEST['message']; ?> <br/><b>Description</b><br/> <TEXTAREA NAME="message" COLS=40 ROWS=6 value="<?=$messa ...

phphtml

Utilize jQuery to extract the content, rearrange the content, and then encapsulate it within fresh

I attempted all day to rearrange this menu the way I want, but since I am new to jQuery, I'm facing some challenges. Here is what I am currently trying to achieve: Inside the last td.top of this menu, there are 3 ul.sub li items. I aim to extract ...

javascriptjqueryhtmlcss

Using angular 7 to apply a dynamic CSS class on a span element

I want to dynamically change the CSS class of a span element in an ngx datatable based on the value. Here is my HTML code: <ngx-datatable #orderinvoice class="bootstrap" [rows]="invoiceSource" [headerHeight]="50" [footerHeight]="50" [rowHe ...

htmlcssangularng-class

Fixing the alignment of the left column table in Bootstrap 3.3.7

Is there a way to fix the left table column (date and all column names) in Bootstrap 3.3.7? I attempted to use position: fixed; but it didn't work as expected. Any suggestions on what I should do next? Check out this fiddle for reference <scr ...

jqueryhtmlcsstwitter-bootstrap

Developing a division with an image source based on the selection of a checkbox

My goal is to develop a "change function" that generates a new div for each checked checkbox selection and removes the div when the checkbox is unchecked. These new divs should also display the img src of the selected checkbox. Currently, my JavaScript c ...

javascriptjqueryhtml

What is the best way to extend an inline-block element to cover the entire text line?

Let's talk about the scenario: https://i.stack.imgur.com/we05U.png In the image, there is a container (displayed as a div) with only one child - a span element. The goal is to introduce a second child that occupies the entire red space depicted in t ...

javascripthtmlcss

What is the best way to incorporate data from a foreach method into a function call within an HTML string?

Having trouble calling a function with data from a foreach loop while generating HTML cards and buttons from an array. The issue seems to be in the renderProducts() method. /// <reference path="coin.ts" /> /// <reference path="prod ...

javascripthtmltypescriptloopsoop