Design a unique CSS box using Bootstrap

Hey there! I'm currently working on creating a CSS box with Bootstrap. If you'd like to take a look, feel free to check it out here.

  • I noticed that the padding box isn't affecting the margin-top - any ideas why?
  • Also, I'm trying to get the inputs to align properly, but they're not cooperating. Any suggestions?

Below is the HTML code that I've been using:

<div class="row">
            <div class="col-sm-8 CssBox">
                <div class="MargingBox">
                <input type="text" class="form-control" id="MarginTop" placeholder="-">
                <input type="text" class="form-control" id="MarginRight" placeholder="-">
                <input type="text" class="form-control" id="MarginBottom" placeholder="-">
                <input type="text" class="form-control" id="MarginLeft" placeholder="-">
                    <div class="BorderBox">
                    <input type="text" class="form-control" id="BorderTop" placeholder="-">
                    <input type="text" class="form-control" id="BorderRight" placeholder="-">
                    <input type="text" class="form-control" id="BorderBottom" placeholder="-">
                    <input type="text" class="form-control" id="BorderLeft" placeholder="-">
                        <div class="PaddingBox">
                        <!--<input type="text" class="form-control" id="PaddingTop" placeholder="-">
                        <input type="text" class="form-control" id="PaddingRight" placeholder="-">
                        <input type="text" class="form-control" id="PaddingBottom" placeholder="-">
                        <input type="text" class="form-control" id="PaddingLeft" placeholder="-">-->
                        </div>
                    </div>
                </div>
            </div>
jqueryhtmlcsstwitter-bootstrap

Answer №1

To create a top margin, you have the option of using either float:left or display: inline-block;.

.CssBox .MargingBox {
position: relative;
border: 1px dashed #CCC;
height: 250px;

}
.CssBox .BorderBox {
background-color: #e3e7ed;
    float: left;
    height: 166px;
    margin: 44px;
    position: relative;
    width: 100%;

}
.CssBox .PaddingBox {

background-color: #ff0000;
    float: left;
    height: 86px;
    margin: 44px;
    width: calc(100% - 90px);

}
.CssBox input {
width: 30px !important;
height: 25px;
position: absolute;
padding: 5px;
text-align: center;
border-radius: 0;
}
.CssBox .MargingBox input#MarginTop ,
.CssBox .BorderBox input#BorderTop ,
.CssBox .PaddingBox input#PaddingTop {
left: 45%;
top: 12px;

}
.CssBox .MargingBox input#MarginRight , 
.CssBox .BorderBox input#BorderRight ,
.CssBox .PaddingBox input#PaddingRight{
top: 50%;
right: 8px;

}
.CssBox .MargingBox input#MarginBottom, 
.CssBox .BorderBox input#BorderBottom ,
.CssBox .PaddingBox input#PaddingBottom{
left: 46%;
bottom: 6px;
}
.CssBox .MargingBox input#MarginLeft,
.CssBox .BorderBox input#BorderLeft ,
.CssBox .PaddingBox input#PaddingLeft{
top: 46%;
left: 8px;

}
<div class="modal-body">
 <div class="row">
 <div class="col-sm-8 CssBox">
 <div class="MargingBox">
 <input type="text" class="form-control" id="MarginTop" placeholder="-">
 <input type="text" class="form-control" id="MarginRight" placeholder="-">
 <input type="text" class="form-control" id="MarginBottom" placeholder="-">
 <input type="text" class="form-control" id="MarginLeft" placeholder="-">
 <div class="BorderBox">
 <input type="text" class="form-control" id="BorderTop" placeholder="-">
 <input type="text" class="form-control" id="BorderRight" placeholder="-">
 <input type="text" class="form-control" id="BorderBottom" placeholder="-">
 <input type="text" class="form-control" id="BorderLeft" placeholder="-">
 <div class="PaddingBox">
 <!--<input type="text" class="form-control" id="PaddingTop" placeholder="-">
 <input type="text" class="form-control" id="PaddingRight" placeholder="-">
 <input type="text" class="form-control" id="PaddingBottom" placeholder="-">
 <input type="text" class="form-control" id="PaddingLeft" placeholder="-">-->
 </div>
 </div>
 </div>
 </div>
 </div> 
  <div class="col-sm-4"></div>
      </div>

Answer №2

Here is the solution I found for your padding box:

If the inputs are not aligned, it may be because you have provided specific top, left, right, and bottom values to both boxes' inputs. This could be causing them to take on each other's positions. You might want to work on that aspect.

.CssBox .PaddingBox {
    position:relative;
    top:25%;
    margin: 44px;
    height:86px;
    background-color: red;
}

Feel free to check out the JSFiddle example:

DEMO

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 shift the image within the <canvas> element without having to redraw the entire canvas?

I created a game board and I am trying to implement drag-and-drop functionality for my pieces, which are in .gif format. However, I am struggling with finding a solution that allows me to move the pieces without constantly redrawing the entire board. Cur ...

javascripthtml

Variations in CSS display across various browsers

I'm currently facing an issue while learning web development. The expected result only appears when I preview my website on an old version of Internet Explorer, but it doesn't show up correctly when opened on Firefox or Chrome. The code I have i ...

htmlcss

