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

Utilize JavaScript to enclose every piece of text within single quotes in a span element

I have a tiny snippet of text: "some sample text" just a little more "additional text" I am trying to figure out how to wrap all the content between quotation marks in a span container, similar to what hilight.js does. I've been struggling to make it ...

javascripthtml

What is the best approach to increase the height of a div element dynamically

I've encountered an issue with a div tag containing an image that may exceed the screen size. When this happens, I want to increase the height of the div tag and have a footer displayed below it. Currently, my styling for the div tag looks like this: ...

htmlcss

Automatically populating username and password fields

Is it possible to set up automatic username and password filling on my website for users who have saved their login information in their browser? I want the user to just hit enter to login. Some websites already have this feature enabled, but others requi ...

javascriptphphtmlforms

Is there a Container with a Heading in Material UI?

Does anyone know how to create a container with a top title like the one shown in this screenshot: I've attempted using Box or Paper components, but I can't seem to find the option for a top title. Any suggestions? Thanks in advance for any ass ...

htmlreactjsmaterial-uifieldset

The issue with displaying Fontawesome icons using @import in CSS-in-JS was not resolved

I recently changed how I was importing Fontawesome icons: src/App.css @import "@fortawesome/fontawesome-free/css/all.css";` After shifting the @import to CSS-in-Js using emotion: src/App.js // JS: const imports = css` @import "@fortawes ...

javascriptcssreactjsemotioncss-in-js

The <nav> and <section> elements are not appearing on the page

Website: CSS: Hello there! I am experiencing an issue where the nav and section elements are not displaying on my website. They seem to only show the height and background-color attributes. Interestingly, they appear correctly on my old Firefox version ( ...

csshtmlnav

display:none !important style elements shown (jQuery)

According to the jQuery documentation on .show() A reminder: If you are using !important in your styles, like display: none !important, you will need to override this style by using .css('display', 'block !important') if you want ...

jquerycssshow

Tips for ensuring all images are the same size within a div element

https://i.stack.imgur.com/EkmWq.jpg Is there a way to make sure all the images fit perfectly inside their respective border boxes without appearing stretched? I've tried setting fixed height and width within a div, but they always end up looking off. ...

javascripthtmlcssstyled-components

limited growth of float variable

I am utilizing CSS code to create column a and column b, using float in the code to dynamically expand column a as content is added to column b. However, this expansion is not occurring as expected. To see my code, please visit http://jsfiddle.net/hadinetc ...

htmlcss

Preserve the iframe src value in the dropdown menu even after the page is refreshed

I am trying to figure out how to prevent the iframe src from changing when I refresh the page, unless the user manually changes it using the dropdown menu with JavaScript. Can someone help me with this? <div class="row"> <div class="span9"> ...

javascriptjqueryhtmliframe

Tips on changing the outline color by clicking

I'm working on a simple code where I need to change the outline color when a user clicks on a text field. <input type="text" id="box1" /> <input type="password" id="box2" /> <input type="email" id="box3" /> <input type="submit" ...

javascriptjqueryhtmlcss

Seeking a light-weight, text-rich editor specifically designed for use on our enterprise website. This editor should be even lighter than TinyMCE

I am in search of a lightweight text editor for an enterprise website, lighter than tinymce with basic buttons for the comment form. It is imperative that the editor also functions properly in IE6. So far, I have tried cleditor 15KB, but it has an issue in ...

javascriptjquerycsstextareatext-editor

Tips for ensuring that jQuery is the first script to load in the header of a WordPress website

My website and plugins are inserting some jQuery code between the HTML tags, along with a jQuery dependent plugin as the first script tag. No matter what I do to insert jQuery as the first script in the head section, it doesn't seem to work. I have a ...

jqueryhtmlwordpressheader

A guide on embedding the flag status within the image tag

I would like to determine the status of the image within the img tag using a flag called "imagestatus" in the provided code: echo '<a href="#" class="swap-menu"><img id="menu_image" src="images/collapsed.gif" hspace = "2"/>'.$B-> ...

phpjavascriptcssimage

Is there a way to retrieve the initial value from the second element within the JSON data?

Exploring JSON Data Collections In my JSON data, I have two collections: FailedCount and SucceededCount. { "FailedCount": [{ "FailedCount_DATE_CURRENT_CHECK": "2016-11-30 10:40:09.0", "FailedCount_DATE__CURRENT__CHECK": "10:40:09", "FailedCo ...

javascripthtmljsonreturn-value

What is causing the unexpected impact of the "Product Quick View" JavaScript plugin on divs that are not being activated by user interaction?

As a newcomer to web design, I have implemented the "Product-Quick-View" plugin from CodyHouse on my website. Upon clicking the DEMO button and inspecting the code, you will find the following: <body> <header> <h1>Product Q ...

javascripthtmlcssplugins

Updating values using jQuery when tags in a single table row are changed

In my current setup, I have a table structured as follows: <table> <tbody> <tr> <td> <input type="text" class="identifier" /> </td> <td class="name"> Some value < ...

jqueryhtml

Fade-In and Fade-Out CSS Effect with Background Images Displaying a Blank Last Image

I've been experimenting with applying a CSS-only background image transition to a div, but I encountered an issue where after cycling through three specified images, the background reverts back to the original black color. Even stranger, when I adjust ...

htmlcss

How can I customize the appearance of a checkbox button in JavaFX?

I am currently working on styling a JavaFX scene with CSS in a stylesheet. The goal is to apply styles to all the "basic" elements of the scene when it loads. My issue lies in finding the correct code combination to change the background color of a button ...

csscheckboxjavafxstyling

What methods can be used to accomplish this effect using CSS and/or Javascript?

Is there a way to achieve the desired effect using just a single line of text and CSS, instead of multiple heading tags and a CSS class like shown in the image below? Current Code : <h2 class="heading">Hi guys, How can i achieve this effect using j ...

javascripthtmlcssnewline