bootstrap link area smaller on focus and active? - css

I have a thumbnail gallery and each of the <a> elements have an outline around them, when I click on one of the links, the outline is noticeably shorter (only by a pixel or two but enough to be annoying) than the surrounding elements
link to codepen - http://codepen.io/Davez01d/pen/NxMzYy?editors=1100
here's the html -
<div class="row vert-space-30"><!--row-->
<div id="padding-helper"><!--padding-helper-->
<div class="col-sm-3 col-xs-6 port-tile text-center">
<a class="thumbnail" href="http://codepen.io/Davez01d/full/obyBbz/" target="_blank">
<img src="http://i1155.photobucket.com/albums/p558/Davez01d/Portfolio%20site-Codepen/f043ed05-0df8-42b9-a7b3-57ad6cab5f3b_zpsq2074gko.png" alt="Pomodoro thumbnail"/>
<div class="caption">
<h4>Pomodoro Timer</h4>
<p class="tech-used">JavaScript, jQuery, HTML, Css</p>
</div>
</a>
</div>
<div class="col-sm-3 col-xs-6 port-tile text-center">
<a class="thumbnail" href="http://codepen.io/Davez01d/full/JGvdxX/" target="_blank">
<img src="http://i1155.photobucket.com/albums/p558/Davez01d/Portfolio%20site-Codepen/726c239e-157c-4e4d-8931-77f3a4c9de9c_zpslofzlecy.png" alt="Calculator thumbnail"/>
<div class="caption">
<h4>JavaScript Calculator</h4>
<p class="tech-used">JavaScript, jQuery, HTML, Css</p>
</div>
</a>
</div>
<div class="col-sm-3 col-xs-6 port-tile text-center">
<a class="thumbnail" href="http://codepen.io/Davez01d/full/gPegpd/" target="_blank">
<img src="http://i1155.photobucket.com/albums/p558/Davez01d/Portfolio%20site-Codepen/e9b19619-ed3c-4149-ab15-0a039c59f5a7_zps7vmaslo8.png" alt="Quote generator thumbnail"/>
<div class="caption">
<h4>Random Quote Generator</h4>
<p class="tech-used">jQuery, twitter API</p>
</div>
</a>
</div>
<div class="col-sm-3 col-xs-6 port-tile text-center">
<a class="thumbnail" href="http://codepen.io/Davez01d/full/KVQzwr/" target="_blank">
<img src="http://i1155.photobucket.com/albums/p558/Davez01d/Portfolio%20site-Codepen/cc4d40ed-a085-43d6-9dde-90c59161b023_zps0ppintnt.png" alt="Web sketchpad thumbnail"/>
<div class="caption">
<h4>Web Sketchpad</h4>
<p class="tech-used">jQuery, HTML, CSS</p>
</div>
</a>
</div>
</div><!--padding-helper-->
</div><!--row-->
and the css-
.port-tile a {
z-index: 0;
position: relative;
border-radius: 0;
border: none;
padding: 0;
outline: 3px solid #d63c20;
transition: all .12s ease;
}
.port-tile a:hover {
z-index: 10;
outline: 3px solid #d63c20;
transform: scale(1.12, 1.12);
}
.port-tile a:active, a:focus {
outline: 3px solid #d63c20;
}
Also side-note, I'm finding it hard to find a list of all the bootstrap effects on links, buttons, etc, is there a good resource for this? it would help me out a lot.

It's the a:focus { outline-offset: -2px; } that I believe you're referring to, which causes this:
You could override that with your own style, just set
a:focus {
outline-offset: 0;
}
if you don't have a need for this rule at all. Or, target the specific elements where you wish to remove it.

Related

Using Bootstrap Grid, Why Can I Not Space Out My Divs?

