Looking to create two fixed columns in Bootstrap. The current layout can be seen in the image below:
I want the left and right column to align at the top regardless of the number of items in each column. Refer to the image below.
Here is my code snippet:
[3]:https://jsfiddle.net/evr86bjn/2/
Any help would be greatly appreciated!
It is recommended to delete the line align-items: center; from the .holder class. Due to the minimal content in the first ul, it appears misaligned when centered.
.Holder {
display: flex;
/* align-items: center; */
justify-content: center;
}
In order to resolve the problem you encountered, I suggest changing the align-items property from center to flex-start for the Holder div.
.Holder {
display: flex;
align-items: flex-start;
justify-content: center;
}
If you're looking to take advantage of Bootstrap, there's a way to streamline your HTML code by focusing on just the two unordered lists. Here's an example of how you can achieve this using Bootstrap:
<div class="row">
<div class="col-sm-6">
<ul id="listWrap" class="price-table__info">
<li>
<p class="ocjenaNaslov">Lorem Lorem 1</p>
</li>
<li>
<p class="rok1">Lorem lorem 1</p>
<p>Lorem lorem</p>
</li>
<li>
<p class="rok1">Lorem lorem</p>
<p>Lorem lorem</p>
</li>
<li>
<p class="rok1">Lorem lorem</p>
<p>Lorem lorem</p>
</li>
<li>
<p class="rok1">Lorem lorem</p>
<p>2</p>
</li>
</ul>
</div>
<div class="col-sm-6">
<ul id="listWrap" class="price-table__info">
<li>
<p class="ocjenaNaslov">Lorem Lorem 2</p>
</li>
<li>
<p class="rok1">Lorem lorem</p>
<p>Lorem lorem</p>
</li>
<li>
<p class="rok1">Lorem lorem</p>
<p>Lorem lorem</p>
</li>
<li>
<p class="rok1">Lorem lorem</p>
<p>Lorem lorem</p>
</li>
<li>
<p class="rok1">Lorem lorem</p>
<p>Lorem lorem</p>
</li>
<li>
<p class="rok1">Lorem lorem</p>
<button type="submit" class="btn btn-primary waves-effect isp"><i class="far fa-calendar-alt"></i>Info</button>
</li>
</ul>
</div>
</div>
My aim with the following code snippet is to achieve two objectives: Apply a margin of 20 units to each card Display all four cards in a single row, allowing users to swipe horizontally Unfortunately, I have not been successful in achieving either of th ...
What is the reason for simplyscroll not being able to handle this div with nested divs? EXTRA INFORMATION The scrolling functionality does not work. Clicking on the buttons doesn't trigger any scrolling. Changing the contents of the div to plain tex ...
I am working on a form page that is supposed to display a Success Alert (Boostrap) once the user fills out the form and clicks the Submit button. <form class="well form-horizontal" action="/contact" method="post" id="contact_form"> ... (input fiel ...
I currently have index.html with two Vue instances in different files: <!DOCTYPE html> <html lang="en"> <body> <div id="appOne"> </div> <div id="appTwo"> </div> </body> </html ...
I'm currently facing an issue with using padding in my CSS to make the two divs inside a parent div responsive at 50% each. However, when combined, they exceed 100%. I suspect this is due to the padding, but I'm unsure how to resolve it. .column ...
I have a bootstrap menu item on my website and I want to move the menu icon to the right corner of the page. How can I modify the code to achieve this? #menu { position: relative; color: #999; width: 200px; padding: 10px; margin: auto; font-fa ...
Can the file size of an uploading file be determined using Javascript without requiring an ActiveX object? The solution should work across all web browsers. ...
Is there a way to update the screen height when resizing or zooming the screen? Whenever I zoom the screen, the arrows break. I'm also curious if the method I'm using to display images on the screen is effective. It's supposed to be a paral ...
Looking for a method to effortlessly apply styles to all elements within a specific class without repeating code like this: .element-wrapper .coin-box{ margin: 10px; float: left; } .element-wrapper .platform{ margin: 10px; float: left; } .eleme ...
I'm currently working on creating a slightly complex navigation bar using Bootstrap 5 and ReactJS. The issue I'm encountering involves the dropdown menu within the nav bar. Whenever I click inside the dropdown, even if it's just non-link te ...
I'm currently grappling with getting bootstrap to function properly in Node.js using the Jade template engine. Whenever I attempt to execute the index.jade file, all I get is a blank white page. div.topbar div.fill div.container a.brand( ...
Currently, I have set up a navigation bar for the usual navigation options, and now I want to include buttons for both Sign in and Sign up. To implement this, I am using an a tag with the classes btn btn-large btn-success. However, it seems that the navba ...
I am working on a web application and have successfully integrated Facebook login from developers.facebook.com. However, I am facing an issue where after the user logs in with their Facebook credentials, they are not redirected to my application. Additiona ...
I have a requirement where I need to pass a custom component to an MUI Dialog so that the Dialog can open itself and render its children. const CustomDialog = ({children, someCustomComponent}) => { const handleClickOpen = () => { setOpen(true); } ...
<tr> <form role="form" class="manualImportSubmit" action="http://localhost:5000/XXX" method="post"> <td><input name="yyy" value="FormAValue" type="hidden">TestA</td> <td><input name="before_year" class="fo ...
document.getElementById works in getting the element, but for some reason, the content disappears as soon as it is written in it. There are no errors on the console to indicate what's causing this behavior. I have been unable to identify the reason b ...
I am having trouble changing the border color and text color when an input is disabled. I have tried multiple variations, as seen below: const textFieldStyle = { '& label': { color: darkMode?'#1976d2':'', } ...
I have utilized Bootstrap cards to display pricing information in my project. I implemented a collapse feature for half of the card when the screen size is equal to mobile width. While using vanilla Bootstrap, the animation worked seamlessly with the col ...
I recently developed a Node JS app using EJS templates and Tailwind CSS. Check it out live here: If you're curious, feel free to explore the code on Github. While the media queries function well on desktop devices, they seem to be ineffective on mo ...
I've been running into a little issue with using the .toggleClass function in my code. It seems to work inconsistently, and despite reading various posts on the topic, I haven't found a solution that works for me. Could you provide some assistan ...