Designing a nested box layout with bootstrap HTML/CSS styling

Can anyone provide guidance on how to create a HTML/CSS layout similar to the image below?

I am specifically struggling with designing the silver "Add corkscrew" box, a white box beneath it, and then another silver box nested within. Any suggestions on how I can achieve this look?

Below is the code I have attempted so far, although it does not resemble the desired image:

{% extends 'bootstrap/base.html' %}

{% block content %}
    <div class="container">
        <div class="row row-content">
          <div class="col-xs-12 col-sm-6 text-right">

          <div class="row">
              <h2><font color="black">CorkBoard</font></h2>

          </div>

        </div>

        <div class="row row-content">
            <div class="col-xs-12 col-sm-6">
              <form action="/add-corkboard" method="POST" class="form-horizontal" role="form">
                <!-- Email -->
                <div class="form-group">
                  <label for="emailid" class="col-sm-3 control-label" style="font-weight: normal">Title</label>
                  <div class="col-sm-9">
                    <input type="email" class="form-control" id="emailid" name="emailid" placeholder="Enter your email account">
                  </div>
                </div>

                <div class="dropdown">
                  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Dropdown
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#" data-value="action">Home & Garden</a></li>
                    <li><a href="#" data-value="another action">Education</a></li>
                    <li><a href="#" data-value="something else here">People</a></li>
                    <li><a href="#" data-value="separated link">Separated link</a></li>
                  </ul>
                </div>

              </form>
            </div>
        </div>
    </div>
{% endblock %}





    </body>
</html>
htmlcss

Answer №1

If you're looking to kickstart your project, consider this suggestion. I recommend separating the inline styles into their own classes, regardless of the example.

While not my preferred method, this is mostly the bootstrap way. I changed all containers to container-fluid, which also resolved another issue I observed with responsiveness

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</head>

<body>
  <div class="container-fluid" style="background-color:silver">
    <div>
      <h6>Add CorkBoard</h6>
    </div>
    <div class="container-fluid" style="background-color:white">
      <div class="row row-content">
        <div class="col-xs-12">
          <br />
          <div class="container-fluid" style="background-color:silver">
            <div class="row row-content">
              <div class="col-xs-12 col-sm-6 text-right">

                <div class="row row-content">
                  <div class="col-xs-12 col-sm-6">
                    <h2>
                      <font color="black">CorkBoard</font>
                    </h2>
                  </div>
                </div>

              </div>

              <div class="row row-content" style="padding:15px">
                <div class="col-xs-12 col-sm-6">
                  <form action="/add-corkboard" method="POST" class="form-horizontal" role="form">
                    <!-- Email -->
                    <div class="form-group">
                      <label for="emailid" class="col-sm-3 control-label" style="font-weight: normal">Title</label>
                      <div class="col-sm-9">
                        <input type="email" class="form-control" id="emailid" name="emailid" placeholder="Enter your email account">
                      </div>
                    </div>

                    <div class="dropdown">
                      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        Dropdown
                        <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#" data-value="action">Home & Garden</a></li>
                        <li><a href="#" data-value="another action">Education</a></li>
                        <li><a href="#" data-value="something else here">People</a></li>
                        <li><a href="#" data-value="separated link">Separated link</a></li>
                      </ul>
                    </div>

                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row row-content">
        <p></p>
      </div>
    </div>
    <div class="row row-content">
      <p></p>
    </div>
  </div>
</body>

</html>

However, with some custom CSS tweaks, you can achieve a more aesthetically pleasing layout and easily customize it according to your preferences.

<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style type="text/css" media="all">
    .box {
      background-color: silver;
      padding-bottom: 10px;
      padding-left: 10px;
      padding-right: 10px;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }
    
    .boxinabox {
      background-color: white;
      width: 100%;
      padding: 2.5%;
    }
  </style>

</head>

<body>
  <div class="container-fluid box">
    <h6>Add CorkBoard</h6>
    <div class="boxinabox">
      <div class="container-fluid" style="background-color:silver">
        <div class="row row-content">
          <div class="col-xs-12 col-sm-6 text-right">

            <div class="row row-content">
              <div class="col-xs-12 col-sm-6">
                <h2>
                  <font color="black">CorkBoard</font>
                </h2>
              </div>
            </div>

          </div>

          <div class="row row-content" style="padding:15px">
            <div class="col-xs-12 col-sm-6">
              <form action="/add-corkboard" method="POST" class="form-horizontal" role="form">
                <!-- Email -->
                <div class="form-group">
                  <label for="emailid" class="col-sm-3 control-label" style="font-weight: normal">Title</label>
                  <div class="col-sm-9">
                    <input type="email" class="form-control" id="emailid" name="emailid" placeholder="Enter your email account">
                  </div>
                </div>

                <div class="dropdown">
                  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Dropdown
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#" data-value="action">Home & Garden</a></li>
                    <li><a href="#" data-value="another action">Education</a></li>
                    <li><a href="#" data-value="something else here">People</a></li>
                    <li><a href="#" data-value="separated link">Separated link</a></li>
                  </ul>
                </div>

              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

If this wasn't what you were asking about, I apologize for going off-topic. Please let me know if I did.

Answer №2

Rows must consist of columns, as illustrated below:

<div class="row">
    <h2><font color="black">CorkBoard</font></h2>
</div>

To correct this, you should include a column within the row like so:

<div class="row row-content">
    <div class="col-xs-12 col-sm-6">
        <h2><font color="black">CorkBoard</font></h2>
    </div>
</div>

Don't forget to enclose your dropdown class with rows and columns as well.

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 possible to selectively load only a few images on a website that contains numerous

My website displays numerous images hosted on a server. Each page contains a maximum of 100 images, each within its own div element. At any given moment, only one div is visible due to the CSS "display" property, while the others are hidden using display:n ...

