Looking to create two fixed columns in Bootstrap. The current layout can be seen in the image below:
https://i.sstatic.net/w41sD.png
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.
https://i.sstatic.net/U3kxU.png
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>
I am currently in the process of developing a web application that needs to occupy the entire height and width of the screen using 100vh and 100vw. The main app itself should not have any vertical or horizontal scrolling, but individual components/divs wi ...
After coming across this form design, I am inspired to create something similar with a twist. Instead of having each tab display all content at once, I want the tabs to scroll from right to left, giving it a more animated effect. Can someone offer suggesti ...
Can we target an external element based on its descendant elements? This question arises from the need to apply one stylesheet to two different dynamic pages within the same wrapper. Page 1 <div id="api"> <div class="a"></div> </div ...
I am uncertain if there exists a method to incorporate the desired feature. I am seeking a solution similar to zoomable treemaps, but to initially load a limited number of child levels and then dynamically add more child nodes without requiring a node clic ...
I have a requirement to convert a String from HTML format to Textile format. After researching various libraries such as Textile4J, Textile-J, JTextile, and PLextile, I found that none of them offer the specific functionality I need. Although they do prov ...
react-dom.development.js:86 Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>. at p at http://localhost:5173/node_modules/.vite/deps/chunk-WQ5FBX7J.js?v=539aff10:2964:50 at Typography2 (http://localhost:5173/node_module ...
I have encountered an issue with a button that I need to click, but I am unable to do so unless I inspect it first. Here is the Xpath for reference: //*[@id="react-root"]/section/main/div/header/section/div[1]/div[1]/span/span[1]/button The full Xpath i ...
My website is currently designed for a screen resolution of 1024x768. However, I am aware that when viewed on computers with smaller or larger screen resolutions, the layout starts to distort. Is there a way to make the website adaptable to any user&apos ...
function playMusic(){ var music = new Audio('musicfile.mp3'); if (music.paused) { music.play(); } else { music.pause(); } } <input type="button" value="sound" onclick="playMusic()" ...
For my first application, I am utilizing AngularJs and JavaScript to display information from an API as checkboxes. Currently, the functionality is working well, but I am unsure how to validate if any checkbox options are checked with a submit button. Aft ...
I am trying to display the data from my JSON file within a div tag on my HTML page. Below is my jQuery code: $(document).ready(function () { $("#driver").click(function (event) { $.getJSON('data.json', function (em) { ...
Experiencing some odd issues with the Django admin application here. I've got everything up and running on the manage.py runserver development server, but for some reason it looks like this: This obviously isn't what I want, so I'm trying t ...
I have come across more examples of this, but unfortunately they do not seem to work. $(window).load(function () { $("#country").html('Please make a selection from the options below'); }); <select id="country"> <option value="None"> ...
I'm having trouble resizing the images to match the height of the browser window. My goal is to limit the images' height to a maximum of 1100px and have them scale down based on the height of the browser. I've experimented with setting the ...
I'm looking to create a card with rounded top corners and wondering if there is a way to achieve this. Currently, here is the code I have: <div id="card1"> <div id="card1i"></div> </div& ...
After recently upgrading to the most recent version of Chrome (17.0.963.56), I've noticed that the property window.document.height is no longer valid. Has anyone else experienced this issue? I haven't been able to find any information about why i ...
When looking at the custom content section on my website, you will find paragraphs and lists. One of the list items contains the following text: Track your package online: The link provided is quite lengthy and lacks white spaces, causing it to extend ...
Struggling with reversing a CSS animation based on a class being added to a DOM node? Take a look at the code I've been using: EXAMPLE // Closed state @-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } } @-webkit-keyfra ...
I am working with a basic HTML document that looks like this... <ol> <li><strong>Test 1</strong></li> <li><strong>Test 2</strong></li> </ol> ...and I am attempting to connect it to a div ...
There are two buttons in my code: The button on the right triggers a function called update(): <script> function update(buttonid){ document.getElementById(buttonid).disabled = true; event.stopPropagation(); var textboxid = buttonid.sli ...