Bootstrap classes not aligning with individual elements

image

My content is aligned with the text on the left and the form on the right, which is exactly what I intended. However, everything seems to be outside of my jumbotron container.
Below is my HTML and CSS code. Your feedback is greatly appreciated.

<div class = "jumbotron">

    <div class = "cmpnt"><h1 style="font-family: 'Pacifico';"class="logo" > Mesmere</h1><h5> A safe social network <br>for <b>Everyone.</b><br>Build your Online presence <br>from the ground up.<br></h5></div>

    <div  class="cmpnt" >
        <h3>Sign Up</h3>
        <form id = "signup" action="/signAction" method="POST"  >
            <input type='hidden' name='csrfmiddlewaretoken' value='yr9j1vpQzJsfZXriKQLpU6GjqkdDZpSQeDlbwp5ENBaSLKZZDOrDq25iONXVjfXf' />


        <div id="div_id_username" class="control-group"> <label for="id_username" class="control-label requiredField">
            Username<span class="asteriskField">*</span> </label> <div class="controls"> <input type="text" name="username" placeholder="Make it Creative" class="textinput textInput" required id="id_username" /> </div> </div> <div id="div_id_password" class="control-group"> <label for="id_password" class="control-label requiredField">
            Password<span class="asteriskField">*</span> </label> <div class="controls"> <input type="password" name="password" placeholder="We won&#39;t sell it" class="textinput textInput" required id="id_password" /> </div> </div> <div id="div_id_email" class="control-group"> <label for="id_email" class="control-label requiredField">
            Email Id<span class="asteriskField">*</span> </label> <div class="controls"> <input type="email" name="email" class="emailinput" required id="id_email" /> </div> </div>

                <br>
                <input type="submit" class="btn btn-info" value="Submit">

        </form>

        <p>Already have an account?<a href="login">Login</a> </p>
    </div> 
    </div>

CSS-

html,body{
    overflow-x:hidden;
    width:100%;
    height: 100%;
    font-family: "Open Sans"
}
.jumbotron{
    background-color:#23103a;
    color:#FF6C00;

}
 .cmpnt{
    float:left;

}

.btn{
    background-color: #a0204c;
    border-color:#a0204c;
}

~Looking forward to your input

Answer №1

Are you looking for this?