javascripthtml

What is the method to alter the color of the browse button?

I am currently utilizing a custom file input feature from Bootstrap: https://i.sstatic.net/ybCYl.png Is there a way to modify the color of the "Browse" button? My attempts so far: Added a color tag to custom-file-input Added a color tag to custom-file- ...

cssbootstrap-5

I am having trouble displaying the background on my website using css/html

I'm currently working on enhancing my website BJBGaming1.com, and I've encountered an issue with setting a background. Here's the code snippet I have: <!doctype html> <html class="no-js" lang="en"> <head> <meta charset= ...

htmlcssbackground

jQuery import children into output

When inserting a div every nth-child and later calling the children of the parent, the jQuery inserted elements do not appear in this new list. How can I retrieve the inserted elements as well? Apologies if this is confusing. If it's easier to under ...

javascriptjqueryhtmlscroll

Seeking help with a problem regarding the Tooltip Effect not displaying over a button

I'm currently struggling with implementing a tooltip for the "Back-end" button on my webpage. Despite my efforts, the tooltip effect fails to display over the button, and I'm at a loss as to why. Below is the code snippet I am working with: < ...

htmlcsstooltipeffect

Unable to alter fxFlex property within Component using "setAttribute('fxFlex', '25%')" does not function properly in Angular 6

Currently, I am utilizing the flexLayout module to create responsive divs in my Angular application. You can find more information about flexLayout at https://github.com/angular/flex-layout and also at https://alligator.io/angular/flex-layout/. const nav ...

htmlangulartypescriptfrontendangular-flex-layout

Convert your flexible designs into dynamic HTML with our Flex to HTML/A

Looking for a solution to transform Flex code into Html/Ajax code. Most of my Flex code includes datagrids, buttons, and text labels. ...

htmlajaxapache-flex

Can you guide me on implementing CSS Houdini in Next.js?

Exploring the world of CSS Houdini in my Next.js project has been quite an adventure. After successfully installing the necessary CSS Houdini package and css-paint-polyfill using yarn, I decided to follow the webpack guidelines provided at . Below is a sn ...

cssreactjswebpacknext.jscss-houdini

My desire is to have the left image's position set as sticky

Currently, I am attempting to update the image positioning on this page for the T500 Smart Watch: I want it to look similar to how it appears here: Here is the CSS code I have experimented with: .storefront-full-width-content.single-product div.product ...

csswordpress

What's the best way to capture an element screenshot using JavaScript?

I'm working on developing a unique gradient selection application. One of the exciting features I would like to incorporate is the ability for users to save their chosen gradients as digital images (.jpg format) directly onto their computers. When the ...

javascripthtmlscreenshot

Bootstrap 3.2.0 Grid Column Creation Problem Identified

On my webpage using Bootstrap 3.2.0, I have a layout that includes dynamic column generation and content within those columns. However, I am facing an issue with this setup. Can anyone advise me on how to resolve it? Your help is greatly appreciated. ...

csstwitter-bootstraptwitter-bootstrap-3

Tips for inserting active class on the main menu and adding an active class along with an icon on the sidebar menu

I am working on a website where I want to add the active class only when a user clicks on the top menu. However, if the user chooses something from the sidebar menu, I also want to add an icon arrow next to it. Any ideas on how I can achieve this? Check o ...

jquerycss

Adding an Icon to a Tab in Ant Design - A Step-by-Step Guide

Is there a way to include an icon before the title of each open tab? I am currently using the antd library for tab creation, which doesn't provide a direct option for adding icons. Here is my code snippet along with a link to the jsfiddle https://jsfi ...

javascriptcssreactjsantd

Tips for achieving horizontal alignment of headers

My webpage has two headers positioned as 'CompanyName' on the top left and 'Date' at the top middle but I am struggling to align them horizontally. I attempted to enclose them inside a div element, however, this did not work. Can someon ...

htmlcssasp.net-mvc

What is the best method for selecting or deselecting all checkboxes except for one using a single checkbox in angularjs

$scope.checkAll = function() { if ($scope.selectedAll) { $scope.selectedAll = true; } else { $scope.selectedAll = false; } angular.forEach($scope.MyProducts, function(item) { item.Selected = $scope.selectedAll; }); /*});*/ } <di ...

javascriptcssangularjshtml

Troubleshooting Problems with Owl Carousel Loading

Having trouble with Owl Carousel loading issue. I've set up my carousel using the Owl Carousel jQuery plugin as guided, but it's showing me an "owl-carousel loading" class added to the DOM (owl-loading). I've tried adding custom styles and J ...

javascriptjqueryhtmlowl-carousel-2

Creating a javascript function to update content on click

Recently, I've been designing a webpage and encountered an issue. I want the text in a specific area to change whenever a user clicks on a link. Below is the code snippet related to the section I want to modify using a JavaScript function. <div id ...

javascriptjqueryhtmlcss

Animating Text Around a Circle Using HTML5 Canvas

Can someone please help me figure out what is wrong with this code? It's not rotating as it should, and the text looks messed up. I've been trying to solve this problem for hours but can't seem to get it right. function showCircularNameRot ...

javascripthtmlcanvashtml5-canvas

Issue with AngularJS causing HTML input field to limit the display to only three digits

Whenever I input a number with 4 digits or more (excluding decimals) into the designated box, it mysteriously disappears once I click away (blur). Could it be due to the currency filter causing this issue? Even though the model retains the value when logg ...

javascripthtmlangularjsinputfilter

Tips for modifying CSS when a user scrolls beyond a specific div

Currently, I am working on implementing a scroll function that dynamically moves elements based on the user's scrolling behavior. The code I have written works to some extent and successfully moves the elements. However, my goal is to create a list o ...

javascriptjqueryhtmlcss