Columns nested within tabs in Bootstrap4

My current layout is shown here:

https://i.sstatic.net/vQsqz.jpg

I am looking to incorporate nested columns within these tabs.

My attempted solution so far has been unsuccessful. The issue I am facing is that the columns within the specific tabs are overlapping and have no padding between them.

Could you please help me identify what I am doing wrong?

For reference, here is the link to the jsfiddle

Thank you for your assistance!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="row">
    <div class="fruits col-md-8">
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-content1" role="tab" aria-controls="nav-content1" aria-selected="true">Content 1</a>
                <a class="nav-item nav-link" id="nav-content2-tab" data-toggle="tab" href="#nav-content2" role="tab" aria-controls="nav-content2" aria-selected="false">Content 2</a>
            </div>
        </nav>

        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-content1" role="tabpanel" aria-labelledby="nav-content1-tab">
                <div class="row">
                    <div class="col-md-4">
                        <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
                    </div>

                    <div class="col-md-4">
                        <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
                    </div>

                    <div class="col-md-4">
                        <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
                    </div>

                </div>


                <div class="tab-pane fade" id="nav-content2" role="tabpanel" aria-labelledby="nav-content2-tab">...</div>
            </div>
        </div>


    </div>

    <div class="fruits-news col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
    </div>
</div>

<hr>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

The columns are functioning properly. However, the text inside the columns (which consists of very long words) is not wrapping, causing it to overflow outside the columns. To fix this, add the following CSS:

p {
  overflow-wrap: break-word;
}

Please note that the second tab pane appears to be nested inside the first tab pane in your code, which may be causing the second tab to malfunction.

Answer №2

Bootstrap columns do not have margins, so it's recommended to utilize the padding they offer. To create spacing between columns, apply borders to the inner elements and adjust padding accordingly (such as the p tags).

You can also use word-wrap: break-word for text wrapping on long lines.

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

