Adding a tablespace to bootstrap
I have a video slider and I am using bootstrap for this. Now I have inserted the table into the slider (carousel). It works great, but I change the layout. Below is the layout I want. I was able to set the background. The problem is that I cannot insert a space between the description columns. How do I insert a space into 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"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe></td>
<td align="center"><iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe></td>
<td align="center"><iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&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>
+3
source to share
2 answers
Don't know if this will work. but you can have something like this
<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"/>?html5=1&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"/>?html5=1&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"/>?html5=1&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>
0
source to share
This puts space between each cell of the table data, getting closer to what you are trying to achieve without any extra 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"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe>
</td>
<td align="center">
<iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&wmode=transparent" style="border: 10px solid #2C2B2B; width:265px; height: 185px;"></iframe>
</td>
<td align="center">
<iframe src="https://www.youtube.com/embed//9cVusLdlC8U"/>?html5=1&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>
0
source to share