I'm working on my first web dev portfolio and am trying to incorporate the Bootstrap Grid system to the project links. I've searched through Bootstrap's documentation (v4.5), Stack Overflow, and just googling various searches to death. I've tried every solution I've found and am still getting nowhere. The closest I've come to a result is changing all three col-lg-4 to col-lg33. That did create the space, but then the padding looked super weird and it was more space than I needed. Any help would be super appreciated. I'm a but of a noob still.
<section id="projects">
<h2>My Work</h2>
<div class="container">
<div class="row justify-content-around">
<div class="col-lg-4 col-md-6 projects-grid">
<a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
<img class="project-image" src="Images/TechnicalDoc.png" alt="project"/>
<p class="project-title">CSS Technical Document</p>
</a>
</div>
<div class="col-lg-4 col-md-6 projects-grid">
<a href="https://briafly27.github.io/Javascript30DrumKit/" target="_blank">
<img class="project-image" src="Images/JavascriptDrumkit.png" alt="project"/>
<p class="project-title">Javascript Drumkit</p>
</a>
</div>
<div class="col-lg-4 col-md-6 projects-grid">
<a href="https://briafly27.github.io/FirstPersonalSite/" target="_blank">
<img class="project-image" src="Images/FirstPersonalSite.png" alt="project"/>
<p class="project-title">First Personal Site</p>
</a>
</div>
</div>
</div>
</section>
#projects {
background: #3F3F44;
color: #f7f7f7;
font-family: 'Raleway', sans-serif;
height: 100vh;
}
#projects h2 {
text-shadow: 1px 1px #fdcb9e;
text-align: center;
padding: 60px;
}
.projects-grid {
background-color: #fdcb9e;
box-shadow: 5px 8px black;
border-radius: 10px;
padding: 1% 0;
}
.projects-grid:hover {
background-color: #cceabb;
box-shadow: 7px 10px black;
}
.projects-grid a {
text-decoration: none;
color: #3f3f44;
text-shadow: 1px 1px #cceabb;
}
.project-image {
height: 100%;
max-height: 170px;
width: 100%;
max-width: 300px;
border-radius: 10px;
border: 2px solid #cceabb;
display: flex;
margin: 0 auto;
}
.project-image:hover {
border: 2px solid #fdcb9e;
}
.project-title {
font-size: 1.5rem;
font-weight: 700;
padding-top: 8px;
padding-bottom: 4px;
margin: 0;
text-align: center;
}
Bootstrap is adding the column guttering as a 15px padding, by styling the layout there, you are also styling the padding that is the guttering, hence the project grid 'cards' are touching.
For this, to keep the guttering and to ensure nice even columns, I would style a nested div instead.
<div class="col-md-4">
<div class="projects-grid">
<a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
<img class="project-image" src="Images/TechnicalDoc.png" alt="project" />
<p class="project-title">CSS Technical Document</p>
</a>
</div>
</div>
If the guttering is too large, you can change the sass variable (it's set to 30px by default) or you can use .no-gutters to remove all the guttering and add the padding manually to the nested divs.
<div class="row no-gutters">
<div class="col-md-4 p-2">
<div class="projects-grid">
<a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
<img class="project-image" src="Images/TechnicalDoc.png" alt="project" />
<p class="project-title">CSS Technical Document</p>
</a>
</div>
</div>
</div>
I've created this link on Codepen to try understanding better the problem so that we can help you better:
https://codepen.io/maricaldas/pen/ExPKNzM
<section id="projects">
<h2>My Work</h2>
<div class="container">
<div class="row justify-content-around">
<div class="col-lg-3 col-md-6 projects-grid">
<a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
<img class="project-image" src="Images/TechnicalDoc.png" alt="project" />
<p class="project-title">CSS Technical Document</p>
</a>
</div>
<div class="col-lg-3 col-md-6 projects-grid">
<a href="https://briafly27.github.io/Javascript30DrumKit/" target="_blank">
<img class="project-image" src="Images/JavascriptDrumkit.png" alt="project" />
<p class="project-title">Javascript Drumkit</p>
</a>
</div>
<div class="col-lg-3 col-md-6 projects-grid">
<a href="https://briafly27.github.io/FirstPersonalSite/" target="_blank">
<img class="project-image" src="Images/FirstPersonalSite.png" alt="project" />
<p class="project-title">First Personal Site</p>
</a>
</div>
</div>
</div>
</section>
Do you mean you want a space separating the project-grid columns?
If so, the first thing we need to consider is that when we use 3 columns taking 4 spaces each, we're using the full grid, which is 12, and that's why we can't see spaces around those col-lg-4 columns.
Can you please elaborate a little bit more on the result you want to achieve?
Maybe a way to add that space among the columns while using col-lg-4 is to overwrite the bootstrap pre-set width, which is 33.33%.
#media (min-width: 992px) {
.col-lg-4 {
-ms-flex: 0 0 32%;
flex: 0 0 32%;
max-width: 32%;
}
}

