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

I am looking to have two elements positioned next to each other in equal dimensions, such as the reCaptcha feature

Could someone assist me in positioning these elements side by side, each taking up 50% of the screen? I'm unsure if this can be achieved while using the reCaptcha iFrame. <div class="g-recaptcha" data-sitekey="sitekey" style="transform:scale(0.5); ...

htmlcss

A layout featuring a grid design that includes spacing and gutters between items, however, there is no spacing between the items

I am looking to create a grid layout where each child element represents an individual grid square. However, I am facing an issue with spacing between the children and the parent container, which is not desired. How can I eliminate this unwanted space? U ...

htmlcssgrid-layoutcss-grid

Corner of the Border Revealing a Clear Sky above

Looking to enhance my navigation bar (menu) by adding a cornered border when the user hovers over it. <nav> <a href="#home">Home</a> | <a href="#about">About</a> | <a href="#blog">Blog</a ...

css

Guide on creating a square within an element using JavaScript

After conducting thorough research, I find myself unsure of the best course of action. My situation involves a Kendo Grid (table) with 3 rows and 3 columns. Initially, the table displays only the first column, populated upon the page's initial load. S ...

javascripthtmlcssasp.netkendo-ui

How can I achieve a stylish alternating bottom-border effect for my website navigation menu?

Is there a way for me to achieve this navigation style? Here is the code I am working with currently. https://gist.github.com/anonymous/9c239f1b541aa26d461b I'm facing difficulty replicating the line style. Any suggestions on how to accomplish that? ...

cssnavigationlinealternating

Properly specify the type annotation for a view function that does not accept any arguments

As I continue my Elm learning journey, I have come across a beginner's question. I'm struggling to properly type annotate a function that simply returns a pure div element. header = div [] [ text "Hello" ] Can someone provide guidance on th ...

htmlelm

Tips for positioning a JQuery drop-down correctly

Although I am not well-versed in JQuery and struggle with CSS, I often find myself working with both. Currently, I have encountered a problem: The jquery script I am using involves clicking on an image to reveal a login box that drops down using slideTogg ...

jqueryhtmlcss

My goal is to create text that is opaque against a backdrop of transparency

Is it feasible using CSS to create text with a transparent background while keeping the text opaque? I attempted the following method: p { position: absolute; background-color: blue; filter: alpha(opacity=60); opacity: 0.6; } span { color: b ...

htmlcss

Adjust the size of the font in accordance with the value of the span text

I am looking to adjust the font size based on the value within the span element. The numbers in the class name may vary. Issue: using text() retrieves all values (e.g. 50020) I want to incorporate each() and $this in some way. How can I do this? Thank ...

javascriptjqueryhtmlcss

Sorting by price using the ng-repeat directive is not suitable for this

Utilizing angular's ng-repeat along with orderBy on a product catalog page to sort the products based on a select change. The ordering by name using orderBy works as expected, however, when it comes to price it sorts like this: 1,10,11,12,13,14,2,3,4 ...

javascripthtmlangularjsangularjs-orderby

Flask - Refreshing Forms Dynamically

In an effort to enhance the responsiveness of my app, I am looking for a way to prevent the page from reloading every time a POST request is sent. My current setup includes a dynamically generated form with input fields designed like this: <div class=&q ...

javascriptpythonhtmlflask

Adaptable bootstrap placement

I have created a form that includes a custom checkbox element. The issue is that the label for the checkbox is not vertically aligned with the checkbox itself. How can I adjust the label to be vertically centered with the checkbox? You can see the code ...

htmlcssbootstrap-4

Issues with special characters in @font-face rules

For some reason, I'm encountering issues with the CSS3 property @font-face in certain browsers when trying to use my own fonts. Chrome, Safari, and IE10 work fine, but other browsers present several problems: The code I used looks like this: (fonts G ...

csscross-browserfont-face

Removing a session when the client has left

I wanted to simplify what I'm trying to achieve. Imagine two people have PHP sessions on a webpage. One person leaves the page while the other remains. After 60 seconds, the session of the person who left should be terminated automatically (like a ti ...

phpjavascripthtmlajax

issue with excessive content overflow

I'm working with a div structure where the outer div has the following CSS properties: position: relative; overflow: hidden; min-heigth: 450px; Inside this outer div, there is another div with the following CSS properties: position: absolute; top: ...

htmlcsslayout

Tips for retrieving user input and displaying it on an HTML page

I have encountered an issue with displaying user input in a table. The code for the table display is as follows: <tr ng-repeat="user in users" ng-class-even="'bg-light-grey'" ng-if="isLoading==false"> <td> ...

javascripthtmlangularjs

Display fixed or absolute elements within a scrollable container

I want to create a unique design with overlapping divs that can be selectively displayed through scrolling. While this effect is possible with images using background-attachment: fixed, I am seeking a solution that can work for any child element. Here is ...

css

Troubleshooting problem with navigation tabs in Bootstrap version 3.x

My bootstrap component nav-tabs works fine on desktop when the page width is larger than necessary for the row. However, on mobile devices, the responsive design doesn't behave as expected and the tabs become misaligned. You can see the issue in the c ...

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3frontend

Basic click event triggered every second click in JavaScript and HTML

onclick="HandleAction(\'playnow\');HandleAction(\'stop\');" This element performs two functions simultaneously. However, it only executes the actions \playnow\ and then \stop\ immediately after. ...

javascripthtml

Can someone help me troubleshoot the issue I'm having with this jQuery API function?

Greetings everyone, I'm facing an issue with my jQuery code. I am attempting to use the CoinMarketCap API from cryptokickoff to showcase cryptocurrency statistics on my website. I understand how to display them, but the appending process to my column ...

jqueryhtmlapi