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

In AngularJS, how can you filter the ng-repeat value by clicking on a checkbox field?

Hey there, I'm looking to filter the ng-repeat value when a checkbox is clicked. Check out my Plunker here. By checking the checkbox labeled Role block, it should only show elements with roles value of "block". Similarly, by checking the checkbo ...

htmlangularjsmeanjs

Tips for overlaying a webpage with several Angular components using an element for disabling user interactions

I currently have an asp.net core Angular SPA that is structured with a header menu and footer components always visible while the middle section serves as the main "page" - comprised of another angular component. What I am looking to achieve is ...

htmlcsstypescriptasp.net-coreangular12

Why isn't the right-clear property functioning correctly?

My understanding of `clear: left`, `clear: right`, and `clear: both` in CSS has always been a bit fuzzy. I know that `clear: both` means it prevents floating elements from appearing on both sides, but I recently did some testing here. I expected the layout ...

csscss-float

Creating a Star Rating System Using HTML and CSS

Looking for help with implementing a Star rating Feedback on articles in Visualforce page. Came across some code that seems to fit the bill but facing issues with getting it to work when placed in a file and executed, particularly in Firefox. Any assistanc ...

javascripthtmlcsssalesforcevisualforce

What is the best way to create a toggle button that can show more or show less of a text snippet with animation?

Is it possible for someone to assist me with showing a long text partially and providing a "show more" button to reveal the rest, along with a "show less" option, all with some CSS animation? I was thinking of using a font awesome arrow down icon for expan ...

javascripthtmlcss

Having trouble with the full-screen feature not functioning properly?

I am currently in the process of creating a custom video player and I need to include a full-screen button. However, when I click on it, the video does not expand to fill up the entire screen. I am using javascript, css3, and html5 for this project. Any as ...

javascripthtmlcss

Why are my subpages not appearing when using nodejs?

Currently, I'm in the process of creating a basic node app for my website. So far, I have set up my app.js, controllers, and routers. However, I am encountering an issue where two out of three subpages return a 404 error, while the index page works ...

htmlnode.jsexpress

Animating two elements on scroll at specific point with speed problem

Trying to create an animation with two different images once a user reaches a specific point on the page. The animation works, but there is an issue when using a trackpad - the movement appears slow compared to scrolling with a mouse. I've already att ...

jquerycssanimation

How can I implement horizontal scrolling on a material-ui table containing numerous columns?

As I work with the React Material-UI framework, I am using this table example as a guide. However, I am facing an issue where my table becomes overcrowded when I have numerous columns, causing the content to be cut off. I recently came across the material ...

cssreactjsmaterial-designmaterial-ui

Unable to fix position: sticky issue following Angular 15 update

Following the angular material update to version 15, many of us experienced issues with CSS changes breaking. This also affected legacy code that included sticky headers. <div class="row"> <div class="col-12"> <di ...

htmlcssangularangular-material

When the collapse button is clicked, I aim to increase the top value by 100. Subsequently, upon a second click, the top value should

https://i.stack.imgur.com/p9owU.jpghttps://i.stack.imgur.com/Kwtnh.jpg I attempted to utilize jQuery toggle, but unfortunately, it is not functioning as expected. <script> $(document).ready(function () { $(".sidebar ul li&quo ...

javascripthtmljquerycss

What is the best way to make my button sticky across different screen sizes on my webpage?

I'm having trouble figuring out how to make my purple button sticky and responsive on the right side of the screen as I scroll down. Can someone help me with this? This is the snippet of my HTML code: <Col className="colPre"> ...

htmlcssreactjs

Different Ways Split Button Format Can Vary Based on Web Browser

I am encountering a formatting issue with a jQuery splitbutton on my webpage. In order to adhere to my company's design standards, I am essentially converting a link into a button. The functionality works perfectly fine; however, depending on the brow ...

javascriptjqueryhtmlcssinternet-explorer

Guide to switching classes with jquery

On my webpage, I have a star rating system that I want to toggle between "fa fa-star" and "fa fa-star checked" classes. I found some information on how to do this here: Javascript/Jquery to change class onclick? However, when I tried to implement it, it di ...

javascripthtmljquery

How can I retrieve the $index value of an ng-repeat element within a uib-dropdown?

I am currently working on implementing an ng-repeat loop that includes a dropdown menu for each element. I want the dropdown menu to contain functions that operate on the specific element, requiring access to the index of that element. Below is the code sn ...

javascripthtmlangularjsangular-ui-bootstrap

JavaScript detecting improper XHTML syntax

Is there an effective method to detect malformed XHTML within a string using JavaScript? Given that my page allows user-generated XHTML (from trusted users) to be inserted into the DOM, I aim to identify unclosed or overly closed tags. If found, I intend ...

javascripthtmlregexxhtmltags

How come using float:right causes the div to float towards the left instead?

I am new to CSS and currently facing a problem with positioning a div (#inner) in the bottom-right corner of another div (#container). Initially, I used float: right;, but upon inspecting the Html, I noticed that the inner div is appearing in the bottom-le ...

css

Utilizing CSS or JavaScript to define the input type

I currently have a group of checkboxes displayed on a webpage within a DIV labeled OPTIONS, shown below: <div id="options"> <input type="checkbox"..... > <input type="checkbox"..... > <input type="checkbox"..... > <input t ...

javascriptcssformshtml

The <mat-radio-button> component does not have a value accessor specified

When working with HTML and Angular, I encountered the following issue: <mat-radio-group> <mat-radio-button [(ngModel)]="searchType"> And (Narrower search) </mat-radio-button> <mat-radio-button [(ngModel)]="searchType"&g ...

javascripthtmlangularangular-material2

Using Google Fonts in a Typescript React application with JSS: A step-by-step guide

How can I add Google fonts to my JSS for use in styling? const styles = ({palette, typography}: Theme) => createStyles({ time: { flexBasis: '10%', flexShrink: 0, fontSize: typography.pxToRem(20) }, guestname: ...

cssreactjstypescriptjss