What is the best way to integrate TimeOut feature into an existing slider code?

I'm currently working on a simple slider with buttons that is functioning well. However, I am looking to incorporate the TimeOut() function into the existing code to enable automatic slide transitions. My attempts to achieve this using jQuery have be ...

javascriptjquery

The substance (singular word) extends beyond the margins of the mobile screen

I am facing an issue on my webpage where the title is too long and it goes out of the page on mobile devices. Here is an example: <div class="module-head"><h3 class="module-head-title">Search Engine Optimization - Why Is It ...

htmlcssbootstrap-4

Create a PHP script to automatically generate lists in HTML from a text file

I am currently working on a content management system and have encountered a small issue. Imagine this scenario: I have a text file containing the following: [b]Some bold text[/b] [i]Italic[/i] - List item 1 - List item 2 - List item 3 # List item 1 # Li ...

phphtmlhtml-lists

if there is an error in a JavaScript statement

<!DOCTYPE html> <html> <head> </head> <body> <hr> <div> <div id="myPosition"> </div> </div> <hr> <!--Storing the gun array --> <div id ...

javascripthtml

Retrieving the correct selected value from multiple select tables created through a for loop can be achieved using JavaScript or jQuery

Despite searching Google and asking previous questions, I have not found a solution that addresses my specific issue. The common responses only pertain to one select element with multiple options. To further clarify, when I create code for a loop to genera ...

javascriptjqueryjsonajaxdom-events

Is horizontal spacing automatically added to <img> elements in Bootstrap? And if it is, how can this default setting be changed or overridden?

I'm currently working on the design for a homepage where I want to showcase the same image repeated 4 times in a row, creating a decorative banner effect. Each image is set to occupy 25% of the screen width, which should theoretically fit perfectly si ...

csstwitter-bootstrap

Adjusting the size of all elements on a webpage

Upon completing my project, I noticed that my localhost:3000 is zoomed in at 125%, causing it to appear less than ideal at 100% zoom. Is there a way to adjust the zoom/scale of my website to match how it appeared on my localhost environment? I came across ...

javascriptcssreactjszooming

Authenticating Users with HTML in Django

I am experiencing an issue with the following condition: {% if object.author == user or object.res_person_1_username == user %} When I display variables using code like this: <p class="article-content mb-1"><strong>object.res_person_ ...

pythonhtmldjangoauthentication

Changing the width of the file input using css

Clicking just below the word demonstration also triggers a click on the input type file. How can this be avoided so that the click event only fires in the intended area regardless of size? <!DOCTYPE html> <html> <body> <style> in ...

javascriptjqueryhtmlcss

Unable to connect to a style sheet

I'm in the process of developing a web application and I'm facing an issue with linking a stylesheet to my app. Check out my code below: <html> <head> <title>Bubble</title> </head> <link rel=" ...

css

Tips for integrating PHP code within jQuery to update a database table

In my current project in the banking industry, I am tasked with implementing a PHP code that will update a database table upon a successful transaction using AJAX. Specifically, when a request is sent from fundtransfer.php to an external API and the API ...

phpjquerymysqlajax

The size of the cursor varies depending on the line it's placed on

I have a content editable div where three lines are separated by BR tags. When I click on the second line, the cursor becomes bigger than that in the first line. .content { line-height: 35px; } <div class="content" contenteditable="true"> ...

javascriptjqueryhtmlcss

Utilizing jQuery and AJAX, execute a PHP query based on the user's input and showcase the query's outcome without reloading the page

For the past 24 hours, I've been on a quest to find a solution. Although I've come across similar inquiries, either the responses are too complex for my specific scenario (resulting in confusion) or they are of poor quality. The crux of my issue ...

javascriptphpjquerymysqlajax

What could be causing my jQuery $(this).next().removeAttribute to not function properly?

I am currently working on a file upload form that includes buttons like "Choose file", "Upload", and "Add other file". I am facing an issue where the "disabled" attribute is successfully removed from the first Upload button upon File Input change, but it ...

jqueryhtml

What's causing jQuery to make the entire page malfunction?

I am experiencing an issue where a function is not recognized as being in scope when I have a reference to jQuery defined. Oddly enough, if I comment out that reference, the function call works just fine. I have other pages set up the same way with jQuer ...

javascriptjqueryhtml

Transferring data between jQuery and other global JavaScript variables

I'm facing a challenge when trying to make functions I created in jQuery access JavaScript values defined elsewhere. For instance, I have a function set within my jQuery code. var parentImg = ''; //global variable. $(document).change(funct ...

javascriptjquery

Having trouble with JQuery's .find() function?

I am currently implementing AJAX to load HTML from a file and attempting to extract and evaluate a specific block of dynamic HTML/JS content. Here is the AJAX call: <script type="text/javascript" id="startScript"> $("#submitButton").button(); & ...

jquery

Issues with Ajax.BeginForm causing JSON to be returned as undefined (Confirmed by Dev Tools)

I'm facing a strange issue while attempting to retrieve a basic JSON object from my controller. Although I can see the JSON returned perfectly fine in Firefox debug tools, when I look at my javascript callback, I receive an undefined in my console.log ...

jqueryajaxjsonasp.net-mvc