The sidebar is concealing my Bootstrap cards

Incorporating the bootstrap cards (shown in the image below) has been successful. However, an issue arises when adding a sidebar and nav bar (included as another file using PHP). The cards on the left side of the screen end up being hidden under the sidebar. Applying the CSS code below adds a 200px margin to each card, but that is not the desired outcome. What is needed is for only the cards on the left to shift towards the left while maintaining the same gap between each card. Attempts with frames have proved unsuccessful.

.cards{
         margin-left:200px;
  }

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

csstwitter-bootstrapbootstrap-4stylingbootstrap-cards

Answer №1

Assuming your html structure is as follows:

<div class="content">
  <aside> ... menu </aside>
  <main> ... cards </main>
<div>

You can apply the following css styles:

.content { display: flex }
aside { width: 200px }
main { width: calc(100% - 200px) }

I hope this addresses your question accurately.

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

Ways to prevent recurring variables in Twitter bootstrap dialogues

I need assistance with deleting multiple links using ajax: <a id="id-1">link1</a> <a id="id-2">link2</a> <a id="id-3">link2</a> <a id="id-4">link2</a> ... This is the simplified version of my code: $(docum ...

javascriptjquerytwitter-bootstrap

Modifying CSS properties in a component using Javascript: A step-by-step guide

Utilizing the vue-form-wizard component initially displays as follows: https://i.sstatic.net/jwWlP.png After customizing the styles to fit my requirements, I encountered two issues. First: The wizard is supposed to commence before the bullets and the pr ...

javascriptcssvue.jsvue-component

Is there a way to specifically target CSS media queries if the device resolution is similar, but the device screen size (measured in inches) varies

I possess two distinct gadgets. 1. T2 light - LCD : 15,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query target : width = 1336px 2. T2 mini - LCD : 11,6“ Resolution : 1920 × 1080 Device pixel ratio : 1.4375 CSS media query t ...

javascriptandroidjquerycss

Use ngFor to align items to the left in your design

I am working on a div element where I need to dynamically add inputs that should form a number with a specific format. To ensure the inputs start from the left, I have applied the justify-content-end class. HTML: <div class='row justify-content-end ...

htmlcssangularbootstrap-4ngfor

Utilizing HTML and Bootstrap to create a collapsible dropdown menu

Is there a way to collapse just the dropdown menu in a navbar into a hamburger icon on small screens, rather than the entire navbar? Example: https://i.sstatic.net/bDxio.png ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

Show a list of groups using JSON information

Looking to showcase a list of individuals using JSON data structures? <pre> <ul class="list-group"> <span class="badge badge-primary badge-pill">A</span> <li class="list-group-item d-flex justify-content-between align ...

javascriptjqueryhtmltwitter-bootstrap

The responsiveness of CSS isn't functioning as expected

Struggling to achieve responsiveness on my page, facing issues with a white border at the top and image fitting problems. Any insights on what might be causing this? CSS: .cb-slideshow, .cb-slideshow:after { position: fixed; width: 100%; hei ...

htmlcss

I've come across a challenge in my React PDF project where I am struggling to display the bottom and right margins, as well as the borders, in my reactPDF

I am currently working on creating a PDF using the @react-pdf/renderer library within my React project. Everything seems to be functioning correctly except for an issue with the right and bottom margins not appearing in the PDF. Strangely, the top and left ...

cssreactjsbordermarginreact-pdf

Detecting Android devices

Issue: My website functions properly on desktop but has a problem with the carousel images skewing on iPhones. To address this, I created a separate CSS styling for iPhone devices and used a JavaScript function found online to detect iPhones and iPads. Un ...

javascriptandroidcssiphone

Issue with embedding Bootstrap modals within other modals

I am facing an issue where opening a modal and then changing the body to a different form using $.ajax. In essence, when the DeleteTaskObjectiveModal triggers the EditTaskModal, it displays a form in the #MainModal. However, all form inputs are malfunctio ...

jquerytwitter-bootstrap

Troubleshooting the sidebar pin-unpin problem using Jquery and CSS

I have created a single side panel that allows me to toggle between opening and closing the sidebar by hovering on it. I can also pin and unpin the sidebar by clicking on the pin image. Now, I want to open the sidebar onClick instead of onHover and remove ...

javascriptjqueryhtmlcsssidebar

The div is leaving the responsive bootstrap gallery

I'm experiencing an issue with my gallery overflowing the parent div and not staying sorted in all screen sizes. Here's a screenshot along with a snippet of the code: https://i.sstatic.net/mKRtZ.jpg <div id="gallery" class="container-fluid" ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to align an image gallery in the center

After referencing this link, I attempted to create an image gallery. However, the code aligned the images to the left side of the page. With a total of 9 images in the gallery, my objective is to arrange them in a 3x3 grid at the center of the page, with ...

htmlcssgallery

Advantages of incorporating CSS modules into React/Vue development

I am curious about the advantages of incorporating CSS Modules into projects with React/Vue. At my workplace, developers currently utilize the following approach during development: return ( <div className={styles.User}> <div classNam ...

cssreactjsvue.jscss-modules

The HTML dropdown menu becomes crowded with numerous <li menu items, leading to it wrapping

One issue arises when the number of menu items exceeds the capacity to fit on a single line, causing them not to wrap from left to right onto the second line. The desired outcome is for the second line of the menu to start on the left just like the first l ...

htmlcss

Menu options disappearing upon clicking within the container area

Every time I click inside the dropdown menus, they unexpectedly close. This issue is persistent in both the Login menu and the nav bar. Although I’m not a seasoned web developer, I suspect it’s just a simple error that I’ve been overlooking all day ...

javascriptjqueryhtmlcss

Struggling to align the login button accurately within the navbar

For proper alignment, the "Login" button needs to be pushed to the right of the navbar alongside other buttons. To see the issue and the code, check out this JSFiddle example: https://jsfiddle.net/sterlingmd17/tk17zjfq/1/ <nav class="navbar navbar ...

csshtmldrop-down-menubootstrap-4

Refresh the browser to update the content of specific columns

$(".home").append($(".home .coco").sort(() => Math.random() - 0.5)); .row{margin-bottom: 30px;} <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-1.11.1. ...

javascriptjquerycsswordpressbootstrap-4

Bony Scaffold - halting the motion of specific components

Currently, I am utilizing skeleton to create a fluid layout, which is functioning effectively for the most part. However, I have encountered an issue specifically with the 2 column layout on Magento at this URL: In this setup, the navigation on the left s ...

htmlcssmagentoskeleton-css-boilerplate

Tips for maintaining fixed div sizes when resizing the window while preserving aspect ratio

Is there a way to maintain the same aspect ratio and keep the left and right divs side by side when resizing the window? I want them to stay consistent without changing no matter how much I resize the window. Here is an example of what I am looking for: ...

javascripthtmlcss