Expanding the table area in bootstrap

I am currently working on a video slider using bootstrap. I have added a table within the slider (carousel) and it is functioning perfectly. However, I am now looking to update the layout to resemble the image below. I have successfully applied the background color, but I am struggling to insert space between the columns of the description. How can I add space in each column?

  .rowTwo{
  background-color: #491f43;
  }
  .carousel-control.left, .carousel-control.right {
    background-image: none
}
  h1{
  color: #ffffff;
  padding: 0px;
  }
  .txt_txt{
  color: #ffffff;
  font-size: 10pt;
  padding: 0px;
  line-height: 0px;
  }

body

  <div class="item active">
            <table class="table table-bordered">
                <tr>
                    <td align="center"><iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe></td>
                    <td align="center"><iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe></td>
                    <td align="center"><iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe></td>
                </tr>
                <tr>
                    <td class="rowTwo">
                        <h1>Video Title<h1>
                        <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                    </td>
                    <td class="rowTwo">
                        <h1>Video Title<h1>
                        <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                    </td>
                    <td class="rowTwo">
                        <h1>Video Title<h1>
                        <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                    </td>                       
            </table>  
  </div>

preview site

htmlcsstwitter-bootstraphtml-table

Answer №1

Not sure if this approach will be effective, but you could try implementing something along these lines:

<div class="item active">
            <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
                <div class="col-lg-12 col-sm-12" style="padding:0px">
                    <iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:100%; height: 185px;"></iframe>
                </div>
                <div class="col-lg-12 col-sm-12" >
                      <h1>Video Title<h1>
                       <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
                <div class="col-lg-12 col-sm-12" style="padding:0px">
                    <iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:100%; height: 185px;"></iframe>
                </div>
                <div class="col-lg-12 col-sm-12" >
                      <h1>Video Title<h1>
                       <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
                <div class="col-lg-12 col-sm-12" style="padding:0px">
                    <iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:100%; height: 185px;"></iframe>
                </div>
                <div class="col-lg-12 col-sm-12" >
                      <h1>Video Title<h1>
                       <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                </div>
            </div>

  </div>

Answer №2

This code snippet adjusts the spacing between table data cells to achieve a clean layout without excessive styling. 

table {
  background-color: transparent;
  border-spacing: 30px !important;
  border-collapse: separate;
}
td {
  border: 2px solid black;
}
<div class="item active">
<table class="table table-bordered">
  <tr>
    <td align="center">
      <iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe>
    </td>
    <td align="center">
      <iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe>
    </td>
    <td align="center">
      <iframe src="https://www.youtube.com/embed//9cVusLdlC8U&quot;/&gt;?html5=1&amp;wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe>
    </td>
  </tr>
  <tr>
    <td class="rowTwo">
      <h1>Video Title<h1>
                        <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                    </td>
                    <td class="rowTwo">
                        <h1>Video Title<h1>
                        <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                    </td>
                    <td class="rowTwo">
                        <h1>Video Title<h1>
                        <span class="txt_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc interdum, nunc sit amet condimentum aliquam, elit nulla tincidunt urna, quis dapibus augue ligula sed neque. Proin sit amet turpis at dui ultricies imperdiet. Morbi egestas augue at risus congue egestas. Morbi a egestas ante. Donec eget magna dui.</span>
                    </td>                       
            </table>  
  </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 flexbox to adjust the height of a block in the layout

Is there a way to modify the height of .half-containers1 and .half-containers2? Additionally, how can I create the triangle shape that is shown in the image? Is it achievable with CSS alone or do I need to use an image? Check out my fiddle for reference ...

htmlcssflexbox

Updating React JSX class based on certain conditions without manipulating the actual DOM

When working with jsx react, I am looking to dynamically set a class while keeping another class static. Here is an example of what I would like to achieve: maintaining the type class and having an additional dynamic class change change to either big, smal ...

javascriptjqueryhtmlreactjs

Navigating Through Secondary Navigation with Ease

In my React project, I am developing a mega-menu styled dropdown navigation. As a functional component, I am utilizing the useState hook to manage the state and control the display of sub-navigation items. The functionality of the dropdown is operational, ...

javascriptcssreactjs

Show a pair of pictures every X hours using Javascript

Trying to create a code that displays different pairs of images each day, but struggling to make it select them randomly. Instead, the code currently just goes through the array one by one. I'm not great with Javascript and haven't found a way to ...

javascripthtmlimagerandomdisplay

Button component in React JS fails to appear on iPhones

After building a website using reactjs, I encountered an issue where the landing page's begin button is not displaying correctly on iPhones. The website works fine on all other devices, but on iPhones, the button is barely visible - with only a faint ...

