I am having trouble trying to line up the "open/close" icon on a Bootstrap Collapse panel... it is always either above the title text or below it... I want it all on one one
Here's an image of what what I get and what I want..
...And here's the markup of the BAD version...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
#Basket {
}
#Basket .panel-title .trigger:before {
content: '\e114';
font-family: 'Glyphicons Halflings';
vertical-align: middle;
text-decoration: none;
color: green;
}
#Basket .panel-title .trigger.collapsed:before {
color: green;
content: '\e080';
text-decoration: none;
}
</style>
<title></title>
</head>
<body id="Basket">
<div class="panel-group">
<div class="panel panel-danger" style="padding: 0px;">
<div class="panel-heading" style="padding: 5px;">
<div class="panel-title" style="padding: 20px">
<a role="button" style="text-decoration: none" data-toggle="collapse" href="#collapse" class="trigger collapsed">
<table style="width: 100%">
<tr>
<th style="padding: 20px; text-align: left;">Data Item 1</th>
<th style="padding: 20px; width: 150px; text-align: right;">Data Item 2</th>
<th style="padding: 20px; width: 150px; padding-left: 5px;">Data Item 3</th>
</tr>
</table>
</a>
</div>
<div id="collapse" class="panel-collapse collapse">
<div class="panel-body">
<table style="width: 100%">
<tr>
<td>
Just some plain old text
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I did it please run the code.
I juts used the tag inside of the "td"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
#Basket {
}
#Basket .panel-title .trigger:before {
content: '\e114';
font-family: 'Glyphicons Halflings';
vertical-align: middle;
text-decoration: none;
color: green;
}
#Basket .panel-title .trigger.collapsed:before {
color: green;
content: '\e080';
text-decoration: none;
}
</style>
<title></title>
</head>
<body id="Basket">
<div class="panel-group">
<div class="panel panel-danger" style="padding: 0px;">
<div class="panel-heading" style="padding: 5px;">
<div class="panel-title" style="padding: 20px">
<table style="width: 100%">
<tr>
<th style="padding: 20px; text-align: left;"><a role="button" style="text-decoration: none" data-toggle="collapse" href="#collapse" class="trigger collapsed">     Data Item 1</a></th>
<th style="padding: 20px; width: 150px; text-align: right;">Data Item 2</th>
<th style="padding: 20px; width: 150px; padding-left: 5px;">Data Item 3</th>
</tr>
</table>
</div>
<div id="collapse" class="panel-collapse collapse">
<div class="panel-body">
<table style="width: 100%">
<tr>
<td>
Just some plain old text
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
#Basket {
}
#Basket .panel-title .trigger:before {
content: '\e114';
font-family: 'Glyphicons Halflings';
vertical-align: middle;
text-decoration: none;
color: green;
}
#Basket .panel-title .trigger.collapsed:before {
color: green;
content: '\e080';
text-decoration: none;
}
</style>
<title></title>
</head>
<body id="Basket">
<div class="panel-group">
<div class="panel panel-danger" style="padding: 0px;">
<div class="panel-heading" style="padding: 5px;">
<div class="panel-title" style="padding: 20px">
<table style="width: 100%">
<tr>
<th style="padding: 20px; text-align: left;"><a role="button" style="text-decoration: none" data-toggle="collapse" href="#collapse" class="trigger collapsed"></a>    Data Item 1</th>
<th style="padding: 20px; width: 150px; text-align: right;">Data Item 2</th>
<th style="padding: 20px; width: 150px; padding-left: 5px;">Data Item 3</th>
</tr>
</table>
</div>
<div id="collapse" class="panel-collapse collapse">
<div class="panel-body">
<table style="width: 100%">
<tr>
<td>
Just some plain old text
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Related
Hi I am new new to bootstrap. I wanted to make a table and make it responsive however I created a table already but its not responsive when its viewing in small devices. I'm not sure what did I miss . Can someone help me? Thank you
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.text-violet {
color: #280d5f !important;
}
.text-light-violet {
color: #7a6eaa;
font-size: 14px !important;
}
.table-title-box > * {
padding: 10px 20px;
}
.image {
background-image: url("https://static.thenounproject.com/png/1886158-200.png");
width: 45px;
height: 40px;
display: inline-block;
background-repeat: no-repeat;
}
.vertical {
position: relative;
height: 70px;
}
.has-text-lblue {
color: #1fc7d4;
}
.pools {
width: 99px;
height: 90px;
background-color: transparent;
position: fixed;
right: 9%;
top: 0px;
border: none;
}
</style>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button
type="button"
class="btn btn-info btn-lg"
data-toggle="modal"
data-target="#myModal"
>
Open Modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<table class="table">
<tbody>
<tr>
<td>
<div class="tab-title-box" style="display: table;">
<span
class="tabIcon"
style="vertical-align: middle; padding: 0 10px;"
>
<img
class="image"
src="https://static.thenounproject.com/png/1886158-200.png"
/>
</span>
<span
class="vertical"
style="display: table-cell; margin-right: 20px;"
></span>
<div
class="row"
style="
vertical-align: middle;
display: table-cell;
vertical-align: middle;
padding: 0 10px;
"
>
<div
class="tab-title-text minecraft-font text-violet p-0"
>
Auto First
</div>
<div
class="tab-info text-light-violet m-0 p-0 minecraft-font pt-2"
>
Automatic Viewing
</div>
</div>
</div>
</td>
<td></td>
<td>
<div style="display: inline-block;">
<div class="row m-3 minecraft-font text-violet">
<span
class="text-light-violet m-0 p-0 minecraft-font mb-1"
>Recent View Listing</span
>
3.5 <br />
TEST
</div>
</div>
</td>
<td>
<div style="display: inline-block;">
<div class="row m-3 minecraft-font text-violet">
<span
class="text-light-violet m-0 p-0 minecraft-font mb-1"
>3rd</span
>
Data List
</div>
</div>
</td>
<td>
<div style="display: inline-block;">
<div class="row m-3 minecraft-font text-violet">
<span
class="text-light-violet m-0 p-0 minecraft-font mb-1"
>Total Viewing</span
>
89,687,109 Viewers
</div>
</div>
</td>
<td>
<div style="display: inline-block;">
<div class="row m-3 minecraft-font text-violet">
<span
class="text-light-violet m-0 p-0 minecraft-font mb-1"
>Ends in</span
>
----<br />
</div>
</div>
</td>
<td>
<div style="display: inline-block;">
<div class="row m-3 minecraft-font text-violet">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-chevron-down"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
/>
</svg>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-default"
data-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You can access the code here:
https://codesandbox.io/s/smoosh-dawn-x0xth?file=/index.html
Bootstrap 3 has a wrapping class .table-responsive for make tables responsive creating scroll horizontal:
<div class="modal-body">
<div class="table-responsive">
<table class="table">
<!-- table content-->
</table>
</div>
</div>
I am in the process of developing a BootStrap wrapper for an ASP.NET website that works with almost everything I have used in it -- with the only exception being that content in the main panel does not center itself properly when shrinking the browser window's width, despite the header and footer being completely responsive.
I have a fiddle for this problem: https://dotnetfiddle.net/6dmcaX.
PLEASE NOTE that this wrapper is applied to the master page, and not directly onto the pages that I'm testing with.
For the header, I use a div with the following class attributes: d-flex justify-content-center flex-md-rows align-items-center shadow-sm border-menus fixed-top. Inside that is an UpdatePanel and ContentTemplate, with holds a bunch of markup for the BootStrap navbar.
Meanwhile, here is the markup for the main content panel:
<div class="container d-flex justify-content-center flex-md-rows align-items-center">
// the container acts the same with or without the text to the right of "d-flex"
<div id="content" class="row" style="margin-left: auto; margin-right: auto;">
<div id="divContMain" runat="server" style="width: auto;">
<asp:UpdatePanel ID="contentUPanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<center>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</center>
</ContentTemplate>
</asp:UpdatePanel>
</div>
…
</div>
</div>
The container divContMain needs to run on the server because just below the main content is a sidebar which may or may not be needed, depending on the page being called. By default, the class for divContMain is col-12. One thing I tried doing to fix this problem was I changed the main container to a container-fluid and changed divContMain's width to be inherited instead of "auto" -- and while this did a better job keeping contents in the center, it eventually stops working once the window gets small enough.
I'm very close to figuring this one out, but I wanted to ask and see if anyone else knew. Any help would be appreciated!
It is possible to use combination of the Bootstrap classes to justify content when display: flex is used:
d-flex justify-content-center
So you can add new css class for h1:
#MainContent_ctl00 > h1 {
text-align: center;
}
and add d-flex justify-content-center styles for div which contains your table:
<div class="container d-flex justify-content-center" style="overflow-x: visible;">
<table class="datatable datatable-striped"
id="MainContent_dgReqs" style="border-collapse:collapse;"
border="1" rules="all" cellspacing="0" cellpadding="5">
<!-- The other code is omitted for the brevity -->
</table>
</div>
In addition, text can be aligned through text-align: center inside of <h1>.
An example:
.tableint {
font-size: 15px;
font-family: Estrangelo Edessa, Verdana;
border: Solid 1px #666666;
border-collapse: collapse;
color: Black;
}
.thint {
background-color: #EE8322;
color: Black;
font-weight: bold;
font-size: 14px;
border: solid 1px #666666;
border-collapse: separate;
font-variant: small-caps;
margin-bottom: 5px;
}
.textboxint {
background-repeat: repeat-x;
border: 1px solid #d1c7ac;
font-size: 14px;
border-style: inset;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
font-family: Estrangelo Edessa, Verdana;
color: Black;
width: 175px;
}
.dropdownint {
background-repeat: repeat-x;
border: 1px solid #d1c7ac;
font-size: 12px;
border-style: inset;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
font-family: Estrangelo Edessa, Verdana;
color: Black;
width: 175px;
}
.buttonint {
margin: 5px;
font-family: Estrangelo Edessa, Verdana;
font-size: 14px;
background-color: #EE8322;
color: Black;
text-align: center;
border-top-style: groove;
border-left-style: groove;
border-right-color: Black;
border-bottom-color: Black;
height: 22px;
}
.buttonint:hover {
font-family: Estrangelo Edessa, Verdana;
font-size: 14px;
background-color: #FFFFCC;
color: #006699;
margin: 5px;
}
#MainContent_ctl00 > h1 {
text-align: center;
}
<div class="container-fluid my-hs d-flex justify-content-center flex-md-rows align-items-center">
<div class="row justify-content-center" id="content"
style="margin-left: auto; margin-right: auto; padding-top: 1rem;">
<!-- <div id="divContMain" style="width: inherit;">may just remove -->
<div id="contentUPanel">
<div id="MainContent_ctl00">
<br>
<h1>Purchasing Requisitions</h1>
<br>
<div>
<table width="325" align="center" class="tableint" cellspacing="0" cellpadding="5">
<tbody>
<tr>
<td align="center" class="thint" colspan="2">Filter</td>
</tr>
<tr>
<td align="left" style="width: 50%">Request Start:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text">
</td>
</tr>
<tr>
<td align="left" style="width: 50%">Request End:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text">
</td>
</tr>
<tr>
<td align="left" style="width: 50%">Part Number:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="left" style="width: 50%">Account:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="left" style="width: 50%">Vendor No:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="left" style="width: 50%">Vendor Name:</td>
<td align="left" style="width: 50%">
<input class="textboxint" style="width:175px;" type="text"></td>
</tr>
<tr>
<td align="center" colspan="2">
<input class="buttonint" type="submit" value="Search">
</td>
</tr>
</tbody>
</table>
</div>
<br>
<div class="container d-flex justify-content-center" style="overflow-x: visible;">
<table class="datatable datatable-striped" id="MainContent_dgReqs" style="border-collapse:collapse;"
border="1" rules="all" cellspacing="0" cellpadding="5">
<tbody>
<tr align="center" class="thint" style="color:Black;background-color:#EE8322;font-weight:bold;">
<td>Row1</td>
<td>Row2</td>
<td>Row3</td>
</tr>
<tr align="center" class="gridview">
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
<tr align="center" class="gridview" style="background-color:#FFE1CD;">
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src=" index.js"></script>
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
UPDATE:
I saw you edited your fiddle. So the items are aligned, however we need to align the above div container. So to do this, it is necessary to add the following styles:
<div class="row" id="content mx-auto" style="display:flex; justify-content: center;">
<!-- The other code is omitted for the brevity -->
</div>
With some help from StepUp, I was able to find out what exactly was going wrong. The main container needs its position set to absolute and the content group just below the container needs its content justified to the center, like this:
<div class="container-fluid mt-5" style="position: absolute;">
<div id="content" class="row" style="display: flex; justify-content: center;">
…
</div>
</div>
Now everything scales and is properly centered!
I am following an in-line style method to develop this layout. When I make it responsive, the body and footer content is not getting aligned. As you can see in the image shared on the link, contents are not well aligned when it is responsive:
and here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Throttle Up Coaching</title>
</head>
<style type="text/css">
#media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
body{width: 400px;}
.gutter img p{width: 400px;}
.content{width: 400px;}
.social-connect {width: 100%;}
}
</style>
<body bgcolor="#EEE">
<div class="content">
<table width="646" cellspacing="0" cellpadding="0" style="color: #D8D8D8; text-align: left; border-collapse: collapse; border-spacing: 0; margin: 0 auto; border: 0;">
<tr>
<td colspan="3" style='color: #fff; margin: 0 auto; padding: 0; font: bold 12px/28px "Trebuchet", "Trebuchet MS", serif;' align="center" bgcolor="#D8D8D8" valign="top">
<a style="color: white; text-decoration: none;" href='/emailer'>CLICK TO VIEW THIS EMAIL IN YOUR BROWSER</a>
</td>
</tr>
<tr>
<td class="gutter" width="60" style="color:black; font-weight: normal; margin: 0;" align="left" bgcolor="#fff" valign="top">
<img src="https://i.ibb.co/bPKhXJG/logo.png" align="top" width="200" style="padding: 30px 40px;">
<img src="https://i.ibb.co/0J1Tdqv/background-image.png" border="0" width=100%>
<div style="padding-left: 50px; padding-right:50px; line-height: 30px;">
<p >My Matching Interview has enrolled you in an interview<br>
<h1 style="font-size: 20px; font-weight: bold;">Sprint: Solve Big problems and test ideas in just five day</h1>
access and complete your interview
</p><br>
COMPLETE YOUR INTERVIEW
<br><br>
<hr>
<p style="font-size: 14px; color: #7A7A7A; line-height: 2; padding-right: 50px;">If you have any questions, please contact support#throttleupcoaching.com or call to our toll free number <b style="color: #000;">+372 800 1800</b></p><br>
</div>
</td>
</tr>
</table>
</div><br><br>
<div class="social-connect" style="font-size: 13px; text-align: center; color: #7A7A7A;">
<table align="center" style="display:inline-block;">
<tr>
<td>
<img src="https://i.ibb.co/Xytf49L/icon-48.png" height="24" alt="LinkedIn">
<img src="https://i.ibb.co/cDyVv3r/icon-49.png" height="24" alt="Facebook">
<img src="https://i.ibb.co/QFpjGhH/icon-50.png" height="24" alt="Google plus">
<br><br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; font-size:12px; font-weight:400; line-height:22px; color:#445566;">
You are receiving this email advertisement because you registered with Throttle Up Coaching by<br>
Javelin Corporation® All Rights Reserved.(123 Main Street, Austin, TX 78701) and agreed to<br>
receive emails from us regarding new features, events and special offers.<br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;font-weight:bold;line-height:16px;text-align:center;color:#445566;">
<a class="footer-link" href="#" target="_blank" style="color: #888888;">Privacy</a>
<a class="footer-link" href="#" target="blank" style= "color:#888888;">Unsubscribe</a>
</div>
</div>
</td>
</tr>
</table>
</div><br><br>
</body>
</html>
Any help to fix this issue will be greatly appreciated. Thank you!
There were a few things (I think) was wrong with your HTML.
Body of the mobile device was set to 400px
content was set to 400px
I have added a new class container to change the width of the outer table on mobile devices.
Below is the update code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Throttle Up Coaching</title>
</head>
<style type="text/css">
#media only screen and (max-width: 550px), screen and (max-device-width: 550px) {
.social-connect {width: 100%;}
.container{width:100% !important;}
}
</style>
<body bgcolor="#EEE">
<div class="content container">
<table width="646" cellspacing="0" cellpadding="0" style="color: #D8D8D8; text-align: left; border-collapse: collapse; border-spacing: 0; margin: 0 auto; border: 0;" class="container">
<tr>
<td colspan="3" style='color: #fff; margin: 0 auto; padding: 0; font: bold 12px/28px "Trebuchet", "Trebuchet MS", serif;' align="center" bgcolor="#D8D8D8" valign="top">
<a style="color: white; text-decoration: none;" href='/emailer'>CLICK TO VIEW THIS EMAIL IN YOUR BROWSER</a>
</td>
</tr>
<tr>
<td class="gutter banner" width="60" style="color:black; font-weight: normal; margin: 0;" align="left" bgcolor="#fff" valign="top">
<img src="https://i.ibb.co/bPKhXJG/logo.png" align="top" width="200" style="padding: 30px 40px;">
<img src="https://i.ibb.co/0J1Tdqv/background-image.png" border="0" width=100%>
<div style="padding-left: 20px; padding-right:20px; line-height: 30px;" class="">
<p >My Matching Interview has enrolled you in an interview<br>
<h1 style="font-size: 20px; font-weight: bold;">Sprint: Solve Big problems and test ideas in just five day</h1>
access and complete your interview
</p><br>
COMPLETE YOUR INTERVIEW
<br><br>
<hr>
<p style="font-size: 14px; color: #7A7A7A; line-height: 2; padding-right: 50px;">If you have any questions, please contact support#throttleupcoaching.com or call to our toll free number <b style="color: #000;">+372 800 1800</b></p><br>
</div>
</td>
</tr>
</table>
</div><br><br>
<div class="social-connect" style="font-size: 13px; text-align: center; color: #7A7A7A;">
<table align="center" style="display:inline-block;">
<tr>
<td>
<img src="https://i.ibb.co/Xytf49L/icon-48.png" height="24" alt="LinkedIn">
<img src="https://i.ibb.co/cDyVv3r/icon-49.png" height="24" alt="Facebook">
<img src="https://i.ibb.co/QFpjGhH/icon-50.png" height="24" alt="Google plus">
<br><br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: center; font-size:12px; font-weight:400; line-height:22px; color:#445566;">
You are receiving this email advertisement because you registered with Throttle Up Coaching by<br>
Javelin Corporation® All Rights Reserved.(123 Main Street, Austin, TX 78701) and agreed to<br>
receive emails from us regarding new features, events and special offers.<br><br>
<div style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:11px;font-weight:bold;line-height:16px;text-align:center;color:#445566;">
<a class="footer-link" href="#" target="_blank" style="color: #888888;">Privacy</a>
<a class="footer-link" href="#" target="blank" style= "color:#888888;">Unsubscribe</a>
</div>
</div>
</td>
</tr>
</table>
</div><br><br>
</body>
</html>
I have this Bootstrap design,two rows, their columns are class="col-sm-2" and class="col-sm-10".
How can I make the rowspan like in the img below?
Please see this. I have used bootstrap-4.
/*this css is only for identifying row*/
.row > [class^="col-"] {
background-color: rgba(86, 61, 124, 0.15);
border: 1px solid rgba(86, 61, 124, 0.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-2">
1 of 2
</div>
<div class="col-10">
<div class="row">
<div class="col-12">
Level 2
</div>
<div class="col-12">
Level 2
</div>
</div>
</div>
</div>
</div>
yes just easly use bootstrap classe
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2 col-lg-2" style="background-color: red">
hello
</div>
<div class="col-md-10 col-lg-10" style="background-color: red">
<div class="row">
<div class="col-md-12" style="background-color: black">
<p>a</p>
</div>
<div class="col-md-12" style="background-color: yello">
<p>test</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I came up with something like this...
<div class="row">
<div class="col-sm-2 left"></div>
<div class="col-sm-10 col-sm-push-2">
<div class="col-sm-12 rightTop"></div>
<div class="col-sm-12 rightBottom"></div>
</div>
</div>
.row {
position: relative;
width: 500px;
margin: 15px auto;
}
.left {
position: absolute;
//left is 15px to negate .row's negative mrgins
left: 15px;
height: 100%;
padding: 0;
background-color: #ff0000;
}
.rightTop, .rightBottom {
height: 50px;
padding: 0;
}
.rightTop {
background-color: #00ff00;
}
.rightBottom {
background-color: #0000ff;
}
codepen example here.
<table width="300" border="1">
<tbody>
<tr>
<td rowspan="2">Merged</td>
<td>Table First Row</td>
</tr>
<tr>
<td>Table Second Row</td>
</tr>
</tbody>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-body" style="height:350px; background-color:#fff; border-color:#66cfff; border-style:solid; border-width:1px;padding:0px; overflow:auto;">
<div style="background-color: #0096db!important; padding: 10px 10px 30px 10px; align-items:stretch;">
<div style="float:left; vertical-align:middle">
<h2 style="color: #ffffff !important; text-align: left; font-size: 16px;font-family:Helvetica; font-weight: bold;">Last Payment</h2>
</div>
<div style="float:right ; vertical-align:middle">
<h5>
<a style="cursor:pointer; font-size:13px; color:#ffffff !important; font-weight:bold;" [routerLink]="['/historicPayments']">
View All
</a>
</h5>
</div>
</div>
<table class='table' style="margin-top:10px;">
<thead class="box-heading">
<tr class="row-style">
<th width="16%" style="vertical-align:top">Property/ Agreement ID</th>
<th width="20%" style="vertical-align:top">Property/ Agreement Name</th>
<th width="12%" style="vertical-align:top">Project ID</th>
<th width="20%" style="vertical-align:top">Project Name</th>
<th width="12%" style="vertical-align:top">Check Date</th>
<th width="12%" style="vertical-align:top">Check Amount</th>
<th width="8%" style="vertical-align:top">Invoice</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
</html>
How to stretch the div tag to be equal to table's width. Please see the screenshot. Currently there is white space showing at the end
Please check the updated code. I see it showing the white space at the end of header lable when we move the horizontal bar. Please test this code on w3c school site.
Give percentage value for width attribute.
.example { width:50%; background:green;}<div class="example">HAVE FUN!</div>
Try using width:100%; display:block;
This will help you to make your div 100%
Apply your div with display:table; css.
For example your div class is .box1 then css will be:
div.box1 {width:100%; display:table;}
I assume table width is 100% too.