Equal height tabbed content design allows for a visually appealing and organized

I'm looking to create a tabbed menu that displays content in blocks, but I want each block to be the same height. I tried using padding and flexbox, but couldn't get it to work properly. Any suggestions on how to achieve this?

.tab-pane {
  flex: 1;
  padding: 80px;
}

.nav-tabs {
border-bottom: none;
display:block;
}

.nav-tabs li a {
text-decoration:none;
}

.jj-icon {
  max-width: 50px;
  padding-bottom: 20px;
}

.bg-blue {
  background-color: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pt-200">
  <div class="row">
    <div class="col-6">
      <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#home">Title 1</a></li>
        <li><a data-toggle="tab" href="#menu1">Title 2 </a></li>
        <li><a data-toggle="tab" href="#menu2">Title 3</a></li>
      </ul>
    </div>
    <div class="col-6">
      <div class="tab-content d-flex flex-column">
        <div id="home" class="tab-pane justify-content-center bg-blue active">
          <img src="images/marketing.svg" class="jj-icon">
          <h3>Menu</h3>
          <p>Sed vel erat ultrices, facilisis metus et, tincidunt turpis. Aenean nec lorem finibus, ornare ex sit amet, tempus nunc. Proin feugiat rhoncus nibh vel laoreet.</p>
        </div>
        <div id="menu1" class="tab-pane justify-content-center bg-blue fade">
          <img src="images/marketing.svg" class="jj-icon">
          <h3>Menu 1</h3>
          <p>Faucibus, vitae posuere felis molestie. Integer vulputate euismod libero, ac dignissim arcu aliquam id. In hac habitasse platea dictumst.</p>
        </div>
        <div id="menu2" class="tab-pane justify-content-center bg-blue fade">
          <img src="images/marketing.svg" class="jj-icon">
          <h3>Menu 2</h3>
          <p>Fusce sagittis urna nec ultrices rutrum. In tristique mi non tellus vulputate, nec luctus diam porttitor. Nulla porttitor sagittis placerat.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Desired layout reference image:

https://i.stack.imgur.com/OfnYU.png

htmlcsstwitter-bootstrapflexbox

Answer №1

Are you interested in this particular design layout?

#topBar,#bottomBar{
height:10vh;
width:100vw;
background-color:black;
}
#middleContainer{
display:flex;
justify-contents:center;
width:100vw;
height:80vh;
background-color:white;
}

body{
margin:0;
}

#left,#right{
display:flex;
flex-direction:column;
align-items:center;
width:50%;}

p{
border:solid 2px green;
}

#right,#left{
border:solid 2px red;
}

#big{
width:90%;
height:90%;
}
<div id='topBar'>
</div>

<div id='middleContainer'gt;
   <div id='left'>
   <p>title 1</p>
   <p>title 2</p>
   <p>title 3</p>
   </div>

   <div id='left'>
   <p id='big'>some text</p>
   </div>
</div>

<div id='bottomBar'>
</div>

Answer №2

Bootstrap includes built-in classes for displaying content, adding margins, and setting padding.

Flexbox can be nested within each other as shown in the example below:

.tab-pane {
  flex: 1;
  padding: 80px;
}

.nav-tabs {
border-bottom: none;
display:block;
}

.nav-tabs li a {
text-decoration:none;
}

.jj-icon {
  max-width: 50px;
  padding-bottom: 20px;
}

