Arranging various sections with Bootstrap

I am having trouble arranging my div elements the way I want them to be.

First, I want the height of the card to match the height of my title. Then, I want the bottom of my two buttons to align with the bottom of my card.

I believe this is achievable but I seem to be stuck. Can you provide assistance?

<div class="container" style="width:auto;margin-top:0%">
    <div class="row col-12">
        <div class="5" style="margin-top:2%"><h3>Modify your user profile</h3></div>
        <div class="card border-primary md-5 col-6" style="width: auto; margin-left:51%">
            <div class="card-header" style="font-size:22px">Attention</div>
            <div class="card-body">
                <p class="card-text">
                    The updated data must first be validated. <br /><br />
                    A request will be sent once you click on "Submit". <br /><br />
                    It's normal to see the old data still displayed, as it indicates that validation has not been completed yet.
                </p>
            </div>
        </div>
        <div>
            <button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personal</button>
            <button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
        </div>
    </div>

[

htmlcssbootstrap-4

Answer №1

It is advisable to eliminate the margin-left:51% applied to your card since margins are not necessary when utilizing the bootstrap grid system. Additionally, consider relocating the buttons within the same first column container to ensure alignment with the title.

<div class="container" style="width:auto;margin-top:0%">
<div class="row col-12">
   <div class="col-5" style="margin-top:2%">
      <h3>Update your user profile</h3>
      <div>
         <button type="button" class="btn btn-outline-primary" id="btnMember" onclick="hideCPY()">Personal</button>
         <button type="button" style="margin-left:1%" class="btn btn-outline-primary" id="btnShowCompany" onclick="hideMember()">Company</button>
      </div>
   </div>
   <div class="card border-primary md-5 col-6" style="width: auto;">
      <div class="card-header" style="font-size:22px">Attention</div>
      <div class="card-body">
         <p class="card-text">
            Any changes made need to undergo validation first. <br /><br />
            Clicking "Submit" will trigger a validation request. <br /><br />
            The display of old data indicates pending validation.
         </p>
      </div>
   </div>
</div>

Furthermore, I strongly advise against using inline styles and suggest incorporating CSS classes instead.

View the functional fiddle here: http://jsfiddle.net/omxahu46/

I trust this information proves helpful.

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

Does including the "max-height" property within a table result in a height of zero?

Check out the code snippet below (you can also view a demo on JsFiddle): #outer { display: table; height: 200px; width: 100%; background: gray; } #inner { width: 100%; background: blue; max-height: 100%; } <div id="outer" ...

htmlcsscss-tables

Is it possible for a label to contain elements other than the input field for accessibility purposes?

Issue with Accessibility: Is it possible for a <label>...</label> to contain elements other than an <input ... />? In our project, we are utilizing Material UI, and their <Switch /> component is structured as follows: <label> ...

htmlaccessibilitymaterial-ui

Sending form array information using jQuery AJAX

My form allows for the addition of multiple listings simultaneously. Additionally, there is a requirement to pass through an md5check. For example: <select name="master_id"></select> <select name="id2[]"></select> <select nam ...

phphtmljquery

Display item upon hovering and for an extended period upon clicking using jQuery

I am looking to create a functionality where hovering over an area displays item 2 for a certain duration, which is currently working fine with the existing code. However, I also want it to remain visible for a longer period if clicked, but this does not ...

jqueryhtmljquery-hover

positioned the div within the StickyContainer element to ensure it remains fixed in place

I've been working on making a div sticky in a React project. To achieve this, I added the react-sticky package to my project. I placed the div within the StickyContainer component as per the documentation. Although there are no visible errors, the sti ...

javascripthtmlreactjsreduxmaterial-ui

Designing scroll boxes that are not continuous and tracking the time spent in each section

I'm seeking assistance with a unique challenge involving the creation of scroll boxes for use in a Qualtrics survey and tracking the time spent viewing different sections of text within them. Specifically, I aim to design a scroll box featuring two p ...

javascriptjqueryhtmlcss

"Illuminating the way: Adding a search bar to your

Looking to enhance my WordPress blog with a search bar, I opted for a generic HTML approach over using get-search-form(). Here is the code snippet from my theme: <div class="input-group"> <input type="text" class="form-c ...

htmlwordpresswordpress-theming

Retrieving innerHTML from a VueJS custom component

Attempting to create a basic bootstrap alert component, I am struggling to access the innerHTML of my custom component. Here is the code snippet: Vue.component('my-alert', { template: '#vue-alert', props: ['type', ' ...

javascripthtmlvue.js

Unique CSS shadow design & alternative solutions

I'm currently working on some HTML/CSS code and I am looking to implement a unique shadow effect with a custom width and height around a div element. https://i.sstatic.net/3SnXV.png Could anyone provide guidance on the most effective method to ach ...

htmlcssshadow

What is the best way to place text alongside a shape?

I'm attempting to place text beside the circular shape. HTML <div class="row"> <div class="col-sm-2"> <span><div class="circle"></div></span><p>available</p> </div> </div> C ...

htmlcsstwitter-bootstrap-3

Should we still be using <input type="date" /> in 2021?

I've come across some old articles cautioning against using , but they were written a couple of years ago. I'm wondering if it's safe to use in 2021 without negatively impacting the user experience. ...

htmlreactjs

Using CSS and jQuery to Enhance Page Transitions

Seeking assistance with creating a unique page transition similar to this one: Basing the animation on my own design concept found here: Current experiment can be viewed at: https://jsfiddle.net/f7xpe0fo/1/ The animation does not align with my design vi ...

jqueryhtmlcss

Embed a video onto a webpage using HTML and ensure it is responsive by implementing Bootstrap's grid

I am currently using the mPurpose-master bootstrap theme, which offers a feature allowing the placement of 3 blocks in a row that are fully responsive. <div class="section"> <div class="container"> <div class="row"> ...

csshtmltwitter-bootstrapvideo

Using the symbol for pi in a JavaScript program rather than its numerical value, while still performing calculations with the numerical value behind the scenes

I am working on a calculator project where I want the symbol for pi to be displayed instead of the numerical value. Here is the relevant function: function Pi(pi) { document.getElementById('resultArea').innerHTML += pi; eval(document.ge ...

javascripthtml

The Bootstrap carousel spiraled into disarray

I am facing an issue with the basic bootstrap carousel. My goal is to make the slides move every four seconds. The current setup of the carousel code is as follows: $(document).ready(function() { fixCarousel(); }); function fixCarousel() { $('.c ...

javascripthtmlcsstwitter-bootstrap

Unable to incorporate additional functions while using directives

http://example.com Is there a way to incorporate an addChild(tree) function into this code in order to expand the data array? I have made changes to the template as shown below: '<p>{{ family.name }}{{test }}</p>'+ '<ul>& ...

angularjshtml

The CSS class is malfunctioning

I currently have the following code snippet within my HTML file: echo "<article class='room-full-width'>"; $room_query = mysql_query("SELECT * FROM roomdetails WHERE hotelname = '".$row['hotelname']."'"); while($ ...

phphtmlcss

Python script to extract data from a dynamic JavaScript webpage

I've been involved in a research project where we are aiming to gather a list of reference articles from the Brazil Hemeroteca (The specific page reference we are seeking: , needs to be located by extracting data from two hidden elements on this page: ...

pythonhtmlselenium

Converting a Selenium By object into a CSS selector: A step-by-step guide

When working with Selenium WebDriver, it's a common practice to find elements using the By class. Currently, I'm using a ByChained selector and I'm curious if there's a way to convert a By object to a CSS selector. For instance: By sel ...

cssseleniumselenium-webdrivercss-selectorsbrowser-automation

Opinions on crafting a new gadget?

I will only provide each website interested in my widget with the code to copy and paste once. It is crucial that the code is future-proof. After much consideration, this is the widget code I have developed: <script type="text/javascript" src="http:/ ...

javascripthtmlwidget