How to wrap a narrower column around a shorter column using Bootstrap 4

Incorporating Bootstrap 4 into my website design, I have created a simple two column layout. The right column houses a table of contents while the left column is filled with various markup elements such as paragraphs, lists, and images. My goal is to have the content in the left column extend the full width of both columns once it reaches the end of the table of contents section.

Essentially, I am looking to achieve a wrapping effect around a <div> containing a plethora of content.

Do you believe this is achievable, regardless of whether it is a recommended practice?

Answer №1

My approach would be to use the float property (specifically in Bootstrap-4) to align the div to the right side while maintaining the presence of the col-6 class.

Is this a viable solution? Ultimately, the customer's preference takes precedence. It's worth noting that individuals in Communications/Marketing roles often have experience with print media and may advocate for this implementation for various reasons.

I eagerly await your input and the definitive answer that professors usually provide after a student's attempt :)

.myDiv {
  border: 1px solid red;
  float: right; margin-left:5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-12">

      <div class="col-6 myDiv">
        <h2> Right hand zone (6 col at the start) </h2>
        I am using Bootstrap 4. I have a simple two column layout. The right column has a table of contents, the left column has a lot of markup with paragraphs, lists, images, and so on. I would like the content of the left column to use the whole width (of
        both columns) where the table of contents (which takes less vertical space) ends. Like wrapping around an image except this is wrapping around a with lots of stuff inside. Is this possible (whether or not you think its a good idea?)</div>

      <h1>Continued text (6 col at the start and then all width) </h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
        printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
        of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? Where can I get some? There are many variations of passages of Lorem
        Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything
        embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined
        with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris...</p>
      <h3>continuing...</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
        Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the
        undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance.
        The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus
        Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      <h3>continuing further...</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less
        normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem
        ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </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

How come the margin-bottom is displaying as the margin-top?

When I attempt to add margin-bottom on a div inside its parent, it seems to display as the parent's margin-top. Why is that? HTML: <div id="wrapper"> <div id="content"> <div id="box"></div> </div> </d ...

How can we ensure that the borders of a text field automatically adjust to fit the dimensions of the text field using CSS?

I've encountered an issue with the borders of text fields while working on a project involving CSS/HTML. The problem is that in the browser, the borders appear shorter than the text fields. Initially, I attempted to adjust the border size to match th ...

Aligning content within a div block

I created a div block that houses a form structured like this: <div class="divClass"> <form id="frm" method="post" action="/NotDefinedYet/index.xhtml" class="frmClass"> <input type="text" name="j_idt9:j_idt10:Username" placehold ...

Configuring Dialog Placement to the Top in Material-UI

I'm in the process of creating a popup dialog, but I'm encountering an issue where the dialog pops up in the center of the page. How can I position it at the very top of the page when the popup button is clicked? Below is the code snippet: < ...

An effective method for modifying the active class on an li element in jQuery and ensuring that the user is directed to the desired page upon clicking the li element

I am facing an issue with my script tag. When I click on the links test.php or test2.php, the active class changes from index.php to the respective file but I am not redirected to the clicked page. I have tried solutions from various sources but none of th ...

Having trouble scaling image with CSS, not reacting to size properties

I have little experience in web development, but a small business client has me working on their website while I handle other tasks for them. I've created a home page design that is almost ready to be turned into a template for the chosen CMS. Things ...

Navigation is failing to float in the correct position

Having issues with my navigation positioning, specifically when it reaches the breakpoint. There's a strange gap on the right side that I can't seem to fix by adjusting padding or margin settings. I'm relatively new to this so please bear wi ...

Replace existing styled-component CSS properties with custom ones

One of my components includes a CheckBox and Label element. I want to adjust the spacing around the label when it's used inside the CheckBox. Can this be achieved with styled()? Debugging Info The issue seems to be that the className prop is not b ...

Error: Unable to change image -- TypeError: Cannot assign value to null property 'src'

As I work my way through the textbook for one of my classes, I am practicing by building an image swapping page. The concept is simple - clicking on a thumbnail swaps out the main image and enlarges it as if it were linking to another web page. Despite fol ...

Strategies for improving the efficiency of HTML and styles in a generated document

Generating the invoice printing form layout using dynamically created Razor views through RazorEngine can result in messy and hard-to-read code. The repetitive use of words like top, left, width, and height makes it challenging for human inspection and deb ...

The slicing of jQuery parent elements

Hey there! I recently created a simulated "Load More" feature for certain elements within divs. However, I've encountered an issue where clicking on the Load More button causes all elements in both my first and second containers to load simultaneously ...

no visible text displayed within an input-label field

Currently, I have started working on a multi-step form that is designed to be very simple and clean. However, I am facing an issue where nothing is being displayed when I click on the next arrow. I am puzzled as to why it's not even displaying the te ...

Struggling to position a div below another div within a flex box layout

https://i.sstatic.net/8vZSW.jpg When trying to make the Information & advice header appear above the other div elements, I encountered an issue with flexbox. Despite setting the container div to have a flex direction of column, the header div continue ...

How to Use Laravel to Create HTML Divs Without Images

While working with a text editor, we have the ability to incorporate various HTML tags such as images and videos. However, I am only interested in displaying text fields. When I use {{$loop->content}}, it displays: <p><strong>EXAMPLE</st ...

Why are my menu and title shifting as I adjust the page size?

I'm having trouble finalizing my menu and headings. Whenever I resize the browser window, they shift to the right instead of staying centered as I want them to. I would really appreciate any help with this. Below is the HTML and CSS code. var slide ...

Modifying the appearance of a WordPress website with CSS styling

I am currently using WordPress and I am excited about making changes to the CSS style sheet. After visiting , I realized that there is no option for editing the 'CSS' under Appearance → Customize → 'CSS'. My usual process is going ...

Code functioning correctly in Chrome but encountering issues in Firefox

I've come across an issue with my HTML and JavaScript code for a select drop-down box. My goal is to have the background color of the selected option update to match the color selected by the user. Currently, when using Firefox, the hover color chang ...

Create a chessboard with a border using only HTML and CSS

I recently completed a chessboard using only HTML and CSS, but I am facing a challenge as I attempt to add a frame around the board. Since I lack design skills, I am struggling to achieve this simple task. I have tried utilizing the CSS border property wit ...

Unable to eliminate the unwanted space at the top of the division

I am encountering an issue where I have a div containing a label, but there seems to be some unwanted space above the div that I can't seem to remove. It's puzzling me as to why this space is appearing. Query: What could be causing the space ab ...

The data type "100%" cannot be assigned to a number type in the kendo-grid-column

I need the columns in the grid to have a width of 100%. <kendo-grid-column field="id" title="id" [width]="'100%'"> </kendo-grid-column> However, when I hover over the code, I get this message: The value "100%" cannot be ...