This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 6 years ago.
I'm currently designing a webpage using Bootstrap and I have two <a> buttons laid inline with each other inside of the <div class="jumbotron"></div>
Here's the HTML code:
<div class="jumbotron hub-jumbo">
<div class="hub-header">
<div class="container">
<h2 class="txt-white">Jason's Summer Vacation</h2>
<p class="txt-white">There doesn't seem to be a description here!</p>
</div>
</div>
<div class="hub-btns">
<a class="copy-link btn btn-lg btn-wide bg-white" href="" role="button">Copy Link</a>
<a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-blue ripple" href="" role="button">Create Drop</a>
</div>
</div>
And here's the CSS of the div wrapping the buttons and the buttons themselves:
.hub-btns {
display: inline-block;
margin: auto;
}
.hub-btns .copy-link {
border-bottom-color: #EBEBEB;
}
.hub-btns .create-drop:hover {
background-color: #03a9f4;
}
.hub-btns .create-drop:focus {
background-color: #03a9f4;
border-bottom-color: #0398db;
}
.hub-btns a {
margin: 0 10px;
}
I'm still not great with CSS so I'm probably missing something obvious here. But, I simply want to take the div that is wrapping the two buttons and center that div within the jumbotron div.
Any help is greatly appreciated!
I made some changes in a class name (removed spaces) and put some borders for your better understanding of the div placing. Here is the code:
<html>
<head>
<style>
.jumbotron-hub-jumbo {
margin: 0 auto;
border:2px solid black;
width:300px;
}
.hub-btns {
margin: 0 auto;
width:200px;
border:2px solid green;
}
.hub-btns .copy-link {
border-bottom-color: #EBEBEB;
}
.hub-btns .create-drop:hover {
background-color: #03a9f4;
}
.hub-btns .create-drop:focus {
background-color: #03a9f4;
border-bottom-color: #0398db;
}
.hub-btns a {
width:200px;
border: 2px solid red;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="jumbotron-hub-jumbo">
<div class="hub-header">
<div class="container">
<h2 class="txt-white">Jason's Summer Vacation</h2>
<p class="txt-white">There doesn't seem to be a description here!</p>
</div>
</div>
<div class="hub-btns">
<a class="copy-link btn btn-lg btn-wide bg-white" href="" role="button">Copy Link</a>
<a class="create-drop btn btn-primary btn-lg btn-wide txt-white bg-blue border-blue ripple" href="" role="button">Create Drop</a>
</div>
</div>
</body>
</html>
In the HTML I just changed class jumbotron hub-jumbo
I saw you said you are new to CSS, don't be afraid seeing HTML and CSS merged together. Just cut style part and paste it into your style.css.
It's a bit tricky to help without seeing what you're trying to do.
Adding text-align: center; inside the .hub-btns should be enough to center align those buttons.
Also, I would probably move the margin: 0 10px; to .hub-btnsinstead of applying it the anchors/buttons directly.
Lastly, if you don't need to support old browsers, try to invest some time learning the basics of flexbox. It makes our life a lot easier when it comes to 'aligning things'.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have created a simple HTML button, the button works fine. There is some blank/white space around it. How can I get rid of it? My question might sound silly, but for a beginner like me, I have no idea how to get rid of it.
Thank you.
You can see the white spaces, which I was talking about, in the following screenshot.
Following is the code I have for buttons.
<p>
<a class="button" href="https://facebook.com/">
<button style="background-color:#3b5998; border:none; color:white; border-radius: 3px;">Facebook</button> </a>
<a class="button" href="https://wa.me/1234567898">
<button style="background-color:green; border:none; color:white; border-radius: 3px;">WhatsApp</button>
</a>
</p>
<p>
<a href="tel:01234567890">
<input type="image" align="right" src="https://toppng.com/uploads/preview/hone-icon-866-986-8942-book-online-phone-icon-png-blue-115633551488jsnijarwa.png" name="submit" width="70" height="70" alt="Call Us" value="">
</a>
</p>
I tested your code in opera, it's working as expected here.
https://i.imgur.com/HAl4Xka.png
EDIT: I've fixed the code following the suggestions made in your first post.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.fb-button, .wa-button {
border:none;
color:white;
border-radius: 3px;
padding: 10px;
text-decoration: none;
}
.fb-button {
background-color:#3b5998;
}
.wa-button {
background-color:green;
}
.container {
padding: 10px;
margin: 0 auto;
max-width: 50%;
text-align: center;
}
form {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<a class="fb-button" href="https://facebook.com/">Facebook</a>
<a class="wa-button" href="https://wa.me/1234567898">WhatsApp</a>
<form action="tel:01234567890" method="GET">
<input type="image" src="https://toppng.com/uploads/preview/hone-icon-866-986-8942-book-online-phone-icon-png-blue-115633551488jsnijarwa.png" width="70" height="70" alt="Call Us">
</form>
</div>
</body>
</html>
<a> should not contain any other Action Elements (like <button>).
Stop using the inline style attributes. Use a proper CSS file or a <style> tag.
Don't use , use styles instead - if you want to add spacings like margins
Use flex to ease the positioning of your elements
.buttons-group {
display: flex;
align-items: center;
}
.button {
color: white;
border-radius: 3px;
padding: 0.5rem 1rem;
text-decoration: none;
}
.color-fb {
background-color: #3b5998;
}
.color-wa {
background-color: #00aa45;
}
.img-icon {
display: inline-block;
height: 3rem;
}
/* Utility classes */
.u-left-auto {
margin-left: auto;
}
<div class="buttons-group">
<a class="button color-fb" href="https://facebook.com/">Facebook</a>
<a class="button color-wa" href="https://wa.me/1234567898">WhatsApp</a>
<a class="button u-left-auto" href="tel:01234567890">
<img class="img-icon" src="https://toppng.com/uploads/preview/hone-icon-866-986-8942-book-online-phone-icon-png-blue-115633551488jsnijarwa.png" alt="Call Us">
</a>
</div>
This question already has answers here:
How can I style even and odd elements?
(9 answers)
Closed 3 years ago.
I want to style my accordion with border-top and border-bottom for even number of rows Ex: 2, 4 ,6 etc.
I tried with :nth-child but it is not reflecting my parent div but it is reflecting my child element.
code
<div className="accordion" id="adsdfsdf">
<div className="accordionitem">
<div className="accordion-card">
<div className="accordion-card-header" id="aada">
<h3 className="mb-0 w-100">
<a
className="collapsed"
role="button"
>
<span className="icon-left">
<i className=" a-minus" />
<i className="a-plus" />
</span>
</a>
</h3>
</div>
</div>
</div>
<div className="accordion" id="adsdfsdf">
<div className="accordionitem">
<div className="accordion-card">
<div className="accordion-card-header" id="aada">
<h3 className="mb-0 w-100">
<a
className="collapsed"
role="button"
>
<span className="icon-left">
<i className=" a-minus" />
<i className="a-plus" />
</span>
</a>
</h3>
</div>
</div>
</div>
css
.accordion-card-header {
boder-top: 1px solid red;
border-bottom: 1px solid red;
}
You are almost there. you need to use :nth-child(even) to style even rows and :nth-child(odd) to style odd rows. For the further reference you can go through nth-child() Selector
Here is a small demo
div:nth-child(odd) {
height: 100px;
width: 100px;
background: yellow;
margin: 20px auto;
}
div:nth-child(even) {
height: 100px;
width: 100px;
background: green;
border-top: 5px solid black;
border-bottom: 5px solid red;
margin: 20px auto;
}
<div>odd</div>
<div>even</div>
<div>odd</div>
<div>even</div>
Trying to change the color of an icon within a Bootstrap button. Nothing I've tried has made it turn black, which is what I want it to be. Even after using the "Inspect Element" tool in Chrome and copying the CSS selector verbatim to specifically target the icon hasn't worked. Code is below. This is for a bootcamp course on Udemy and the icon is from Font Awesome.
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1>Purrfect Match</h1>
<h3>The Only Human/Feline Dating App</h3>
<hr>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i>Get Started!</button>
</div>
</div>
</div>
</div>
html {
height: 100%;
}
* {
font-family: 'Rubik';
color: white;
}
body {
background: url(https://source.unsplash.com/gI_1GPoKGRs);
background-size: cover;
background-position: center;
}
#content {
text-align: center;
padding-top: 25%;
}
div h1 {
font-weight: 700;
font-size: 5em;
}
hr {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,.2);
}
Expected results are for the icon to be black as default (which is shown in the tutorial video). The icon actually shows up white, and trying to change the color to black through CSS hasn't worked so far.
Here is a small example :)
jQuery(".btn-example").click(function(){
jQuery(".btn-example").toggleClass('active');
});
.btn-example.active {
background-color: skyblue;
}
.btn-example.active i{
color: purple;
}
.btn-example.focus, .btn-example:focus {
outline: none !important;
box-shadow: initial !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<hr>
<button class="btn-example btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started!</button>
</div>
</div>
</div>
</div>
Now that I've seen your css.
* { color: white; } is causing the problem. you might want to reconsider setting this;
but to fix your problem .fa-paw { color: black !important; } should do it
* { color: white; }
.fa-paw { color: black !important; }
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div id="content">
<h1>Purrfect Match</h1>
<h3>The Only Human/Feline Dating App</h3>
<hr>
<button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started!</button>
</div>
</div>
</div>
</div>
So I uploaded a question that's the same as this one, however, that got very overcrowded so I am putting up the question again in hopes of explaining my problem a bit better.
I am currently making my own website using HTML, CSS, and JavaScript with bootstrap alongside. While trying to make the site mobile friendly, I have noticed an error with how 3 of the buttons are being displayed on the screen. Basically, what I want to happen is for the three buttons to be stacked on top of each other with a gap in between each one when the web page is viewed on mobile. However, the buttons aren't displaying correctly. See the first image.
One thing that I will say, though, is that I am using the feature (not sure if it's only in Google Chrome) that when you click inspect element, you can select an option that allows you to view what the web page will look like on a mobile screen. What I'm getting at, is that I don't know if it's the code that's wrong or if Google Chrome's feature doesn't work that well.
If you do have any suggestions for applications I could use to view the HTML file on a mobile device, please let me know.
PLEASE NOTE. I HAVE ONLY GIVEN THE CODE FOR ONE OF THE BUTTONS AS THE OTHER TWO ARE BASICALLY THE SAME
#media (max-width: 767px){
.btn-block-xs {
display: block;
width: 100%;
margin-bottom: 10px;
}
}
#cheapestOption {
font-family: 'Pavanam', sans-serif;
background-color: rgba(255,255,255,0.3);
border: none;
}
#cheapestOption a {
text-decoration: none;
color: white;
}
#cheapestOption p {
font-family: 'Pavanam', sans-serif;
font-size: 50px;
}
#cheapestOption ul{
text-align: left;
font-size: 17px;
}
#cheapestOption:hover {
background-color: rgba(255, 255, 255, 0.6);
text-decoration: none;
}
<div class="container-fluid" id="grad"> <!-- Pricing Buttons -->
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<button type="button" id="cheapestOption" class="btn btn-block-xs" aria-label="center Align">
<a href="pricing.html" target="_blank">
<h4>Text</h4>
<p><strong>£££</strong><span>/ £5 a month</span></p>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</a>
</button>
</div>
(First picture shows what it looks like on mobile) (this is what needs fixing)
(Second picture shows what it looks like on desktop) (this is fine)
You html and css are not really following the bootstrap documentation. I suggest you read more on how bootstrap works. You can simplify a lot of what you are doing and probably make things look a lot better too.
I would suggest create a button which is a link and move the text out of it. To answer your question exactly please see this jsfiddle.
I moved your html to be in the correct col class Let me know if you have anymore questions,
html
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4"><button type="button" id="cheapestOption" class="btn btn-block-xs" aria-label="center Align">
<a href="pricing.html" target="_blank">
<h4>Text</h4>
<p><strong>£££</strong><span>/ £££ a month</span></p>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</a>
</button></div>
<div class="col-md-4 col-sm-4 col-xs-4"> <button type="button" id="averageOption" class="btn btn-block-xs" aria-label="center Align">
<a href="pricing.html" target="_blank">
<h4>Text</h4>
<p><strong>£££</strong><span>/ £££ a month</span></p>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</a>
</button></div>
<div class="col-md-4 col-sm-4 col-xs-4"> <button type="button" id="expensiveOption" class="btn btn-block-xs" aria-label="center Align" disabled>
<h4>Text</h4>
<p><strong>£££</strong><span>/ £££ a month</span></p>
<p id="tempBottom"><strong>Coming Soon</strong></p>
</button></div>
</div>
</div>
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
#cheapestOption {
font-family: 'Pavanam', sans-serif;
background-color: red;
border: none;
}
#cheapestOption a {
text-decoration: none;
color: white;
}
#cheapestOption p {
font-family: 'Pavanam', sans-serif;
font-size: 1em;
}
#cheapestOption ul {
text-align: left;
font-size: 17px;
}
#cheapestOption:hover {
background-color: rgba(255, 255, 255, 0.6);
text-decoration: none;
}
#averageOption {
font-family: 'Pavanam', sans-serif;
width: 100%;
background-color: red;
border: none;
color: white;
}
#averageOption a {
text-decoration: none;
color: white;
}
#averageOption p {
font-family: 'Pavanam', sans-serif;
font-size: 1em;
}
#averageOption ul {
text-align: left;
font-size: 17px;
}
#averageOption:hover {
background-color: rgba(255, 255, 255, 0.6);
}
#expensiveOption {
font-family: 'Pavanam', sans-serif;
width: 100%;
background-color: red;
border: none;
color: white;
}
#expensiveOption a {
text-decoration: none;
color: white;
}
#expensiveOption p {
font-family: 'Pavanam', sans-serif;
font-size: 1em;
}
#expensiveOption ul {
text-align: left;
font-size: 1em;
}
To simplify this for you here are a few things to remember,
Bootstrap is built for mobile first.
Each row consist of 12 pieces, so when you tell it col-md-4 you are saying that when the browser is the width of col-md you want that space to take up 1/3 of the width of the row.
You can target each browser size by default css built into bootstrap using col-xs col-sm -col-md etc... To see the default size of each col-size check the documentation or inspect element and check the class in the DOM.
Bootstrap Grid System
If you want the col-size to stack at certain screen widths this is what you can do.
If when the screen is sm you want them to stack you could do,
<div class="row">
<div class="col-sm-12">
<p>My text here will be on this row alone.</p>
</div>
<div class="col-sm-12">
<p>My text here will be on this row alone.</p>
</div>
<div class="col-sm-12">
<p>My text here will be on this row alone.</p>
</div>
</div> <!-- end of row -->
This will stack on sm size because when the screen is the width of the sm size it will take up 12 which is the whole space. So that media query will fire off and the col will now take up the whole row.
Remeber you can stack each class as well. So if you want to make sure each col stack starting with md you could do this,
<div class="col-xs-12 col-sm-12 col-md-12 ">
Now when the browser is at each of those class target widths whatever html is in that div will take up the whole row.
I have CSS that changes formatting when you hover over an element.
.test:hover { border: 1px solid red; }
<div class="test">blah</div>
In some cases, I don't want to apply CSS on hover. One way would be to just remove the CSS class from the div using jQuery, but that would break other things since I am also using that class to format its child elements.
Is there a way to remove 'hover' css styling from an element?
One method to do this is to add:
pointer-events: none;
to the element, you want to disable hover on.
(Note: this also disables javascript events on that element too, click events will actually fall through to the element behind ).
Browser Support ( 98.12% as of Jan 1, 2021 )
This seems to be much cleaner
/**
* This allows you to disable hover events for any elements
*/
.disabled {
pointer-events: none; /* <----------- */
opacity: 0.2;
}
.button {
border-radius: 30px;
padding: 10px 15px;
border: 2px solid #000;
color: #FFF;
background: #2D2D2D;
text-shadow: 1px 1px 0px #000;
cursor: pointer;
display: inline-block;
margin: 10px;
}
.button-red:hover {
background: red;
}
.button-green:hover {
background:green;
}
<div class="button button-red">I'm a red button hover over me</div>
<br />
<div class="button button-green">I'm a green button hover over me</div>
<br />
<div class="button button-red disabled">I'm a disabled red button</div>
<br />
<div class="button button-green disabled">I'm a disabled green button</div>
Use the :not pseudo-class to exclude the classes you don't want the hover to apply to:
FIDDLE
<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test nohover"> blah </div>
.test:not(.nohover):hover {
border: 1px solid red;
}
This does what you want in one css rule!
I would use two classes. Keep your test class and add a second class called testhover which you only add to those you want to hover - alongside the test class. This isn't directly what you asked but without more context it feels like the best solution and is possibly the cleanest and simplest way of doing it.
Example:
.test { border: 0px; }
.testhover:hover { border: 1px solid red; }
<div class="test"> blah </div>
<div class="test"> blah </div>
<div class="test testhover"> blah </div>
add a new .css class:
#test.nohover:hover { border: 0 }
and
<div id="test" class="nohover">blah</div>
The more "specific" css rule wins, so this border:0 version will override the generic one specified elsewhere.
I also had this problem, my solution was to have an element above the element i dont want a hover effect on:
.no-hover {
position: relative;
opacity: 0.65 !important;
display: inline-block;
}
.no-hover::before {
content: '';
background-color: transparent;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 60;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary">hover</button>
<span class="no-hover">
<button class="btn btn-primary ">no hover</button>
</span>
You want to keep the selector, so adding/removing it won't work. Instead of writing a hard and fast CSS selectors (or two), perhaps you can just use the original selector to apply new CSS rule to that element based on some criterion:
$(".test").hover(
if(some evaluation) {
$(this).css('border':0);
}
);