javascripthtmlcssreactjs

Can anyone assist with troubleshooting the font size issue for a JavaScript tooltip on Joomla 1.5 with CK Forms?

My Joomla 1.5 site has CK Forms installed and is functioning properly, except for one issue: the tooltip on the captcha is not displaying correctly. It appears in a tiny 1px font size. Even though I have tried debugging using Firebug and confirmed that the ...

javascriptcssfirebugjoomla1.5

Move the modal dialog so it appears closer to the top of the page

I am facing a challenge with my jQuery modal dialog. While it is loading properly, I am restricted to using an older version of jQuery (1.12.4) and cannot upgrade it. My goal is to center the modal close to the top of the page, similar to how it is positio ...

javascripthtmljquerycss

What is the best way to center a div vertically within a bootstrap 5 carousel across all screen sizes?

Looking to center the text div within a Bootstrap 5 carousel both vertically on large screens and small (mobile) screens. To view the site, visit... Below is the HTML for the div. The targeted div has the CSS class #hero .carousel-container { display ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

Retrieve the HTML tag content as a string using jQuery

For my OSINT project, I am developing a tool that needs to extract text from a specific HTML code string. $("p").text(); I'm looking for a way to make my variable work with the above code. Any suggestions? Share your ideas! Solution: $.ajax({ ...

jqueryhtmljsonparsing

I need the PHP code to ensure that only checkboxes can

I keep encountering what seems like a simple issue in my html form with checkbox groups. I am trying to ensure that at least one checkbox is selected from each group, and if not, display an error message using PHP code. However, despite multiple attempts, ...

phphtmlmysql

What purpose does '& .MuiTextField-root' serve within the { makeStyles } function of Material UI?

I've been working on a React JS project using Material-UI and came across some interesting styling in my Form.js file. Here's a snippet of the code: import useStyles from './styles'; const classes = useStyles(); <form autoCapitali ...

cssreactjsmaterial-ui

How to Incorporate Multiple React Components in an HTML File

Attempting to integrate React code into an HTML file has been a challenging process for me. I've been following the official React documentation and successfully implemented their basic like button starter code on my page. Initially, everything worked ...

htmlreactjsjsx

Vertical centering not functioning as expected due to issues with margin-top and margin-bottom

I'm having trouble centering my red block in the middle of the webpage, with the footer block at the bottom and the white block between them. Oddly enough, margin-top doesn't seem to be working for me, but left and right are functioning fine. Al ...

jqueryhtmlcss

Guide on customizing a dropdown button in a class-based Angular library with version 4 or higher

My dilemma revolves around utilizing the Angular Material library for a drop-down navigation bar. The issue at hand is my desire to hover through the list, yet I am unable to tweak the style within HTML. Fortunately, I can easily make alterations in Chrome ...

htmlcssangularangular-material

Styling content in a CSS file and then rendering it as a

My current project involves converting a webpage into a PDF file and I am using @page @bottom-left to insert text in the bottom left corner. @page {size: portrait A4; @bottom-left {content: "Some text to display at the bottom left. Some additional text ...

htmlcsspdf

Choosing Between Select, Radio Buttons, and Checkboxes: A Comparison

What sets apart the meaning when choosing between a <select> element containing <option> children versus using an <input type="radio"> elements placed within a parent <fieldset>? Both options allow users to select only one choice. T ...

htmlformssemantic-markup

Can the combination of pure HTML+JS applications with .NET webservices be both feasible and safe?

Our recent projects have utilized MVC5 with AngularJS, Ninject, Bootstrap, and various other technologies. However, we found that these applications required significant time to fix bugs and add features due to unnecessary complexity. Would it be feasible ...

javascriptjqueryangularjstwitter-bootstrapknockout.js

Tips for styling Pandas dataframe using IPython HTML display

Is there a way to customize the display of pandas dataframes in IPython html format? I want to achieve the following: Have numbers right justified Add commas as thousands separators for numbers Show large floats without decimal places I am aware that nu ...

pythonhtmlpandasipython

Give GetElementsByClassName a shot

Hey, have you tried using js ref_doc_getelementsbyClassName? "I keep getting the error message 'Uncaught TypeError: Cannot set property 'value' of null' " Check out this HTML code snippet: <input type="text" cla ...

javascripthtmljqueryclassname

output a string from the write_html function in plotly

I am currently attempting to utilize plotly express to generate a string representation of a div object in HTML for integration with other packages. Although I have been following the documentation (Plotly v5.17.0), it seems that my attempts have not been ...

pythonhtmlpython-3.xplotlyplotly-express