Is there a way to achieve this design using bootstrap?

I am aiming to create a layout similar to this. My goal is to have a fixed sidebar on the left that measures 330px wide. Additionally, I want a gray box positioned at the center of the screen that adjusts its position based on changes in the content above it.

Currently, I am struggling with aligning the gray box and the dynamic content box perfectly in the center of the screen. Here is my current setup:

<html style="height: 100%">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>



<body style="height: 100%;">
  <div class="container-fluid h-100">
  <div class="h-100 d-flex align-items-center">
    <div class="row">
        <div class="col" style="-ms-flex: 0 0 330px;flex: 0 0 330px;">
            <div class="card" style="margin-bottom: 10px; width: 330px;">
                <div class="card-body align-items-center">
                    Sidebar stuff
                </div>
            </div>
        </div>
        <div>
            <div id="this_is_the_box_with_contant" style="width: 700px;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliqua...
            <input id="this_is_the_gray_box" type="button" class="btn" value="" style="background-color:lightblue; width: 350px; height: 350px; border: solid 50px grey;border-radius: 50px;margin:auto" />
        </div>
    </div>
</div>

</div>
</body>
</html>

When viewing the layout in full-screen mode, there appears to be excess space to the right of both boxes. I suspect that adjustments need to be made to the div element without any specific content.

What steps should I take to address this issue? It's essential for me to keep the body and the initial container-fluid element unchanged.

htmlcsstwitter-bootstraplayout

Answer №1

To center the content, I simply added margin:auto; to the parent div and margin:auto; display:flex; to the gray box.

Remember, it's a good idea to keep your CSS in a separate file for better organization. 

<div class="container-fluid h-100">
  <div class="h-100 d-flex align-items-center">
    <div class="row">
        <div class="col" style="-ms-flex: 0 0 330px;flex: 0 0 330px;">
            <div class="card" style="margin-bottom: 10px; width: 330px;">
                <div class="card-body align-items-center">
                    Sidebar content
                </div>
            </div>
        </div>
        <div style="margin: auto;">
            <div id="content_box" style="width: 700px;">Lorem ipsum dolor sit amet... (content continues)
            <input id="gray_box" type="button" class="btn" value="" style="background-color:lightblue; width: 350px; height: 350px; border: solid 50px grey;border-radius: 50px; margin:auto; display:flex;">
        </div>
    </div>
</div>

</div>

Answer №2

  1. Eliminate the d-flex class from the div that has both h-10 and align-items-center classes.
  2. Include width: 100% to the card class on the div. The card class will automatically expand to fill the width of its parent due to the existing flex: 0 0 300px on the parent.
  3. Apply the sticky-top class to the card for a fixed positioning effect.
  4. Integrate display: block into the this_is_the_gray_box class to properly center the element.

<html style="height: 100%">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<body style="height: 100%;">
  <div class="container-fluid h-100">
    <div class="h-100 align-items-center"> <!-- remove d-flex  -->
      <div class="row">
        ....
            <, consetetur sadipscing elitr, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>
        </div>
        ...et amet.</div>
      </div>
    </div>
  </div>

</body>
</html>

Edit: Additional text has been inserted into the body section for testing purposes.

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

Is it not recommended to trigger the 'focusout' event before the anchor element triggers the 'click' event?

In a unique scenario, I've encountered an issue where an anchor triggers the 'click' event before the input field, causing it to lose focus and fire the 'focusout' event. Specifically, when writing something in the input field and ...

javascripthtml

Arrange the divs in a horizontal line without stacking them vertically, specifically in Internet Explorer 7

I have a fixed container that contains another container with multiple DIVs based on user choices. I want these DIVs to align horizontally to allow for horizontal scrolling, without any vertical scrolling. For example: [x] [x] [x] Here is a simplified ve ...

cssxhtmlhtmlinternet-explorer-7

Troubleshooting Problems with CSS Span Placement

