Creating the Perfect Layout: Unveiling the Secrets of Bootstrap 4

Currently in the process of working on a website, I have encountered a particular challenge regarding the layout design using Bootstrap 4. (Highlighted in Red)

https://i.sstatic.net/k8bKv.png

The issue at hand is that the first column is a col-md-7 and the second column is a col-md-5. The first column contains an image that needs to align with the left corner of the page, while the second column should adhere to the standard width and column size. To provide further context, here is an example of what I am trying to accomplish.

[Example on JS Fiddle][2]

https://i.sstatic.net/5JnDi.jpg

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Do you mean something similar to using the align-self-start class?

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.image {
  height: 200px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


<div class="container">
  <div class="row d-flex">
    <div class="col image">
      Image
    </div>
    <div class="col align-self-start">
      Test
    </div>
  </div>
</div>

Answer №2

To achieve the desired layout, it is recommended to enclose the left image and the right column within a row, define the width of each column, and then place the items in the right column inside a full width div.

Continuously asking 'do it for me' type of questions on SO may lead to negative responses from the community. However, I am willing to assist you. Let me know if you need more information.

There are numerous ways to solve this issue. This is a good opportunity to explore CSS Grid and keep up with the latest trends.

Check out this codepen for a general approach

<div class="row">
  <div class="col-md-7 left-box"></div>

  <div class="col-md-5">
    <div class="col-md-12 item"></div>
    <div class="col-md-12 item"></div>
    <div class="col-md-12 item"></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

At what point will the browser display changes made to css using jQuery?

When I run my JavaScript code in Firebug, it looks like this: tr=$(this).parent('tr'); tr.find('.img-delete').css('display','block'); However, I am unable to see the change reflected on the browser. Is there a wa ...

jquerycss

Creating a designed pattern for a textbox: Let's get creative with your text

How can I create a Textbox that only allows numeric values or the letter 'A'? <input type="text" id="txt" name="txt" pattern="^[0-9][A]*$" title="Allow numeric value or only Letter 'A'&quo ...

htmldesign-patterns

Why am I unable to choose an element by its Id?

My goal is to pass an ID as an argument to a function in the following manner: HTML <button type="button" class="like btn" onclick="like('<%=postid%>')"> <svg id ='<%=likei ...

javascripthtmlexpressdomejs

Show the current date and time, and update it whenever the user chooses a different one

I need help with displaying the current date and time within a div, with the seconds refreshing when the page loads and changing when the user selects another date and time from the picker. I'm trying to accomplish this with the following script, but ...

javascriptjqueryhtml

Allowing users to navigate through a fixed content page using a scrolling menu, all without the need

On my webpage, I have integrated Google Maps. The layout is divided into a menu on the left and content on the right. I am looking to make the left side (menu) scrollable, while the right side (content, which includes the map) remains static without scrol ...

htmlcss

The button on my page refuses to align in the center, and I'm at a loss as

Struggling to center a button within my div, despite having all other content centered. Here is my code: .middle { width: 100%; height: auto; text-align: center; position: relative; ...

htmlcssbuttoncenter

Arranging rows of a specific height within a table at any location

I need to create a virtual table to browse through a very large dataset. Is there a way to position the rows (with fixed height) anywhere within the table? The issue I am facing is that the table properties automatically adjust the row height, disregarding ...

htmlcss

Turn off sticky sidebar feature for mobile-friendly layout

I have encountered an issue with my script that I need assistance with. I am trying to disable this script for responsive or mobile view, but despite trying various methods, it is not functioning as expected. <script type="text/javascript"> $(func ...

javascriptjquerycss

How can I adjust the border opacity in a React application?

Can we adjust the border color opacity in React when using a theme color that is imported? For example, if our CSS includes: borderBottomColor: theme.palette.primary.main and we are importing the theme with Material UI using makeStyles, is there a way to ...

cssmaterial-ui

Using CSS alone to maintain responsive aspect ratios: A solution to filling container heights

I'm trying to find a way for an inner div to fill the height of its container with a fixed aspect ratio of 1:1. The usual method using padding works great for filling the width, but not so much for the height. Is it possible to achieve this purely wi ...

htmlcssresponsive-design

Issue with JS jQuery: The click event on an li element within an expanded ul does not function properly

I have built a basic webpage to explore jQuery. However, there is an issue that arises when I click on the "Button: another one." It seems to interfere with the event of clicking on the li element, causing it to glitch and not respond. Here is the code: JS ...

javascriptjqueryhtmlhtml-lists

What could be the reason for the inconsistent behavior of onClick, causing it to occasionally fail to display the associated

I just started using typescript 2 days ago, mainly to create a custom component for my streamlit app. I've made a navigation bar with a tab that can be clicked on the sidebar, but it's displaying some erratic behavior. Sometimes when I click on t ...

pythonhtmltypescriptonclicktabs

How can I trigger the appearance of the navigation bar when reaching the second div while scrolling

Is there a way to make the navigation bar appear only when a user has scrolled down to the second div on the page? The first div is the header. I am wondering how this can be achieved using jQuery? <!DOCTYPE html> <html> <head> <me ...

jqueryhtmlcssnav

How can you use JavaScript to create a JSON object using values from an HTML form textarea and then send

I need to create an HTML form that will send specific information in the Http-request body. { “info” : { “id” : “123” “text1” : <data from html text-box> } Therefore, my goal is to convert the provided data into a JavaScri ...

javascripthtmljson

Stop the bootstrap navbar from resizing

I implemented a bootstrap navbar that looks like this... <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div& ...

htmlcsstwitter-bootstrap

Is it possible to keep my JavaScript scripts running continuously within my HTML code?

I recently set up a JavaScript file that continuously queries an API for updates. It's currently linked to my index.html, but I'm looking for a way to keep it live and running 24/7 without requiring the browser to be open. Any suggestions on how ...

javascripthtml

How can I make a div blur as I scroll through the page

How can I make each item in my timeline focused one at a time as the user scrolls, instead of having all items in focus simultaneously? Any ideas or suggestions would be appreciated. Here is my fiddle and here is my code $(document).ready(function(){ ...

javascriptjqueryhtmlcsstimeline

The issue persists with Angular's overflow hidden not functioning properly, and similarly, the show password button is

I created a login page using Angular Material, but I'm facing some issues. The problem is that when I set the style overflow: hidden, the show password button stops working. Additionally, if I click the button twice, the webpage refreshes, which shoul ...

htmlcssangularflexbox

Merge web address when form is sent

I'm currently working on a search application using the Django framework and the Yelp API as my backend, which is functioning properly. However, I am facing some challenges with the frontend development, specifically integrating Leaflet.js. My search ...

javascripthtmlformsleaflet

Calculate the total price using Jquery once selections have been made

I am looking to create a dynamic pricing feature where clicking on a checkbox will update the total price. The prices are calculated per day, so if days are added, the total should reflect that accordingly. Check out our demo here: http://jsfiddle.net/XqU ...

jqueryhtml