Display text in full width on small screens using Bootstrap col-12, and on larger screens set a

Can someone help me modify this sidebar code snippet so that it collapses on small screens and has a fixed or maximum width on larger screens? I've attempted to set a max-width for the aside element but it's not having the desired effect.

<div class="container-fluid">
            <div class="row wrapper min-vh-100 flex-column flex-sm-row">
                <aside class="col-12 col-sm-2 p-0 bg-dark flex-shrink-1">
                    <nav class="navbar navbar-expand-sm navbar-dark bg-dark align-items-start flex-sm-column flex-row">
                        <a class="navbar-brand" href="#"><i class="fa fa-bullseye fa-fw"></i> Brand</a>
                        <a href class="navbar-toggler" data-toggle="collapse" data-target=".sidebar">
                            <span class="navbar-toggler-icon"></span>
                        </a>
                        <div class="collapse navbar-collapse sidebar">
                            <ul class="flex-column navbar-nav w-100 justify-content-between">
                                <li class="nav-item">
                                    <a class="nav-link pl-0" href="#"><i class="fa fa-heart-o fa-fw"></i> <span class="">Link</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link pl-0 dropdown-toggle text-nowrap" href="#m1" data-parent="#navbar1" data-toggle="collapse" data-target="#m1" aria-expanded="false">
                                        <i class="fa fa-address-card-o fa-fw"></i> <span class=""> Link</span>
                                    </a>
                                    <div class="collapse" id="m1">
                                        <ul class="flex-column nav">
                                            <a class="nav-link px-0 text-truncate" href="#">Sub</a>
                                            <a class="nav-link px-0 text-truncate" href="#">Sub longer</a>
                                        </ul>
                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span class="">Link</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link pl-0" href="#"><i class="fa fa-heart fa-fw"></i> <span class="">Link</span></a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </aside>
                <main class="col bg-faded py-3">
                    <h2>Main</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean maximus iaculis dui vel placerat. Proin dictum sapien et purus mollis, eget tincidunt est varius.</p>
                    <p>Donec sit amet fermentum tortor. Nullam dapibus nisi in quam cursus bibendum. Vestibulum sagittis ante nec nunc volutpat accumsan. Maecenas enim lectus, ultricies eu semper sed, pharetra quis dolor.</p>
                </main>
            </div>
        </div>
htmlcssbootstrap-4

Answer №1

@media (min-width: 768px) {
  
  aside {
    width: 250px !important;
   }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<!-- your code -->

<div class="container-fluid">
            <div class="row wrapper min-vh-100 flex-column flex-sm-row">
                <aside class="p-0 bg-dark flex-shrink-0">
                    <nav class="navbar navbar-expand-lg navbar-dark bg-dark align-items-start flex-lg-column flex-row">
                        <a class="navbar-brand" href="#"><i class="fa fa-bullseye fa-fw"></i> Brand</a>
                        <a href class="navbar-toggler" data-toggle="collapse" data-target=".sidebar">
                            <span class="navbar-toggler-icon"></span>
                        </a>
                        <div class="collapse navbar-collapse sidebar">
                            <ul class="flex-column navbar-nav w-100 justify-content-between">
                                <li class="nav-item">
                                    <a class="nav-link pl-0" href="#"><i class="fa fa-heart-o fa-fw"></i> <span class="">Link</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link pl-0 dropdown-toggle text-nowrap" href="#m1" data-parent="#navbar1" data-toggle="collapse" data-target="#m1" aria-expanded="false">
                                        <i class="fa fa-address-card-o fa-fw"></i> <span class=""> Link</span>
                                    </a>
                                    <div class="collapse" id="m1">
                                        <ul class="flex-column nav">
                                            <a class="nav-link px-0 text-truncate" href="#">Sub</a>
                                            <a class="nav-link px-0 text-truncate" href="#">Sub longer</a>
                                        </ul>
                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link pl-0" href="#"><i class="fa fa-book fa-fw"></i> <span class="">Link</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link pl-0" href="#"><i class="fa fa-heart fa-fw"></i> <span class="">Link</span></a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </aside>
                <main class="col bg-faded py-3">
                    <h2>Main</h2>
                    <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>
                    <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies, forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>
                </main>
            </div>
        </div>


<!-- your code -->







<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/js/bootstrap.min.js"></script>

change the classes on the aside element to new-classname and create a media query rule.

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

Using jQuery to toggle visibility of various elements without needing specific identifiers

I have coded a HTML and JS snippet for displaying and hiding a div element, which is currently functioning correctly. However, I want to be able to use multiple boxes on a single page and I need a way to determine which box-header was clicked. Is there a ...

javascriptjqueryhtml

Enhance the speed of my Tumblr page by using JavaScript for personalized styling tweaks

-- Hey there! Dear Reader, if navigating Tumblr isn't your cup of tea, let me know and I'll provide more detailed instructions! I recently ran into some glitches on my Tumblr page while using the default theme 'Optica'. Whenever I tri ...

javascriptjqueryhtmlcsstumblr

The custom font fails to load on a customized Material UI theme

In my React web application, I tried to implement a custom font by writing the following code: import React, { FunctionComponent } from 'react' import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles' import SofiaPro ...

javascriptcssreactjsmaterial-uifont-face

If the LocalStorage value is empty, relocate to a different location

Upon login, I save the user value to session storage using: localStorage.setItem("user", something); Once logged in successfully, I redirect to a specific page with $location.path('/something'). On this page, I retrieve the user data with $scop ...

javascriptjqueryangularjshtml

Can you provide me with the validation expression for the email format in ASP.NET?

Currently, I am working on validating a text field where users need to enter an email address following a specific format: [email protected] Here are the rules for the email validation: 1) The email address must end with .com. No numbers are allowed ...