Scroll for background is not working

I am implementing a chat module like linked-in or facebook. User List is one parent component (col-md-12) and after each user click, I am creating a new child component (col-md-3 each). Everything is working fine but the scroll option on (col-md-12) is not working. The position of parent and child component is fixed hence the background scroll is only working if I scroll outside col-md-12 class area.
<div class="row" >
<div class="content">
<div class="row">
<div class="col-md-12" id="ng-chat-view">
<div class="col-md-3 chat-farmer-list-ui">
<div id="ng-chat-people" [ngClass]="{'ng-chat-people-collapsed':isCollapsed}">
<a href="javascript:void(0);" class="ng-chat-title shadowed" matTooltip={{farmerListTooltip}} (click)="onChatTitleClicked($event)">
<span>
Farmer List
</span>
</a>
<input *ngIf="!isCollapsed" id="ng-chat-search_friend" type="search" placeholder="Search" [(ngModel)]="search" (ngModelChange)="getFarmerBySearchVal(search)"
/>
<ul id="ng-chat-users" *ngIf="!isCollapsed">
<li *ngFor="let user of farmers">
<div *ngIf="!user.imageUrl" class="icon-wrapper">
<i class="user-icon"></i>
</div>
<img *ngIf="user.imageUrl" alt="" class="avatar" height="30" width="30" src="{{user.imageUrl}}"/>
<strong title="{{user.user}}" (click)="openChatWindow(user, true)">{{user.name}}</strong>
</li>
</ul>
</div>
</div>
<div class="col-md-9 m-l">
<div *ngFor="let user of userInfo; let i = index">
<div>
<app-chatwindow [userInfo]="user" (onWindowCloseNotify)="onWindowCloseInChildComponent($event)"></app-chatwindow>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
#ng-chat-view{
position: fixed;
bottom: 0%;
margin-right: 10px;
font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
font-size: 15px;
z-index:999;
cursor: pointer;
}
.row .m-l{
margin-left: -92px;
float: left;
}
#media (min-width: 992px){
.chat-farmer-list-ui {
float: right;
}
}

Removing that annoying white background from thumbnails in Bootstrap 3