html, body {
overflow-x: hidden;
width: 100%;
height: 100%;
font-family: "Open Sans"
}
.jumbotron {
background-color: #23103a;
color: #FF6C00;
}
.cmpnt {
float: left;
}
.btn {
background-color: #a0204c;
border-color: #a0204c;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class = "jumbotron clearfix">
    <div class="container">
        <div class = "cmpnt">
            <h1 style="font-family: 'Pacifico';"class="logo" > Mesmere</h1>
            <h5> A safe social network <br>
                for <b>Everyone.</b><br>
                Build your Online presence <br>
                from the ground up.<br>
            </h5>
        </div>
        <div  class="cmpnt" >
            <h3>Sign Up</h3>
            <form id = "signup" action="/signAction" method="POST"  >
                <input type='hidden' name='csrfmiddlewaretoken' value='yr9j1vpQzJsfZXriKQLpU6GjqkdDZpSQeDlbwp5ENBaSLKZZDOrDq25iONXVjfXf' />
                <div id="div_id_username" class="control-group">
                    <label for="id_username" class="control-label requiredField"> Username<span class="asteriskField">*</span> </label>
                    <div class="controls">
                        <input type="text" name="username" placeholder="Make it Creative" class="textinput textInput" required id="id_username" />
                    </div>
                </div>
                <div id="div_id_password" class="control-group">
                    <label for="id_password" class="control-label requiredField"> Password<span class="asteriskField">*</span> </label>
                    <div class="controls">
                        <input type="password" name="password" placeholder="We won&#39;t sell it" class="textinput textInput" required id="id_password" />
                    </div>
                </div>
                <div id="div_id_email" class="control-group">
                    <label for="id_email" class="control-label requiredField"> Email Id<span class="asteriskField">*</span> </label>
                    <div class="controls">
                        <input type="email" name="email" class="emailinput" required id="id_email" />
                    </div>
                </div>
                <br>
                <input type="submit" class="btn btn-info" value="Submit">
            </form>
            <p>Already have an account?<a href="login">Login</a> </p>
        </div>
    </div>
</div>

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

Adjusting background size using jQuery as the window is resized

Exploring ways to dynamically resize the background image of my website based on the current window dimensions using jQuery. At the moment, I have tried the following approach: $(window).resize(function() { $("body").css({"background ...

Progressive Web App with Vue.js and WordPress Rest API integration

When creating an ecommerce website using Wordpress, I utilized Python for scraping data from other websites to compare prices and bulk upload products through a CSV file. My next goal is to learn Vue and transform the website into a PWA as it will be esse ...

Is there a method to implement a pop-in animated contact form without the use of Javascript or query selectors?

Although I was successful in creating a contact form with this functionality using Javascript, I encountered some difficulties when attempting to achieve the same result without it. My goal is for the form to slide in from the right when the "open" icon is ...

The attribute of the Angular div tag that lacks an equal sign

Apologies if this question has been asked before. I've noticed in some people's code that they use the following syntax: <div ui-grid="myUIGrid" ui-grid-selection ui-grid-resize-columns class="grid" /> Can someone explain what ui-grid-sel ...

Fetch several images simultaneously from a photo collection using JavaScript by generating a batch process

I need help with creating an image gallery that allows users to download multiple images by selecting them. The download should result in a zip file. I have checkboxes for selecting the images, but I'm struggling to figure out how to enable the downlo ...

A Guide on Adding Excel-Like Filtering Functionality to AngularJS

I am struggling to implement a simple Excel-like filter for a table using AngularJS (v.1). I have shared my code snippet below and would appreciate any help to show filtered data in the table after checking a checkbox and clicking on the OK button. I have ...

Tips for aligning a div in the center while adjusting screen size

My goal is to showcase a dashboard with a card layout. The desired layout can be seen https://i.sstatic.net/OWgpE.png: Here is a snippet from the HTML File: <div id="overallCanvasWrapper" class="statistic-container"> <p ng-show=" ...

Transfer an HTML file generated in real-time to an external server using SFTP

I am currently working on creating an HTML file dynamically using the file_put_contents function and the ssh2 library for SFTP. However, I am facing an issue where Apache is reporting that the file cannot be sent because it does not exist on the local dis ...

What is the easiest way to locate the ID of an iframe embedded within a webpage?

Currently, I am focused on developing small JavaScript/HTML5 ads for a webpage. Each advertisement comes with its own iframe that occupies a specific size and space on the page. In order to accommodate an expandable ad that needs to surpass the predetermin ...

Is there a way to align my horizontal menu with the top of the screen without encountering the hover problem?

I'm trying to make my horizontal navigation bar stay at the top of the screen. The issue is that when I set the top property to 0, the menu sticks to the top but the initial menu item is obscured when hovered over. If I remove the top property, the ho ...

Understanding Aspect Ratios in CSS for Div Containers and their Components

I am crafting an HTML5 game without the use of canvas and aiming to maintain a 16:9 aspect ratio within my div. Thanks to javascript, achieving this is straightforward and it functions flawlessly. However, the elements inside the div occasionally appear to ...

issue with arranging content in a two-column layout with headers

Currently working on my first website and running into some CSS issues. I'm aiming for a two-column + header layout that fills the entire screen space of the website. I have the following specifications in mind: Header takes up 20% of the screen he ...

Setting up ng-show in AngularJS

Looking for a solution to use ng-repeat and ng-show to organize data into two columns effectively <div class="col-md-4"> <div class="row" infinite-scroll="eventSearchService.getMoreEvents()"> <div ng-repeat="event in eventSearchService ...

Utilize flexGrow property to make Material UI Grid container expand dynamically

I've been working on a chat window layout that features my users on the left and messages on the right. However, I'm facing an issue with making both columns extend to the end of the viewport or footer. Below is the component code I'm using: ...

How can I create a webpage that is fully responsive to both width and height, with text that automatically scales to fit the

I am currently using Bootstrap and Angular to develop a single-screen webpage tailored for small screens such as the Adafruit 2.2" or 2.8" screen for the Raspberry Pi, or mobile phone displays. I aim to make all content (specifically about 3-4 rows of a ta ...

Ways to retrieve the user's IP address and provide the information in JSON format

Although I am not an expert in PHP, I specialize in developing Android apps. One of the challenges I face is extracting the user's IP address from a specific URL . This URL provides various information when accessed, but my main requirement is to retr ...

Bootstrap is an outdated page template that lacks responsiveness

My code below features a page designed using Bootstrap HTML and CSS, but it doesn't look right on all devices. For example, on mobile devices, the grid appears zoomed in and unresponsive. I tried removing grid-template-columns: auto auto;, which fixed ...

Is it possible to hide the <dd> elements within a <dl> using knockout's custom data binding upon initialization?

I have implemented a <dl> where the <dd> can be expanded/collapsed by clicking on the corresponding <dt> using knockout's data binding. The inspiration for my solution came from a tutorial on creating custom bindings. Currently, I h ...

Applying CSS to replicate the vintage iPhone app icon design

I've been searching online for days, but I can't seem to find any helpful resources on how to use CSS3 to style the old iPhone app icon. My goal is to apply a CSS3 style to this curved line, with a fallback option in case older browsers don&apos ...

Contrast the objects in views.py between two distinct model objects in Django

I am currently working on a feature that compares the skills required for different job postings (such as web development, marketing, etc) with the skills of a user who is logged in. If there is a match, the job posting will be displayed to the user. The ...