c#htmlasp.netvisual-studiovalidation

I'm looking for a way to display the value stored in a variable within an ejs template. Any suggestions

I am experiencing an issue with my ejs template that should greet the user by displaying their name when the page loads, but it is not showing anything. Here's a snippet of my template: <!DOCTYPE html> <html> <head> < ...

htmlexpressejs

Switch up the image automatically after a short amount of time

Hello, I am a beginner in javascript and I have a question. Is it possible for javascript to automatically change an image after a few seconds? This is for my college project and it's quite messy. Below is the code snippet I am working with: <!DOC ...

javascripthtml

Switch from monochrome to color when hovering inside a clipping mask

I have successfully mastered the technique of changing an image from grey to color on hover using CSS and JavaScript. However, I am curious about whether it is possible to achieve the same effect using a clipping mask. Attached is an image that illustrate ...

csshovermaskclipping

Unable to eliminate the unwanted space at the top of the division

I am encountering an issue where I have a div containing a label, but there seems to be some unwanted space above the div that I can't seem to remove. It's puzzling me as to why this space is appearing. Query: What could be causing the space ab ...

htmlcss

Turn off automatic vertical scrolling when refreshing thumbnails with scrollIntoView()

My Image Gallery Slider has a feature that uses ScrollIntoView() for its thumbnails, but whenever I scroll up or down the page and a new thumbnail is selected, it brings the entire page back to the location of that thumbnail. Is there a way to turn off t ...

javascripthtmljquerycsssass

What is the best way to generate a ul-li structure using JSON input and jQuery?

There is a JSON variable present: var links=[{"text":"Home","href":"http://home.com","icon":"fas fa-home","target":"_top","title":"My Home","children":[{"text":"home2","href":"home2.com","icon":"fas fa-chart-bar","target":"_self","title":"home2","category ...

javascriptjqueryhtmljson

PHP - Divide an array into smaller segments

I currently have a variable named $recipe['ingredients']; Within this variable, the contents are listed as: 100ml milk, 350ml double cream, 150ml water I am attempting to separate these ingredients into a list format like so: <ul> & ...

phphtmlcss

Utilizing Material-UI CssBaseline with React JS

Looking to enhance the consistency of my new React app with a sleek design using Material-UI. Want it to be easy to maintain, so decided to start with the default theme. Trying out cssBaseline from Material-UI but running into issues. Not very familiar wit ...

cssreactjsmaterial-ui

Issue with CSS for Pagination and Content Display

When I print an HTML page, I want to include custom text in the header of all printed pages. @page { margin-top:5mm; margin-bottom: 25mm; margin-left: 30mm; margin-right: 30mm; @top-right{ content: "Page title"; /* Page title ...

htmlcsscss-paged-media

Show a div element once you reach the bottom of the webpage

I have successfully implemented a feature where the footer appears when scrolling up and disappears when scrolling down. However, I am now looking to make it appear when I reach the bottom of the page. Check out my JSFiddle here // Display Footer when at ...

javascriptjqueryhtmlcss

Add a new string to a class within a Vue.js component

Hey there, currently working on a Vue component where I am iterating through a list of countries. Here's how it looks: <div v-for="i in countries" :key="i.id"> {{i.name}} <span class="flag-icon-gr"></span> I want to dynamically ...

cssvue.jsnuxt.js

Is there a way to use jQuery to efficiently refresh all values within a table?

Whenever I click the "Update All" button, I want all the CHANTIERS values in each line of the list of SALARIES to be checked and updated according to the value selected in the dropdown list. For example, if I choose the value 1 in the dropdown list and cli ...

jqueryhtml

The central navigation system of the Owl Carousel

I am currently using the owl carousel plugin and I am struggling to figure out how to center align the navigation vertically while also using the autoHeight option. http://codepen.io/anon/pen/jJAHL I have attempted the following code snippet, but it seem ...

jquerycssowl-carousel

Will PhoneGap applications reset after being updated?

I'm currently working on an iOS PhoneGap app with plans for future updates. One concern I have is that sometimes these updates are not backwards-compatible, and I worry that the app may still be using an outdated cache or session despite the update. ...

iphonehtmlcordovalocal-storage

Having Trouble with the Bootstrap Responsive Menu Button Not Working

I'm struggling with the Bootstrap menu I created, as it's not collapsing or animating. Everything seems to be working fine except for the button that isn't functioning. <nav class="navbar navbar-expand-lg navbar-light bg-dark alb ...

htmlcsstwitter-bootstrapbootstrap-4menu