I have created small piece of code where it shows 4 thumbnails in a row of equal grid width.
.row-content-3 {
background-color: rgba(0,0,0,0.8) !important;
color: #fff;
margin:0px auto;
padding: 50px 0px 50px 0px;
min-height:200px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-content-3">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="#">
<img src="http://www.theo-android.co.uk/github-images/fair1.png" class="img-circle" alt="Larissa's fair">
</a>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="#">
<img src="http://www.theo-android.co.uk/github-images/fair2.png" class="img-circle" alt="Larissa's fair">
</a>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="#">
<img src="http://www.theo-android.co.uk/github-images/fair3.png" class="img-circle" alt="Larissa's fair">
</a>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="#">
<img src="http://www.theo-android.co.uk/github-images/fair4.png" class="img-circle" alt="Larissa's fair">
</a>
</div>
</div>
</div>
If you run the code,you will notice that there is a white background which needs to be removed. I put this css simple code,but it didn't work:(.
.thumbnail {
border: 0;
}
Also I am giving you the jsfiddle.
Any ideas,
Thanks Theo.
If i am not wrong then you wanted to remove the white background from the circle image back only.
I Added this
.thumbnail {
border: 0;
background: transparent;
}
And you can see there is box shadow too. You can remove that by using
box-shadow: none;
Updated fiddle: https://jsfiddle.net/udgw71no/6/
Give background color as transparent for thumbnail class
.thumbnail {
border: 0;
background-color:transparent;
}
Updated fiddle : https://jsfiddle.net/affaz/udgw71no/8/
Looking for this ?
.thumbnail {
border: 0;
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
Demo
remove background of thumbnail but to make it working.
.row-content-3 {
background-color: rgba(0,0,0,0.8) !important;
color: #fff;
margin:0px auto;
padding: 50px 0px 50px 0px;
min-height:200px;
}
.thumbnail {
background: none !important;
border: 0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-content-3">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="#">
<img src="http://www.theo-android.co.uk/github-images/fair1.png" class="img-circle" alt="Larissa's fair">
</a>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="#">
<img src="http://www.theo-android.co.uk/github-images/fair2.png" class="img-circle" alt="Larissa's fair">
</a>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="#">
<img src="http://www.theo-android.co.uk/github-images/fair3.png" class="img-circle" alt="Larissa's fair">
</a>
</div>
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="#">
<img src="http://www.theo-android.co.uk/github-images/fair4.png" class="img-circle" alt="Larissa's fair">
</a>
</div>
</div>
</div>
Setting the following styles should do it:
.thumbnail {
background-color: transparent;
border: none;
}

Remove border-right on :last-child psuedo-class

This is driving me nuts. I'm probably overlooking something super simple since I normally don't have issues with something like a psuedo-class.
I'm trying to remove the right border on a div element for the last-child. I can have it work with a class on the last element, but I don't need to do it that way (since the content will be in an ee loop).
Here is the code. Everything is wrapped in a section with an id of #small-featured. All the content that is nested in bootstrap columns is wrapped in a #featured-wrapper.
<section id="small-featured">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="featured-wrapper">
<img src="assets/img/36-6022.png" alt="">
<p>The Product Title</p>
</div>
</div>
<div class="col-md-3">
<div class="featured-wrapper">
<img src="assets/img/36-5100.jpg" alt="">
<p>The Product Title</p>
</div>
</div>
<div class="col-md-3">
<div class="featured-wrapper">
<img src="assets/img/46-455.jpg" alt="">
<p>The Product Title</p>
</div>
</div>
<div class="col-md-3">
<div class="featured-wrapper">
<img src="assets/img/unisaw.jpg" alt="">
<p>The Product Title</p>
</div>
</div>
</div>
</div>
</section>
Here is CSS
#small-featured {
text-align: center;
}
#small-featured img {
width: 250px;
padding: 0 15px;
}
.featured-wrapper {
border-right: 1px solid #eee;
}
#small-featured .featured-wrapper:last-child {
border-right: none;
}
All the borders disappear when I add my last bit of CSS. I've tried targeting just .featured-wrapper:last-child as well.
Any ideas?
#small-featured .col-md-3:last-child .featured-wrapper {
border-right: none;
}
(All .featured-wrapper are :last-child.) ¯\_(ツ)_/¯

create 3 responsive box with background color and Image [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Hi guys I am using Bootstrap and trying to build 3 grey color boxes with background image at the top and a text at below and button. but I am unable to do this I need your help to make it successful This is what I am trying to achieve
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/img1.jpeg">
</div>
<div class="media-body">
<h3 class="media-heading">Text 1</h3>
<p>CHeck out Button</p>
</div>
</div>
</div>
You can do this with Bootstrap Custom Content as a base instead of the Media object you're currently using. Then just apply the styling you want.
*Note this is based of a specific image size so these rules will need to be adjusted based on the actual image size you end up using.
See working Example Snippet.
.thumbnail.checkout-thumbnail {
background: #eee;
border: none;
max-width: 370px;
margin: 5px auto;
}
.caption.checkout-caption {
margin-top: 20px;
}
.btn.btn-checkout {
border-radius: 0;
border: none;
background: none;
margin-top: 30px;
}
.btn.btn-orange {
border: 2px solid orange;
}
.btn.btn-teal {
border: 2px solid teal;
}
.btn.btn-red {
border: 2px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail checkout-thumbnail">
<img src="http://placehold.it/350x200" alt="...">
<div class="caption checkout-caption">
<h3>House and Land Packages</h3>
<p>Check out Button
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail checkout-thumbnail">
<img src="http://placehold.it/350x200" alt="...">
<div class="caption checkout-caption">
<h3>House and Land Packages</h3>
<p>Check out Button
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail checkout-thumbnail">
<img src="http://placehold.it/350x200" alt="...">
<div class="caption checkout-caption">
<h3>House and Land Packages</h3>
<p>Check out Button
</p>
</div>
</div>
</div>
</div>
</div>

Resources