Challenges with Span Positioning in CSS Currently, I am encountering difficulties while working on the index.html.erb file for an example Rails website. Below is a snippet of the HTML code I am struggling with (please note that this is simply a fabricated ...

htmlcssruby-on-railscss-position

Styling a submission button with HTML and CSS

I've tried following a few solutions on Stack Overflow, but I just can't seem to get this simple line of code to work. <a class="lp-element lp-pom-button" id="lp-pom-button-25"><span class="label" style="margin-top: -10px;">Get Notif ...

htmlcss

Why does the browser keep converting my single quotation marks to double, causing issues with my JSON in the data attribute?

This task should be straightforward, but I seem to be facing a roadblock. I am trying to insert some JSON data into an input's data attribute, but the quotes in the first key are causing issues by prematurely closing the attribute. Here is the code ...

javascriptjqueryhtmljson

Form fields in Bootstrap 4 will consistently expand downward in the select dropdown menu

When using bootstrap 4, I want my field to always expand downwards and never upwards, even when half the screen is taken up by the form's select element. How can I achieve this effect? I have tried using data-dropup-auto="false" but it didn't wo ...

javascriptcssbootstrap-4

The H1 heading sets the stage, layered behind the captivating background image

I'm having trouble getting the h1 header to stand out over a background image with a box-like color for the header. Every time I make changes to the h1, they seem to be hidden behind the background image and only briefly show before being covered up. ...

htmlcssflexbox

Blend a background image using rgba without incorporating a gradient effect

Can you merge a background image with an rgba color without resorting to an rgba gradient? My current CSS3 style appears as follows: html { background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url("../icons/sombrero.jpg")no-repe ...

htmlcss

Generate a new row for every value in a C# dropdown either before or after a Pipe character

I am facing a challenge with the custom attribute values for products in my database. To store these values, I save them as a character-separated list using the pipe symbol to separate each size. For instance, let's consider an Orange Dress with a cu ...

c#htmlarraysasp.net

How can AngularJS utilize ng-repeat and ng-bind-html to display arrays of HTML strings?

I'm currently attempting to display HTML strings from an array of HTML strings in my AngularJS project. As a newcomer to AngularJS, I have been trying to follow the examples provided on the official AngularJS website, but I am struggling to find a sui ...

javascripthtmlangularjsangularjs-ng-repeatng-bind-html

What is the best way to target outer elements only using CSS selectors?

Having trouble with a CSS selector: $("td.cv-table-panel-element") This selector returns a list of elements, shown in the screenshot linked below: https://i.stack.imgur.com/RoVMj.png Each element represents a column in a table with unique content. The ...

jqueryhtmlcssjquery-selectorscss-selectors

Customizing R Shiny: Changing the color of a menu item upon selection of any submenu item

Seeking assistance with updating the color of the menuitem in a shiny app to match the active submenuitem. Currently, the active submenuitems are highlighted differently from non-active submenuitems, but we want the main menuitem to also change color when ...

cssrshinyshinydashboard

Concerns with combining key value pairs in Typescript Enums

Could you help me figure out how to properly implement an enum in my drop-down so that I can only display one value at a time? Currently, I am seeing both the key and the value in the list. This is my enum: export enum VMRole { "Kubemaster" = 0, "Kub ...

htmlangulartypescript

The class is failing to be applied to the parent div that holds an id starting with the letter x

I have been attempting to assign a class to the parent container when the child element has the 'hidden' class. If not, then a different class should be added. function tagMissions() { if ($('span[id^="mission_participant_new"]').h ...

javascriptjqueryhtmlcss

HTML tags are permitted in the contact form 7 area

Is there a way to include a contact form 7 shortcode in an HTML area that only allows HTML tags? [contact-form-7 id="2358" title="Contact Form 1"] I am trying to incorporate the 3rd slide on my website from this URL: ...

phphtmlwordpresscontact-form-7

How to maintain HTML list items in a single line while overlaying text

I'm seeking assistance with understanding how to solve a particular issue. I have multiple list elements with varying lengths of text content, each flanked by small images/icons on either side. Below is an example of the HTML structure: .truncate ...

htmlcss

Obtain the controller name from the current scope

I am trying to assign a controller named in the scope of another controller JavaScript file: .controller('PageCtrl', [ '$http', '$scope', '$routeParams', '$location', function($http, $scope, $ro ...

javascripthtmlangularjsangularjs-scope

What is the best way to position two text fields next to each other on a webpage?

As I design a form for a landing page, my goal is to arrange the text input fields side by side in order to avoid making the form too lengthy. I am striving to achieve a layout similar to this: https://i.sstatic.net/PTCr4.png However, the task seems quit ...

htmlcss

Issue with submitting form using Jquery on select action

There seems to be an issue with this jquery code that is supposed to trigger a form submit when a drop down select is changed. It works fine on our test site, but once we move it to the live website, it breaks. Can someone help us troubleshoot and identify ...

jqueryhtmlasp-classic

Steps for creating a link click animation with code are as follows:

How can I create a link click animation that triggers when the page is loaded? (function () { var index = 0; var boxes = $('.box1, .box2, .box3, .box4, .box5, .box6'); function start() { boxes.eq(index).addClass('animat ...

javascriptjquerycss