I'm trying to have a paragraph tag in between two buttons with spacing. The small issue is the weird symbol when I add the " " command. I just need to take it out, or I'd like to know if there is an alternate way in adding space.
HTML:
<div class="col-md-12 text-align-center">
<button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
<span class="color-gray small"> or </span>
<button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
<p>to claim this coupon</p>
</div>
Suggest you to use padding (left & right) instead of space( ). Check out the preview at https://jsfiddle.net/jwe8h49z/9/
I don't see any grey marks with just your code and boostrap in this codepen. Seems like something else is going on?
Also, as #Erik Philips suggested, a better way would be to use margins.
Here's an example:
<div class="col-md-12 text-align-center" >
<button type="submit" href="../cards" class="fb_btn registerbtn" style="margin-right: 10px;">LOGIN</button>
<span class="color-gray small">or</span>
<button type="submit" href="cards/register.php" class="fb_btn registerbtn" style="margin-left: 10px;">REGISTER</button>
<p>to claim this coupon</p>
</div>
.fb_btn{
padding:5px;
margin-right:5px;
margin-left:5px;
}
<div class="col-md-12 text-align-center">
<button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
<span class="color-gray small">or</span>
<button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
<p>to claim this coupon</p>
</div>
Use CSS to add spaces between controls.
This code will work for you --
button{background:#f2901a; color:#fff; border:0; padding:15px; width:120px;}
.color-gray{padding:0 20px; position:relative; }
.color-gray::before{content:'---'; position:absolute; left:0px; top:0px;}
.color-gray::after{content:'---'; position:absolute; right:0px; top:0px;}
.text-align-center{text-align:center;}
<div class="col-md-12 text-align-center">
<button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
<span class="color-gray small">or</span>
<button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
<p>to claim this coupon</p>
</div>
Apply CSS Box Modeling and apply margin or padding instead of using  
<style>
button{
margin: 10px;
}
</style>
<div class="col-md-12 text-align-center">
<button type="submit" href="../cards" class="fb_btn registerbtn">LOGIN</button>
<span class="color-gray small">or</span>
<button type="submit" href="cards/register.php" class="fb_btn registerbtn">REGISTER</button>
<p>to claim this coupon</p>
</div>
Related
Please Look at the Snippet Image below
I created a div that has position:fixed; and noticed a white space on left side that is taking by position 15, I am seeing it for the first time.How to fix it.
How to change the positionto 0.
<div class="nav-color" style="position:fixed; z-index: 5; bottom: 0; padding: 10px; background-color: blue; " class="col-md-12">
<input type="text" class="form-control col-md-6" placeholder="Type Here" style="margin-right: 10px;" />
<span class="input-group-btn col-md-6">
<button class="btn btn-default " type="button" style=" margin-left: 10px;margin-right: 10px;">Add</button>
<button class="btn btn-warning " style="color: white;">Logout</button>
</span>
</div>
As i noticed that just by making bottom:0; the whole element is sticking to bottom, I added left:0; and It corrected the position to left.
Provide value according to which side the gap is.
left:0;right:0;
Here is our desperate try to make the buttons work. The BUTTON worked before i added the other one. please help. We also had difficulties with making the buttons look different but that is fixed now. (Its just telling me to text some more so thats the reason im writing this. this aint important. How are you doing today?)
.Button {
background-color: darkcyan;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: hacked;
}
.sub {
position: relative;
}
.itmHolder {
position: relative;
}
.itmHolder:nth-child(2),
.itmHolder:nth-child(3) {
position: absolute;
top: 0;
}
.og {
margin-top: 50px;
position: center;
text-align: center;
}
<title>Our Future</title>
</head>
<!--Baggrunds farve-->
<body bgcolor="#212f3c">
<!--Hovedskriften-->
<font size=40><center><h1 style="font-family:blowbrush;">Future</font></center></h1><form action="side2.html">
<div class="og">
<div class="itmHolder">
<div class="sub">
<button type="button" class="Button">About us<form action="side2.html"></button>
<button type="button" class="Button">Buy now<form action="buynow.html"></button>
</div>
</div>
<br></br>
</body>
</html>
<picture>
<!--Billede-->
<br></br>
<br></br>
<center><img src="CSfU23PXAAEA8et.jpg" alt="Matrix" style="width:auto;" border="5"><center/>
<br></br>
<br></br>
<!--Youtube video-->
<center><iframe width="700" height="400"src="https://www.youtube.com/embed/XGSy3_Czz8k?playlist=XGSy3_Czz8k&loop=1"></center></iframe>
</picture>
You havnt closed your form tag and you have it in the wrong place. Adjust your code:
<div class="sub">
<form action="side2.html" method="POST">
<input type="submit" class="Button" value="About us">
</form>
<form action="buynow.html" method="POST">
<input type="submit" class="Button" value="Buy now">
</form>
</div>
OR If you prefer not to use forms, use the <a> tag:
<div class="sub">
<button type="button" class="Button">About us</button>
<button type="button" class="Button">Buy now</button>
</div>
You haven't used the <form> tag in the right way in the below code part
<div class="sub">
<button type="button" class="Button">About us<form action="side2.html"></button>
<button type="button" class="Button">Buy now<form action="buynow.html"></button>
</div>
Try this way
<div class="sub">
<form action="side2.html">
<button type="submit" class="Button">About us</button>
</form>
<form action="buynow.html">
<button type="submit" class="Button">Buy now</button>
</form>
</div>
else try this alternate way
<div class="sub">
About us
Buy now
</div>
Hope this helps.
No need to use buttons to navigate through pages. You can do this instead:
Buy Now
Then style a however much you like.
Buttons are used with JavaScript in case you need to pass an onClick action.
I have a small box placed at the bottom of the page. I am trying to place a form right above a div but the form keeps jumping into the bootstrap div.
this is the html attempt
EDITTED:
I also want the row across the form to have a background color as thesame with the breadcrumbs but it is not showing
<div style="padding:1px; background-color: #F2F2F2;">
<form class="rightiest" method="post" action="/logout">
<input class="btn btn-link" type="submit" value="Leave Group"/>
</form>
</div>
<div class="breadcrumb">
<div class="wrap">
<div class="container" style="text-align: center;font-size: 80%;">
<strong> Please hold we will soon attend to you shortly</strong>
</div>
</div>
</div>
This is the css controlling the form
form.rightiest {float:right; margin-top:0px; margin-bottom:7px;}
with the above, the form keeps overlapping into the div. Please how can I place the form right above the div.
You need to clear your floats.
.breadcrumb {
clear: both;
}
Clear the float.
form.rightiest {float:right;
margin-top:0px;
margin-bottom:7px;}
.breadcrumb {
clear: both;
}
<form class="rightiest" method="post" action="/logout">
<input class="btn btn-link" type="submit" value="Leave Chat"/>
</form>
<div class="breadcrumb">
<div class="wrap">
<div class="container" style="text-align: center;font-size: 80%;">
<strong> Please hold we will soon attend to you shortly</strong>
</div>
</div>
</div>
I would like to put a (2 button) radio btn-group inside of an input-group-addon. The trouble I'm having there is that the buttons do not stay on one line.
The common patterns to keep elements on the same line did not work for me.
Do you know how I could fix this? Thx
Here's the jsfiddle: http://jsfiddle.net/DTcHh/144/
<div id="filter_criteria_date">
<div class="input-group" style='margin-top:15px'> <span class="input-group-addon">
<input type="checkbox">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-xs btn-primary">And</button>
<button type="button" class="btn btn-xs btn-primary">Or</button>
</div>
</span>
<input type="text" class="form-control filter_text" placeholder="Filter">
</div>
They do not stay on one line due to no width being set. Set a width for the parent of the buttons and they will fit.
.btn-group {
width: 100px;
}
DEMO HERE
.input-group-addon { width:auto; }
Working Demo http://jsfiddle.net/DTcHh/148/
I want to display 3 buttons on the same line in html. I tried two options:
This one:
<div style="width:500px;">
<div style="float: left; width: 130px"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></div>
<div style ="float: none; width: 130px"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></div>
<div style ="float: right; width: 130px"><button class="msgBtnBack">Back</button></div>
</div>
And this one:
<p style="float: left; width: 130px"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></p>
<p style ="float: none; width: 130px"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></p>
<p style ="float: right; width: 130px"><button class="msgBtnBack">Back</button></p>
For the second option I used a styling for the paragraph:
<style>
p {display:inline}
</style>
Sadly, none of them were ok, and I can't seem to find out any other option. The first and second button are displayed on same line, but the third is displayed lower...
Can you help me?
Here is the Answer
CSS
#outer
{
width:100%;
text-align: center;
}
.inner
{
display: inline-block;
}
HTML
<div id="outer">
<div class="inner"><button type="submit" class="msgBtn" onClick="return false;" >Save</button></div>
<div class="inner"><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></div>
<div class="inner"><button class="msgBtnBack">Back</button></div>
</div>
Fiddle
Do something like this,
HTML :
<div style="width:500px;">
<button type="submit" class="msgBtn" onClick="return false;" >Save</button>
<button type="submit" class="msgBtn2" onClick="return false;">Publish</button>
<button class="msgBtnBack">Back</button>
</div>
CSS :
div button{
display:inline-block;
}
Fiddle Demo
Or
HTML :
<div style="width:500px;" id="container">
<div><button type="submit" class="msgBtn" onClick="return false;" >Save</button></div>
<div><button type="submit" class="msgBtn2" onClick="return false;">Publish</button></div>
<div><button class="msgBtnBack">Back</button></div>
</div>
CSS :
#container div{
display:inline-block;
width:130px;
}
Fiddle Demo
This will serve the purpose. There is no need for any divs or paragraph. If you want the spaces between them to be specified, use margin-left or margin-right in the css classes.
<div style="width:500px;">
<button type="submit" class="msgBtn" onClick="return false;" >Save</button>
<button type="submit" class="msgBtn2" onClick="return false;">Publish</button>
<button class="msgBtnBack">Back</button>
</div>
You need to float all the buttons to left and make sure its width to fit within outer container.
CSS:
.btn{
float:left;
}
HTML:
<button type="submit" class="btn" onClick="return false;" >Save</button>
<button type="submit" class="btn" onClick="return false;">Publish</button>
<button class="btn">Back</button>
If you are using bootstrap then call a simple btn-group class in the outer div
<div class="btn-group">
View
Edit
Delete
</div>
The following will display all 3 buttons on the same line provided there is enough horizontal space to display them:
<button type="submit" class="msgBtn" onClick="return false;" >Save</button>
<button type="submit" class="msgBtn2" onClick="return false;">Publish</button>
<button class="msgBtnBack">Back</button>
// Note the lack of unnecessary divs, floats, etc.
The only reason the buttons wouldn't display inline is if they have had display:block applied to them within your css.