.bg-blue {
  background-color: blue;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container pt-200">
  <div class="row">
    <div class="col-6 d-flex">
      <ul class="nav nav-tabs d-flex flex-column w-100 m-0 p-0 align-items-center justify-content-center">
        <li class="active p-0 m-2"><a data-toggle="tab" href="#home">Title 1</a></li>
        <li class=" p-0 m-2"><a data-toggle="tab" href="#menu1">Title 2 </a></li>
        <li class=" p-0 m-2"><a data-toggle="tab" href="#menu2">Title 3</a></li>
      </ul>
    </div>
    <div class="col-6">
      <div class="tab-content d-flex flex-column">
        <div id="home" class="tab-pane justify-content-center bg-blue active">
          <img src="images/marketing.svg" class="jj-icon">
          <h3>Menu</h3>
          <p>Sed vel erat ultrices, facilisis metus et, tincidunt turpis. Aenean nec lorem finibus, ornare ex sit amet, tempus nunc. Proin feugiat rhoncus nibh vel laoreet.</p>
        </div>
        <div id="menu1" class="tab-pane justify-content-center bg-blue fade">
          <img src="images/marketing.svg" class="jj-icon">
          <h3>Menu 1</h3>
          <p>Faucibus, vitae posuere felis molestie. Integer vulputate euismod libero, ac dignissim arcu aliquam id. In hac habitasse platea dictumst.</p>
        </div>
        <div id="menu2" class="tab-pane justify-content-center bg-blue fade">
          <img src="images/marketing.svg" class="jj-icon">
          <h3>Menu 2</h3>
          <p>Fusce sagittis urna nec ultrices rutrum. In tristique mi non tellus vulputate, nec luctus diam porttitor. Nulla porttitor sagittis placerat.</p>
        </div>
      </div>
    </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 can you give a div a background without any text inside?

I am struggling to create an HTML element with a background image using CSS, but the background does not show up unless there is text inside the element. CSS - #box { background:url(.....) } HTML - <div id="box">something</div> // this w ...

htmlcss

Troubleshooting issues with jQuery background-position animation and CSS sprites functionality

Trying to add animation to my navigation links background using a Css sprite. Check out the picture here: $(document).ready(function(){ $('nav a') // Move the background on hover .mouseover(function(){ $(this).stop().animate({ba ...

jqueryhtmlcsscss-spritesbackground-position

Obtaining data from an external ng-repeat element

My list contains items that are being repeated using ng-repeat details. I want to be able to hover over one of the li elements and have the background of a div called background (which is outside of the ng-repeat) change to the url of the corresponding d ...

javascriptjqueryhtmlcssangularjs

"Troubles with directing on websites using jQuery, CSS,

I have been struggling with creating this navigation bar for weeks now and I keep running into issues. What I am attempting to achieve is a primary navigation bar that, when hovered over, displays a secondary navigation menu below and slightly to the righ ...

jqueryhtmlcssnavigation

Ensuring that hover remains active despite mousedown in JavaScript, CSS, and HTML

It appears that in browser-javascript hover events are deactivated when the mouse button is pressed down, as demonstrated by the following example: (Please run the code snippet to witness what I am referring to.) * { user-select: none; } #click, #drag, ...

javascripthtmlcsshover

The auto-play feature fails to function on iPhone devices when using Reactjs

I am currently working with Reactjs and Nextjs. I have a video on my website that is functioning properly on Android phones but not on iPhones. How can I resolve this issue? I have attempted the following code: <video loop autoplay='' muted> ...

javascripthtmlreactjsiphonenext.js

Struggling to make the fancybox feature function with html/php

I've been trying to find a solution to this problem repeatedly, but I just can't seem to crack it. All I want to do is use fancybox to display an image. Since this is my first time using fancybox, I'm sure someone with more experience will ...

javascriptphpjqueryhtmlfancybox

jQuery validation for various forms with individual submission buttons

I am working on a single-page application that has multiple forms, such as form_1, form_2, etc., each with its own submit button (submit_1, submit_2, etc.). Each form contains records with checkboxes for taking specific actions and there is also a "select ...

jqueryhtml

What is the method for configuring the asp-for input tag helper to create camelCase names?

My view model is structured as follows: public class MyModel{ public DateTime? StartDate {get;set;} } When using an input tag on a view with the asp-for tag helper, the default HTML generated looks like this: <input type="datetime" id="StartD ...

htmlasp.net-core-mvctag-helpers

Challenges with organizing content using spans in Bootstrap 3

Looking for some help with TB3 here. I've created a jsFiddle to showcase my attempt at building a small minitron, which is essentially a mini jumbotron. https://i.sstatic.net/VxruB.png The idea is to have each 'minitron' contained within a ...

csstwitter-bootstrap-3

What is the reason for the failure of this code to store data in local storage (undefined)?

After creating a new div with data from an input form, I noticed that the first div properly saves the inputted data. However, when I try to input new data, the div displays an undefined value. first attempt second attempt 0: {name: "Milk", amount: "30"} ...

javascripthtmljsondom

Skip ahead button for fast forwarding html5 video

One of the features in my video player is a skip button that allows users to jump to the end of the video. Below is the HTML code for the video player: <video id="video1" style="height: 100%" class="video-js vjs-default-skin" controls muted autoplay=" ...

javascriptjqueryhtml

Python Flask login screen not showing error message

Currently, I'm in the process of developing a login screen that incorporates Bootstrap and utilizes jQuery keyframes shaking effect. The backend functionality is managed by Flask. However, I seem to be encountering an issue where the error message "Wr ...

javascripthtmljqueryflaskflask-login

"Use jQuery to toggle the slide effect for the first element of a

Below is the HTML code snippet: <div class="row header collapse"> Content 1 <i class="fas fa-chevron-circle-up" ></i> </div> <div class="instructions-container"> <div></di ...

javascripthtmljquerycss

The code seems to be malfunctioning in a separate JS file, but oddly enough, it functions properly when placed within a <script> tag

I am trying to create a loader, but I have encountered an issue where the script works when placed directly in the HTML file, but not when it is in a separate JavaScript file. Here is the script: var loader = document.getElementById("ld"); w ...

javascripthtmlcssbootstrap-5

Animation of two divs stacked on top of each other

I am trying to replicate the animation seen on this website . I have two divs stacked on top of each other and I've written the following jQuery code: $('div.unternehmen-ahover').hover( function () { $('div.unternehmen-ahover' ...

javascriptjquerycsshtmlslider

"Enhancing the aesthetics: Stylish blue borders around Bootstrap

After successfully setting up bootstrap-select, I have noticed that blue borders are showing in two specific instances: 1) within the dropdown menu 2) when a new value is selected I have made some adjustments but the issue persists. Can someone please p ...

csstwitter-bootstrapbootstrap-select

The margin-bottom attribute for the final element within a div does not cause the div to be "stretched."

Having a div with a background image containing an element with margin-bottom applied can cause a gap between that div and another one below it, also with a background image. This leads to the issue illustrated in this screenshot: Screenshot http://img40.i ...

htmlcssmargin

Sub menus are not appearing in the drop-down menu

Below is the code for my dropdown button with an additional level. Initially, the button works as intended. However, upon attempting to click within the dropdown submenu, I noticed that all four items displayed the same last submenu only. .icon-cadet-l ...

htmlcsscss-selectors

How can Javascript be used to interact with buttons and select options?

Can anyone help me with creating a JavaScript code that can select an option from a drop down, click on that option, and then add it to the cart by clicking another button? So far, I have attempted the following: browser.getelementbyid("id").invokemembe ...

javascripthtml