Can someone help me create blocks similar to the one shown in the image?
The left block should be col-5, while the right block should be col-7. The right block needs to have two rows with a height that is 50% of the left block.
Is there a way to achieve this 50%-height blocks layout?
.row {
background: #f8f9fa;
}
.col,
.col-5,
.col-7 {
border: solid 1px #6c757d;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis distinctio at, molestias doloremque optio tempora laudantium facere sequi. Tempore aliquid exercitationem accusamus nulla culpa dolorum rerum consequatur impedit quia porro? Lorem ipsum
dolor sit amet.
</div>
<div class="col-7">
<div class="row h-50">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
<div class="row h-50">
<div class="col">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem....
</div>
</div>
</div>
</div>
</div>You have the option to follow this approach, or consider utilizing Flexbox in place of Bootstrap sizing tools to craft your desired layout. Flexbox is tailored to streamline the creation of such structures.
One issue I encountered was mistakenly defining the height for columns in the incorrect block.
Upon wrapping each .col within a .row and assigning a height of 50% to these rows, all elements displayed properly. This solution mirrors the advice provided in droduit's response.
I'm currently working on a website for my F1 in Schools team and I'm looking to implement a feature where the button in the navigation bar changes its background color and font color when that section of the page is active, even while scrolling o ...
I have seen similar questions asked before, but none of the solutions provided have fixed my issue. It appears that the styles are being applied initially but then overridden by something else, and I am unable to identify what is causing this. The only r ...
Hey there, I'm new to the world of programming and currently working on a project to create the front end of my personal website. I've opted to utilize a bootstrap carousel background image slider in my index.html file. However, I've noticed ...
I've set up a div that contains other divs, including images and text. My goal is to make the main div scrollable horizontally while aligning the inner divs using inline-block. However, when I apply: overflow-x: scroll; The main div ends up with tw ...
Check out this jsfiddle link for a visual example: http://jsfiddle.net/qrbhb/ If you use the following HTML markup: <div>There should be no gap between us</div> <br /> <div>There should be no gap between us</div> along with ...
In my list of 3 elements, the display order is as follows: text - image image - text text - image On mobile devices, I aim to switch the position of the text and image in the second element, but currently, it is the opposite. <div class="container"& ...
Currently, I am working on creating a user interface that features a fixed navigation bar on the left hand side and a responsive content window. Here is what I have implemented so far: <div style="width: 15%; float: left; display: inline;"> <na ...
As a new designer, I have a question about how to make the background color extend to the top without any white space. Can someone please guide me on how to achieve this? <!DOCTYPE html> <html> <head> <style> body{ margin: 0px; p ...
I'm attempting to utilize a single background image that is 3 pixels wide and 89 pixels tall. Each vertical stripe of 1 pixel will serve as the background for a different div. I had presumed that adjusting the background-position by -1px 0 and specif ...
Just getting started with Angular here. I’m working on a checkbox table that compares to another table and automatically checks if it exists. The functionality is all good, but as soon as I add ngModel to save the changes, the initial check seems to be ...
I'm facing an issue with a bootstrap Masthead image on my website. It looks great at full size, but as I shrink the page, approximately 25% of the top and bottom get cut off. I really want this image to scale correctly with the size of the page. I tri ...
Chrome is working perfectly for me, but when I switch to Firefox it behaves differently than expected I am attempting to create a simple animation (utilizing transitions) that continuously runs on mouseover and smoothly returns to the starting position on ...
<div class="popup zoom" id="_consultant"> <div class="popup-window " > <div class="popup-content" style="background-color:#F5F5F5" > </div> </div> </div> After extensive research, I have not found ...
When the UI Element is clicked, it should add the class "open" to the list item (li), causing it to open in a collapsed state. However, this functionality does not seem to be working in the xxx.component.html file. Screenshot [] ...
Is there a way to make only the first sentence in the final paragraph bold using CSS? Specifically, I would like to add extra padding to the top of this last paragraph so that it wraps around an image. However, when I increase the bottom padding of the flo ...
https://i.stack.imgur.com/EAkMC.pnghttps://i.stack.imgur.com/ysU1R.png While the checkboxes function correctly in Chrome, they are experiencing issues in Internet Explorer. Below is the HTML code being used: <div class="patient-div-w" style="width: 9 ...
Hey there! I'm currently diving into the world of jQuery and encountering an issue with my menu. Whenever I click on a menu item with either the "tm-nav-vertical" or "tm-nav-horizontal" class, it removes the .active class from the initial menu item. I ...
What could be causing this HTML snippet to malfunction? The Scroll Spy feature remains inactive. <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid ...
How can I achieve a skill bar animation on a specific section of the page scroll? I have attempted to create a sliding skill bar animation, but it is not producing the desired effect. It currently starts animating at the beginning of the page, but I want i ...
Displayed above is an image showing an accordion on the left side and content within a table on the right side. I have a concern regarding the width of the content part (right side) as to why the table is not occupying 100% width while the heading at the ...