.col-md-4 p {
  border: solid 1px #6c757d;
  padding: 10px;
  word-wrap: break-word;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="fruits col-md-8">
      <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
          <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-content1" role="tab" aria-controls="nav-content1" aria-selected="true">Content 1</a>
          <a class="nav-item nav-link" id="nav-content2-tab" data-toggle="tab" href="#nav-content2" role="tab" aria-controls="nav-content2" aria-selected="false">Content 2</a>
        </div>
      </nav>

      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-content1" role="tabpanel" aria-labelledby="nav-content1-tab">
          <div class="row">
            <div class="col-md-4">
              <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
            </div>

            <div class="col-md-4">
              <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
            </div>

            <div class="col-md-4">
              <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
            </div>
          </div>

          <div class="tab-pane fade" id="nav-content2" role="tabpanel" aria-labelledby="nav-content2-tab">...</div>
        </div>
      </div>
    </div>

    <div class="fruits-news col-md-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
    </div>
  </div>

  <hr>

</div>
<!-- /container -->

Answer №3

When using Bootstrap 4, you no longer need to specify the number in the class like col-md-(number), just use col-md instead.

Simply make the following change:

Old HTML:

<div class="row">
    <div class="col-md-4">
        <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
    </div>

    <div class="col-md-4">
        <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
    </div>

    <div class="col-md-4">
        <p>asdlaklsdlkasdlksadkldsakldsaklsda</p>
    </div>
</div>

Updated HTML:

<div class="container">
    <div class="row">
        <div class="col-sm">
            One of three columns
        </div>
        <div class="col-sm">
            One of three columns
        </div>
        <div class="col-sm">
            One of three columns
        </div>
    </div>
</div>

Jsfiddle Link: Here

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

The callback function in AngularJS filters

I'm currently using an AngularJS filter to sort through a list of items. Here is the Jade markup I am using: li(ng-repeat="parcel in parcels | filter : filterActiveAreaParcels") After the filter function runs and the elements are displayed in the DO ...

javascriptjqueryhtmldomangularjs

Obtaining the calculated background style on Firefox

Back when my userscript was only functional on Chrome, I had a setup where I could copy the entire background (which could be anything from an image to a color) from one element to another. This is how it looked: $(target).css('background', $(so ...

javascriptjquerycssgoogle-chromefirefox

The relationship between the size attribute in HTML and CSS styling based on element size

On one of my pages, there is an input field that looks like this: <input type="text" size="20" name="whatever" /> I would like to keep the size attribute for the input field instead of using CSS. Now, I want to add a select box to the same form wit ...

htmlcss

What is the preferred choice: using camelCase in CSS with Styled Components or Emotion for standard React development?

When I'm coding with React Native, I use the styled properties that follow most of CSS syntax and are formatted in camel case. For instance: //... <Component style={styles.container} /> //... const styles = StyleSheet.Create({ ...

cssreactjsstyled-componentsemotion

Troubleshooting a background image problem in a TailwindCSS configuration file

I'm having trouble getting the background image to show up correctly using tailwind.Config.Js. Even though Tailwind.Config.Js is generating the background image perfectly, when I view it in the browser, it's displaying a 404 error for the image. ...

cssfilepathtailwind-css

What is the best way to create a "tile-based board" for this game?

I am working on a project to create a board made up of tiles, but I am facing difficulty in filling up the entire board area. Currently, I have only managed to create 1 column of the board, as shown in the image. Can someone guide me on how to fill the ent ...

javascripthtmlcssweb

The HTML5 thumbs-up feature will not be visible when not logged in

I have searched high and low on the web and even visited #facebook, but with no luck. I have experimented with the FBXML code as well, and it seems that if you are not logged into Facebook, the Like button will not appear on the page. The strange thing is ...

javascripthtmlfacebook-likefacebook-javascript-sdkfacebook-likebox

Can someone please provide guidance on how to focus on these boxes? (see image below)

My goal is to specifically target the boxes with white dots inside them. Each black box in this picture represents a blog post, even including the larger one at the top. I initially considered using the nth-child selector, but I'm not confident in how ...

jquerycsscss-selectors

What is the method for attaching a keypress event to an HTML document?

Looking to add an interactive touch to my website by creating a "press any key" page. When a key is pressed, I want it to kick off animations that bring the page to life - like sliding elements in from different directions. Open to using jQuery or plain ...

javascriptjqueryhtmlcss

Ways to animate a main element independently of its counterpart's animation

I want to create an animation for a parent element without affecting the child's animation. My HTML & CSS structure is set up as follows: .parent{ background-image: url('https://pm1.narvii.com/6195/421ddbf8c9a2fb1715ef833f869164dc1be ...

htmlcss

Explain the usage of Razor syntax when defining the name attribute in HTML

Currently, I am utilizing MVC 5 and Razor 3 to dynamically generate an attribute name in HTML using Razor syntax. Specifically, I am focused on creating a data-* attribute. This pertains to determining the name of the attribute rather than its value. Her ...

c#htmlasp.net-mvcrazor

Separate the paragraph within an HTML string and eliminate any paragraph that is empty

I need help splitting a string of HTML into an array list, with the condition that the paragraphs should not be empty. Each paragraph should contain some normal text, and if it only contains HTML text without any normal text like: <htmltag>&nbsp; ...

c#htmlregex

Styling text using CSS depending on the displayed text

Utilizing Awesome Tables (AT), I am extracting data from a Google Sheets document to display on a website. The HTML template in the sheets is used for formatting the data, specifically focusing on the table output with inline CSS styling. Since the templat ...

javascripthtmlcss

Utilizing jQuery to attach events to dynamically inserted elements in the DOM

I am having an issue with dynamically adding elements to the DOM and then trying to manipulate their behavior using jQuery's .on() function. However, for some reason, the DOM is not triggering the .on() event for these dynamically added elements. You ...

htmldomjquery

How can we filter the input type file browse window to display only image files?

I'm trying to figure out how to filter the window popup so that it only shows image files when I click on the input type file. <input type="file" /> Any help would be greatly appreciated as I have been struggling to find a solution for this. ...

phpjqueryhtml

Error: The function window.intlTelInput is not recognized within the ReactJS framework

I am currently learning ReactJS and encountering an issue when using jQuery with React JS for intlTelInput. I have installed npm jQuery and imported all the necessary code. Additionally, I have included all the required CSS and jQuery links in my index.htm ...

javascripthtmljquerycssreactjs

"Implementing a full page refresh when interacting with a map using

Here is an example of how I display a map on the entire page: <div id="map_canvas"> </div> UPDATE 2: I have successfully displayed a menu on the map, but there is a problem. When I click on the button, the menu appears briefly and then disapp ...

javascriptjquerycsslinq

Navigating through nested arrays in Laravel Blade templates

I have an array that is displaying the code below after being dumped. array:1[ "123"=>array:3[ "test1" => 12345 "test2" => "test" "test3" => 123 ] ] When trying to display each element in an HTML table, the val ...

phphtmllaravel

What could be causing the padding of my anchor element to extend outside the boundaries of its parent list

In the provided images, it is evident that the <li> element is failing to expand and is disregarding the padding of the parent element.</p> <p><a href="https://i.stack.imgur.com/4ZH65.png" rel="nofollow noreferrer"></a></p& ...

htmlcsspaddinginline

Show the bottom left quarter of the image in an HTML display

Currently, I am still new to HTML coding and experimenting with displaying specific sections of an image. The current code I have is this: <img id="theImg" style="width:100%;" src="https://'myimage.jpg'" /> I'm struggling to figure o ...

htmlcss