Display bootstrap wells on left and right side of the page - javascript

I use bootstrap wells to resemble cards. I currently have two different types of cards, the "normal" ones which will be in the middle of the screen, and the "special" ones which will be on the left and right side.
Template I'm trying to replicate:
Issues:
1.) It seems like the wells in bootstrap don't want to go to the very left or right of a page. They seem to always be contained in an invisible div/border and won't go anywhere else unless absolute positioning is used. I can't use absolute positioning because the middle content overlaps it if zoomed in. It gets rid of the responsive aspect of bootstrap which needs to stay.
2.) Without the use of absolute positioning, making new "special" cards on the side will add extra vertical space which will sink the middle content down the page
body {
background-color: #5C67B6;
}
html,
body {
height: 100%;
padding-top: 70px;
}
.btn-purple {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -140px;
}
.btn-info {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
right: 10%;
margin-left: 140px;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open>.dropdown-toggle.btn-info {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open>.dropdown-toggle.btn-purple {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.customClass {
width: 700px;
max-width: 100%;
margin: 0px auto;
}
.turbo {
background: #7280e5;
color: white;
border-color: #4b5496;
}
.well {
min-height: 320px;
max-height: 320px;
height: auto;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.well:hover {
background: #7280e5;
color: white;
border-color: #4b5496;
}
.well p {
margin-bottom: 50px;
}
.header {
display: inline-block;
width: 100%;
border: 1px solid red;
}
.playerOne {
float: right;
text-align: center;
width: 300px;
border: 5px solid #dadada;
background-color: #dadada;
border-radius: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 15px #5dbcd2;
-moz-box-shadow: 0px 0px 15px #5dbcd2;
box-shadow: 0px 0px 15px #5dbcd2;
}
.playerTwo {
float: left;
text-align: center;
width: 300px;
border: 5px solid #dadada;
background-color: #dadada;
border-radius: 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 15px #5dbcd2;
-moz-box-shadow: 0px 0px 15px #5dbcd2;
box-shadow: 0px 0px 15px #5dbcd2;
}
#media only screen and (max-width: 900px) {
.playerOne {
width: 650px;
}
.playerTwo {
width: 633px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="header">
<div class="playerOne">
Special Cards
</div>
<div class="playerTwo">
Special Cards
</div>
</div>
<center>
<div class="input-group" style="width: 500px; padding-bottom: 2cm;">
<input type="text" class="form-control" placeholder="Search cards!">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
</center>
<div class="content">
<div class="container content-sm customClass">
<div class="row">
<center>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a aria-label="Previous" href="#"><span aria-hidden="true">«</span></a>
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
<a aria-label="Next" href="#"><span aria-hidden="true">»</span></a>
</li>
</ul>
</nav>
</center>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well turbo">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button
</div>
</div>
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Card</h3>
<p>This is Text. This is Text. This is Text. This is Text. </p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Button!
<i class="fa fa-info-circle" aria-hidden="true"></i> Button!
</div>
</div>
</div>
</div>
</div>
I've tried using a flexbox and putting the wells in there which seemed to work until i zoomed in and noticed it was no longer responsive and overlapped the other content.
What is the best and most efficient way of adding wells to the left and right side of the page without adding unnecessary whitespace and maintaining responsiveness?


You can try with below example to get the same use col-xx-offset-xx bootstrap's classes
I posted a working example
You can use container-fluid instead of container.
.box {
border: 1px solid;
width: 100%;
height: 100px;
margin: 0px 0px 10px 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="box">
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
<div class="box">
</div>
</div>
<div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
<div class="box">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2">
<div class="box">
</div>
</div>
<div class="col-lg-4 col-lg-offset-2 col-md-4 col-md-offset-2">
<div class="box">
</div>
</div>
<div class="col-lg-2 col-lg-offset-2 col-md-2 col-md-offset-2">
<div class="box">
</div>
</div>
</div>
</div>
Working codepen - codepen


I've no idea how to do it with fixed sizes, css is hard.
body {
padding-top: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="well">header row</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
<div class="col-lg-6">
<div class="well">
sample text
</div>
<div class="row">
<div class="col-sm-6">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
<div class="col-sm-6">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
<div class="well">x-well</div>
</div>
</div>
</div>

Related

jQuery toggle() for radio button selects multiple at a time, needs to work like simple radio button

I have created two radio buttons, and for both radio buttons, I used for creating <i> font icon. As I had created that earlier as a check box and it worked properly, I used the same code for creating the radio buttons. Fixed the position; it works if I go by the check box. For these radio buttons, I used the toggle() function in jQuery. But when I use the radio buttons, then I saw that I can not do one selection at a time.
function togperm()
{
$("#perm").toggle();
}
function togchq()
{
$("#chq").toggle();
}
.radiocirl {
width: 20px;
height: 20px;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.bluefont{ color:rgb(0,98,168) !important; }
.shcursor{cursor: pointer;}
.f10{font-size: 1.0em !important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-md-12">
<div class="col-12">
<div class="row">
<div class="col-1">
<div class="radiocirl shcursor" onclick="togchq()">
<i class="fa fa-circle f10 bluefont" id="chq" style="position: absolute; display: none; margin: 2px 0.4px;"></i>
</div>
</div>
<div class="col-11">
<div class="col-12"> Correspondence Address</div>
</div>
</div>
<div class="row">
<div class="col-1">
<div class="radiocirl shcursor" onclick="togperm()">
<i class="fa fa-circle f10 bluefont" id="perm" style="position: absolute; display: none;margin: 2px 0.4px;"></i>
</div>
</div>
<div class="col-11">
<div class="col-12">Add Address</div>
</div>
</div>
</div>
</div>

You can use .find() and .not() methods to achieve same . First you can get closest div which contains both your radio button then using .not() exclude div where click event has occur then simply use hide() to hide other i icon.
Demo Code :
$(".radiocirl").on("click", function() {
//get the `i` tag
var selector = $(this).find(".bluefont")
selector.toggle(); //toggle same
//get closest div `outer` and find `i` tag not(the one which is inside the div which is clicked hide it)
$(this).closest(".outer").find(".bluefont").not(selector).hide()
})
.radiocirl {
width: 20px;
height: 20px;
border: 1px solid #CCCCCC;
border-radius: 50%;
}
.bluefont {
color: rgb(0, 98, 168) !important;
}
.shcursor {
cursor: pointer;
}
.f10 {
font-size: 1.0em !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!--aded outer class-->
<div class="col-md-12 outer">
<div class="col-12">
<div class="row">
<div class="col-1">
<div class="radiocirl shcursor">
<i class="fa fa-circle f10 bluefont" id="chq" style="position: absolute; display: none; margin: 2px 0.4px;"></i>
</div>
</div>
<div class="col-11">
<div class="col-12"> Correspondence Address</div>
</div>
</div>
<div class="row">
<div class="col-1">
<div class="radiocirl shcursor">
<i class="fa fa-circle f10 bluefont" id="perm" style="position: absolute; display: none;margin: 2px 0.4px;"></i>
</div>
</div>
<div class="col-11">
<div class="col-12">Add Address</div>
</div>
</div>
</div>
</div>

How can I resize a div according to zoom?

I am having following UI.
Everything works good when zoom is 100%. But when user zooms in the UI get disturbed and is seen as following:
The card within the div does not resize. I want all the cards to take the width of the div titled E. Setting card width to 100% is creating issue for other divs. As cards get stretched for div having with bigger than div E.
div E display once card. There may be multiple card visible on horizontal scroll. Similarly, div R shows 3 cards at once. It may contain more cards. When zooming, some content of the card visible gets hidden in div E. Similarly, the last of 3 cards in div R is also gets partially hidden.
Here is the codepen link and below the code:
#div_A {
background-color: #B14C08;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_B {
background-color: #157668;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_C {
background-color: #E61B00;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_D {
background-color: #0078D4;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
#div_E {
background-color: #0D283D;
padding: 5px;
font-weight: 600;
color: white;
font-size: 13px;
}
.holder {
min-height: 240px;
padding: 0 2px 0 2px;
}
.holder .card_holder {
padding: 0;
max-width: 290px;
}
.holder .xyz {
overflow-x: auto;
min-height: 240px;
}
.shortdetail {
display: flex;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.content {
width: 287px;
position: relative;
animation: animatop 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards;
}
.card {
width: 100%;
height: 80px;
padding: 0px;
border: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
background-color: white;
position: relative;
overflow: hidden;
}
.shortdetail {
margin: 5px;
flex-direction: row;
z-index: 2;
position: relative;
}
.profileinfo {
width: 100%;
margin: 0px 10px;
color: #5a5a5a;
line-height: 1.2;
font-style: initial;
}
.profileinfo .row {
margin: 0;
}
.profileinfo .col-8,
.col-4 {
padding: 0;
}
.profileinfo label {
margin-bottom: 0px;
}
.name {
font-size: 13px;
font-weight: 600;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="col-8">
<div class="row rounded-top" style="background-color :#405755; color: white; font-weight: 600;">
<span class="col" style="padding: 5px; padding-left: 8px; font-size: 14px;">List</span>
</div>
<div class="row border border-primary" style="padding: 5px 0 5px 0;">
<div class="row" style="margin: 0px; margin-bottom:3px; width: 100%;">
<div class="col-3 holder">
<div class="rounded-top" id="div_A">
Div A <button>Prev</button> <button>Next</button>
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-9 holder">
<div class="rounded-top" id="div_B">
Div B
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3 holder">
<div class="rounded-top" id="div_C">
Div C
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 holder">
<div class="rounded-top" id="div_D">
Div D
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card_holder" style="margin-right: 20px">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3 holder">
<div class="rounded-top" id="div_E">
Div E
</div>
<div class="d-flex flex-row xyz">
<div class="card_holder">
<div class="content">
<div class="card" style="background-color: #F8F6F4">
<div class="shortdetail">
<div class="profileinfo">
<label class="name">Random Name</label><br />
<label style="font-size: 12px;">Dummy</label>
<div class="row" style="font-size: 12px;">
<span class="col-8">dummy</span>
<span class="col-4 text-right">dummy</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Do not fix width or height with px, try with % and see

how to shape vertical line with curved at corners in html

Simply i attached the required output image.w ithin the braces, i need a textviews..
i tried with below code:
<div class="col-sm-12 col-md-8 offset-md-2 col-lg-6 offset-lg-3 nopadding">
<div class="card weather" widget="">
<div class="card-header">
<span class="heading">Criminal Records</span>
<div class="widget-controls">
<button class="btn btn-info btn-rounded btn-xs" type="button" routerLink="/overview">
<i class="fa fa-arrow-left"></i> Back</button>
</div>
</div>
<search-details [searchDetails]='details'></search-details>
<div class="card bottom-15">
<div class="card-block text_yellow searchfont">{{data.length ? data.length : ''}} Possible Criminal
<span *ngIf="data.length == 1">Record</span>
<span *ngIf="data.length > 1">Records</span>
</div>
<div class="row">
<span class="text-overflow">IMPORTANT: Due to varying quality of source data, records displayed may not pertain to your subject. Independent
verification is highly recommended. Criminal record results in FOREWARN may be limited due to strict
matching logic. Additional records may exist that fall outside FOREWARN's strict matching process.</span>
<button class="btn btn-info btn-rounded btn-xs criminal-info-button" (click)="openCriminalImportantNote()" type="button">More</button>
</div>
</div>
<div>
<div class="card-block widget-body buttons">
<div class="row" *ngFor="let record of data; let i = index">
<div class="col-sm-12 bottom-15">
<div class="card text_yellow">
<div class="card-block">
Record: {{i+1}}
<p class="propname">Source: {{ record.sourceName }}</p>
<div class="row">
<div class="col-sm-9">
<div *ngIf="record.offenseDate" class="row">
<label class="col-5 col-sm-4 text-truncate text-gray">Offense Date: </label>
<div class="col-7 col-sm-7">{{ record.offenseDate }}</div>
</div>
<div *ngIf="record.chargesFiledDate " class="row">
<label class="col-5 col-sm-4 text-truncate text-gray">Charges Filed Date: </label>
<div class="col-7 col-sm-7">{{ record.chargesFiledDate }}</div>
</div>
<div *ngIf="record.convictionDate" class="row">
<label class="col-5 col-sm-4 text-truncate text-gray">Conviction Date: </label>
<div class="col-7 col-sm-7">{{ record.convictionDate }}</div>
</div>
<div class="row">
<label class="col-5 col-sm-4 text-truncate text-gray">Case Type: </label>
<div class="col-7 col-sm-7">{{ record.caseType }}</div>
<label class="col-5 col-sm-4 text-truncate text-gray">Description: </label>
<div class="col-7 col-sm-7">{{ record.description }}</div>
<label class="col-5 col-sm-4 text-truncate text-gray">Disposition: </label>
<div class="col-7 col-sm-7">{{ record.disposition }}</div>
</div>
</div>
<div class="col-sm-3">
<p>
<b>
<u>Match Key</u>
</b>
</p>
<div class="row">
<label class="col-9 col-sm-6">FirstName: </label>
<div *ngIf="record.matchKeys && record.matchKeys.firstName" class="col-3 col-sm-6 color-green">✓
</div>
</div>
<div class="row">
<label class="col-9 col-sm-6">LastName: </label>
<div *ngIf="record.matchKeys && record.matchKeys.lastName" class="col-3 col-sm-6 color-green">✓
</div>
</div>
<div class="row">
<label class="col-9 col-sm-6">MInitial: </label>
<div *ngIf="record.matchKeys && record.matchKeys.mInitial" class="col-3 col-sm-6 color-green">✓
</div>
</div>
<div class="row">
<label class="col-9 col-sm-6">BirthDate: </label>
<div *ngIf="record.matchKeys && record.matchKeys.dob" class="col-3 col-sm-6 color-green">✓
</div>
</div>
<div class="row">
<label class="col-9 col-sm-6">Address: </label>
<div *ngIf="record.matchKeys && record.matchKeys.address" class="col-3 col-sm-6 color-green">✓
</div>
</div>
<div class="row">
<label class="col-9 col-sm-6">State: </label>
<div *ngIf="record.matchKeys && record.matchKeys.state" class="col-3 col-sm-6 color-green">✓
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Im trying to add vertical lines with curved at corners in html but i dont have any idea how to add vertical lines in html with curved shape at corners. so can any one help me to solve this.
Please can any one help me to solve this.

You could use borders and border-radius to achieve what you want, adjust border-radius to fit your needs, code will be like follow:
div {
width: 70px;
padding: 10px 15px;
border-right: 1px solid #333;
border-left: 1px solid #333;
border-radius: 25px;
}
<div>
Some text Some text Some text Some text Some text
</div>

Two ways:
Method #1: borders on containing element & "block-out" pseudo-elements
This method uses pseudo-elements to "block-out" the containing element's top and bottom borders.
body {
background: gold;
}
.containing {
border: 1px solid;
width: 200px;
height: 300px;
border-radius: 20px;
background: gold;
position: relative;
}
.containing:before {
content: "";
width: 80%;
height: 1px;
position: absolute;
left: 0;
right: 0;
top: -1px;
margin: auto;
background: gold;
z-index: 1;
}
.containing:after {
content: "";
width: 80%;
height: 1px;
position: absolute;
left: 0;
right: 0;
bottom: -1px;
margin: auto;
background: gold;
z-index: 1;
}
<div class="containing"></div>
Method #2: borders on pseudo-elements
This method also uses pseudo-elements but to draw the borders themselves allowing transparent gaps to the top and bottom of the containing elements; which will be useful if you need these elements to behave as intended against any background-color.
body {
background: white; /* to demonstrate transparent background */
}
.containing {
width: 200px;
height: 300px;
border-radius: 20px;
background: gold;
position: relative;
}
.containing:before {
content: "";
position: absolute;
width: 30px;
left: 0;
bottom: 0;
top: 0;
margin: auto;
background: transparent;
z-index: 1;
border: 1px solid;
border-right: 0;
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;
}
.containing:after {
content: "";
position: absolute;
width: 30px;
right: 0;
bottom: 0;
top: 0;
margin: auto;
background: transparent;
z-index: 1;
border: 1px solid;
border-left: 0;
border-bottom-right-radius: 20px;
border-top-right-radius: 20px;
}
<div class="containing"></div>

as everyone here mentions already, border and border-radius is what you are looking for.
border-left: 1px solid black;
border-right: 1px solid black;
border-radius: 20px;
here is a simple fiddle to demonstrate: https://jsfiddle.net/suvartheec/obhL9aca/

How can I put these buttons side by side

How can I put these buttons side by side and centered?
The are way to long and one on top of the other.
I've tried different bootstrap classes, but I can't find the one that is going to align them under the quote.
$(document).ready(function() {
/*getting random quote on button click*/
$('#getMessage').on("click", function() {
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=&"+new Date().getTime(), function(json) {
console.log(json[0].content)
console.log(json[0].title)
// var quoteArr = json.contents.quotes[0])
$("#quote-content").html(json[0].content);
$("#quote-author").html("--"+json[0].title);
$(".social-button").toggle();
});
});
});
body {
background-color: #334551;
}
.container {
padding-top: 50px;
}
.header_text {
font-family: 'Allura';font-size: 50px;
color: green;
}
.sub_text {
font-family: 'Allura';font-size: 30px;
}
#getMessage {
font-size: 18px;
}
.social-button {
with: 120px;
margin: 10px;
visibility: block;
}
.image {
width: 160px;
height: 180px;
border-radius: 300px;
border-color: green;
border-width: 5px;
border-style: solid;
}
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.text {
color: white;
font-family: 'Verdana';
font-size: 18px;
}
<link href='https://fonts.googleapis.com/css?family=Allura' rel='stylesheet'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<h1 class="col-lg-12 header_text text-primary text-center">Welcome to Daily Quotes!</h1>
<div class="row col-lg-12 text-centered">
<img class="image center" src="http://pctechtips.org/quotes/aristoteles.jpg">
</div>
<div class="row">
<p class="col-lg-12 sub_text text-center text-primary">Press the button for a famous quote!...</p>
</div>
<div class="col-md-3 center">
<button id="getMessage" class="btn btn-primary">Get quote!</button>
</div>
<br>
<div class="col-lg-8 offset-lg-2">
<div id="quote-content" class="row col-lg-12 text center"></div>
<div id="quote-author" class="row col-lg-12 text center"></div>
</div>
<div class="col-xs-6 social-button center">
<a class="btn btn-info btn-block btn-social btn-twitter">
<i class="fa fa-twitter"> Twitter</i>
</a>
<a class="btn-primary btn btn-block btn-social btn-facebook">
<i class="fa fa-facebook"> Facebook</i>
</a>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
-- this is your row with text
</div>
<div class="row">
<div class="col-xs-6">
-- this is half the next row for button 1
</div>
<div class="col-xs-6">
-- this is half the next row for button 2
</div>
</div>
</div>
</div>
this is just basic bootstrap classes
on row will be col-xs-12 that will take up the entire screen for the text
then the next row for the two buttons will be in another row , each of these col-xs-6 that means each one will take up 50% of the width of the screen

iPad and iPhone not scrolling to anchored div

I have tried to get both an iPad and iPhone to work with my current pen and it seems that I can't get it. I have tried to use and SomeContent as well as the normal . The will simply not scroll down to the div. I've tried to cut out the javascript, bootstrap, css, and even cut the page down to rudementary html for awhile but none of the tests seemed to fix it.
Included in the file are Bootstrap.js, Jquery.min.js, Bootstrap.min.css, and font-awesome.min.css
You can find the pen here: Gregory Buhler Portfolio
HTML:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="http://GregoryBuhler.com" target="_blank">Gregory Buhler</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div id="home" class="text-center">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="homecontent">
<h1>Gregory Buhler Website Design</h1>
<h3>Always on the fantastic side of life</h3>
</div>
<!-- End .homecontent -->
</div>
<!-- End .col-lg-12 -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #home -->
<div id="about">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-md-offset-2 text-background">
<h4>A Bit About Me</h4>
<p>When I was a kid my dad pushed for my brother and I to learn computers. I took to it like a fish to water. From 8 onwards my summers were spent indoors working away on simple scripting languages and later on some game modifications.</p>
<p>I won't lie, it wasn't easy getting past my <em>"it needs to be perfect all the time"</em> streak. In fact I still have that streak, I've just learned to fix and perfect as you go instead of making it perfect on the first go-round.</p>
<p>I absolutely love a challenge, critisism of my work used to cause me to clam up a bit. Over time I learned to take the constructive side of critisism and use it to better myself and the content I produce.</p>
<p>None of this would be possible without my amazing wife who puts up with my nose being buried in a book or in code for hours at a time every day. I want to provide the best life I can for her, and I'm good at tech and I love tech, this
is how I plan to provide for her the rest of our lives.</p>
</div>
<!-- End .com-sm-12 .col-md-4 .com-md-offset-2 .text-background -->
<div class="col-md-4 col-md-offset-1 text-center">
<img class="img-circle vertical-align" src="http://i66.tinypic.com/2ywz3w5.jpg" alt="Gregory Buhler in his black cowboy hat.">
</div>
<!-- end .col-md-4 .col-md-offset-1 .text-center -->
</div>
<!-- End .row -->
</div>
<!-- End .container -->
</div>
<!-- End #about -->
<div id="portfolio">
<div class="portfoliocontent text-center">
<div class="container">
<h1>Portfolio</h1>
<div class="row">
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
<div class="col-sm-4 col-md-3">
<div class="imgholder">
<div class="img-rounded inset-shadow">
<img class="img-rounded" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200×150&w=200&h=150">
</div>
<figcaption class="figure-caption">Placeholder</figcaption>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="contact">
<div class="container">
<div class="row">
<div class="contactcontent text-center">
<div class="col-md-12">
<h1>Get ahold of me</h1>
<h3>Open Your Eyes to the Opportunities</h3>
</div>
<hr class="hor-big">
<div class="col-sm-12 col-md-2 col-md-offset-2">
<a href="https://www.facebook.com/GBProgramming" target="_blank" class="btn-inverse"><i class="fa fa-facebook"></i> Facebook
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://twitter.com/gregoryBuhler" target="_blank" class="btn-inverse"><i class="fa fa-twitter"></i> Twitter
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://github.com/Gregory-Buhler" target="_blank" class="btn-inverse"><i class="fa fa-github"></i> Github
</a>
</div>
<div class="col-sm-12 col-md-2">
<a href="https://www.linkedin.com/in/gregorybuhler" target="_blank" class="btn-inverse"><i class="fa fa-linkedin"></i> Linkedin
</a>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container text-center">
<p>© Website created by Gregory Buhler</p>
</div>
</footer>
</body>
CSS:
#about {
background: url(http://i63.tinypic.com/213ht14.jpg) 50% 0 no-repeat fixed;
background-size: cover;
padding-top: 10%;
padding-bottom: 10%;
font-size: 1.1em;
}
#about .text-background {
background: rgba(255, 255, 255, .3);
font-family: droid-serif;
color: rgb(30, 30, 30);
padding: 10px;
border-radius: 10px;
}
#about img {
padding: 20px;
}
#about,
#contact,
#home,
#portfolio {
overflow: hidden;
min-height: 900px;
}
a.btn-inverse {
position: relative;
display: inline-block;
margin-top: 10px;
width: auto;
transition: all .2s ease-in-out;
background-color: rgb(90, 90, 90);
border: rgb(60, 60, 60) 1px solid;
padding: 10px 15px;
border-radius: 5px;
color: white;
}
a.btn-inverse:hover {
background-color: rgb(0, 0, 0);
transform: scale(1.1);
text-decoration: none;
}
body {
padding-top: 50px;
}
#contact {
background: url(http://i63.tinypic.com/2rp9tau.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.contactcontent {
padding-top: 25%;
padding-bottom: 25%;
}
footer {
padding-top: 10px;
}
h1,
h2,
h3 {
font-family: Cinzel;
text-shadow: 1px 1px 1px #000;
}
h1 {
font-size: 4em;
color: rgb(100, 100, 100);
}
h2 {
font-size: 3em;
}
h3 {
font-size: 2em;
color: rgb(150, 150, 150)
}
h4 {
font-size: 1.7em;
font-weight: 700;
}
#home {
background: url(http://i65.tinypic.com/vht1c2.jpg) 50% 0 no-repeat fixed;
background-size: cover;
}
.homecontent {
padding-top: 25%;
padding-bottom: 20%;
}
.hor-big {
clear: both;
border: 0;
height: 0;
box-shadow: 0 0 10px 1px black;
}
.hor-big:after {
content: "\00a0";
}
.imgholder {
margin: auto;
border-radius: 5px;
border: rgb(20, 20, 20) 1px solid;
background-color: rgb(250, 250, 250);
width: 190px;
height: 180px;
padding-top: 5px;
padding-left: 5px;
}
.imgholder img {
float: left;
}
.inset-shadow {
position: relative;
float: left;
}
.inset-shadow:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
-webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
}
#my-row {
display: table;
}
#my-row .content {
float: none;
display: table-cell;
vertical-align: middle;
}
.navbar {
margin-bottom: 0;
position: fixed;
}
.nav li:hover {
background-color: rgb(28, 28, 28);
}
#portfolio {
background: url(http://i67.tinypic.com/287nl8z.jpg) 50% 0 repeat fixed;
background-size: cover;
}
.portfoliocontent {
padding-top: 10%;
padding-bottom: 10%;
}
.portfoliocontent .row > div {
transform: all .4s ease-in-out;
margin-top: 10px;
}
JS:
$("nav ul li a[href^='#']").on('click', function(e) {
e.preventDefault();
// animate the scroll
y = $(this.hash).offset().top - 50;
if ((y - window.pageYOffset) > 0) {
time = y - window.pageYOffset;
} else {
time = window.pageYOffset - y;
}
$('html, body').animate({
scrollTop: y
}, time);
});
Any help would be greatly appreciated! Thank you!

Categories