Ways to expand a column across two rows using Bootstrao 4

Although this question has been asked numerous times before, the common suggestion is to span a column by placing the other columns into an inner row. Here's an example:

<div class="row">
  <div class="col-12 col-md-4">logo</div>
  <div class="col-12 col-md-8">
    <div class="row">
      <div class="col-12">top nav</div>
      <div class="col-12">bottom nav</div>
    </div>
  </div>
</div>

On desktop, it would appear like this: https://i.sstatic.net/JirKO.jpg

On mobile devices, it would look like this: https://i.sstatic.net/L30BB.jpg

However, the desired outcome is to position the logo between the two navigation elements, as shown below: https://i.sstatic.net/oBpfm.jpg

One possible solution attempted so far involves using two logos and toggling their visibility based on viewport size changes. While functional, it may not be the most elegant solution.

Answer №1

One approach you could take is to utilize a custom grid layout. While Bootstrap may offer some shortcuts for this, I am not aware of them. An option is to explore the order-X classes in Bootstrap, although this won't specifically assist with positioning the logo div between the nav divs within different wrappers.

.special {
  display: grid;
}

div {border: 1px solid grey;}

/* for tablets and desktops*/
@media screen and (min-width: 600px) {
  .special {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 50px 50px;
  }
  
  .logo {grid-area: 1/1/3/2;}

}
<div class="special">
  <div class="topNav">top nav</div>
  <div class="logo">logo</div>
  <div class="bottomNav">bottom nav</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

Using Webpack to Compile Sass (and keep class names local)

It's been a long journey trying to configure my Webpack setup to compile Sass, and the process has become quite overwhelming. In my quest for answers, I encountered numerous Github issues, Stackoverflow threads, and blog posts discussing how to integr ...

What is the best way to achieve this Bootstrap design without copying the content?

Trying to achieve a specific Bootstrap layout without repeating content is my current challenge. Essentially, I aim to divide some content into 2 columns at the sm/md breakpoints and then switch to 3 columns for the lg breakpoint. The layout for sm/md bre ...

The utilization of the Open Sans font family results in certain alterations to the user

Currently, I am working on developing a button widget using react. I have utilized the 'Open Sans' font family for the HTML body in order to maintain consistent UI styling. However, some of the styling elements break down when the 'Open Sans ...

The style in App.js was rejected and the script was not executed as intended

element, I have encountered a common issue that many others seem to face. The typical solution involves correcting a line of code like this one: app.use(express.static(__dirname + '/public')); Unfortunately, despite my efforts to follow the ad ...

Adsense ad unit is not responsive and fails to display properly at dimensions of 320x50 px

I have a unique banner ad that I want to display as the footer on my responsive website. Using media queries recommended in the advertising documentation, I am adjusting the size based on different screen widths. Check out the CSS code below: <style&g ...

What steps should I take to design a polished PDF document?

I have been tasked with automating the invoicing system at our company. Currently, all data is stored in a local MySQL database and someone manually updates an Excel spreadsheet, which is then merged into a MS Word template for generating invoices. The obj ...

What is the best way to incorporate the animated link hover effect I have implemented, in combination with Bootstrap's stretched link feature?

Recently, I encountered a dilemma while enhancing the hover state of a link by adding an animated underline to it. My approach involved using absolute position in the CSS, specifically setting bottom: 0; in the ::after pseudo class. However, another requ ...

On iPhone, links located under a fixed-positioned div can be easily clicked

I am facing an issue on our mobile website where the footer with fixed positioning overlaps with a scrolling feed underneath it, causing the links in the feed to be clickable from the footer area. Footer CSS: .footer { position: fixed; bottom: 0; right: ...

An element generated using a JavaScript loop is covering another element in the layout

I am facing an issue with positioning images within a div to a span. The problem arises as the images are overlapping each other and I am uncertain about how to properly place each image when it is added. Below is the code snippet: The CSS: <style ty ...

"Adjusting the Width of Inner Content in a Div

Here is the structure of a div: <div id="showHide"> <div>Alarm</div> <div>Alarmasdf</div> <div>Alarmasdffasdff</div> How can I obtain the width of the largest content, such as "Alarmasdffasdff"? I hav ...

What is the best way to create a scrollable tbody in an HTML table using React?

In my current project, I am using React, Node, Express, and Postgres to fetch data from a database. The issue I'm facing involves creating a scrollable table within a div that spans the entire screen width. Initially, I had to apply display: block to ...

Tips for creating a scrolling animation effect with images

I'm currently attempting to create an animation on an image using HTML/CSS. The issue I'm facing is that the animation triggers upon page load, but I would like it to activate when scrolling down to the image. Below is my snippet of HTML: <fi ...

Having trouble with the Bootstrap 5 Modal? Discover how to ensure smooth functionality

How can I configure a Bootstrap 5 Modal to open only after clicking on a specific Navbar Dropdown item, without causing the whole website to be disabled and ensuring that all close buttons function correctly? <!doctype html> <html lang="en"> ...

Inserting multiple rows of data into a MySQL database in a single page using only one query in PHP

This snippet shows a MySQL query being used to update and insert data into a database: if ($_POST["ok"] == "OK") { $updateSQL = sprintf("UPDATE attend SET at_status=%s, at_remarks=%s WHERE at_tt_idx=%s", GetSQLValueString ...

Utilize a component's CSS styles by inheriting them and applying them to another component

I have created custom styles for an object as shown below: form#sign_in{ position:relative; margin:85px auto 50px auto; width:455px; background:#fff; border:#dfdfdf 1px solid; border-radius:5px; -moz-border-radius:5px; -web ...

Selecting CSS Properties with jQuery

I am trying to make an image change color to blue and also change the background color to blue when it is clicked inside a div. However, my code doesn't seem to be working as expected. Is there a more efficient way to apply CSS to elements? FIDDLE v ...

Transitioning hover effects with absolutely positioned elements

I am facing an issue where I have an image with a centered absolutely positioned link on top of it. When I hover over the image, there are transition effects in place which work perfectly fine. However, when I hover over the link, these transition effects ...

Tips on adjusting a position that shifts with changes in window size

Working on a website for my grandpa, I'm planning to include a small biker character that runs across the screen. When hovered over, he stops and advises "wear a helmet." The animation works well, but there's an issue with the positioning when th ...

The hovering event trail feature is not functioning in tsParticles, unlike in particlejs

I have two questions regarding the implementation of tsParticles in my React application. First question: <Particles id="tsparticles" options={{ background: { color: { value: "black&quo ...

Obtaining a background image within a keyframe

I have been experimenting with keyframe animations and am looking to incorporate multiple images into the animation. Specifically, I want to switch out the image every 10% increment to depict someone running. Despite my efforts to use a background-img in ...