I have this button that I need centered in the space between two other div's. I'm not the primary developer on this project... I was just brought in to help bang out some new features really fast. I don't want to overhaul the html of the primary developer (who is still very active on this project), so instead of converting this to bootstrap rows and columns, is there a less invasive way to center this button?
(PS what you see in the snippet isn't what it actually looks like. We are missing some CSS. But it's close enough for what I need done.)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<div class="text-right">
<div id="">
<div>
<strong>Exclude Customers With Tags: </strong>
<select id="" multiple style="width:100px;"></select>
</div>
</div>
<div class="pull-left" id="">
<label>
<input type="checkbox" value="" id="">
some text
</label>
</div>
<!-- This is what I am adding -->
<div class="pull-left">
<button id="" class="btn btn-primary btn-sm">Center Me</button>
</div>
<!-- end/ This is what I am adding -->
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
i have removed the standard classes from bootstrap and display it with the flex
.text-right {display: flex;
flex-direction: row;
justify-content: space-between;}`
here is a jsfiddle demo https://jsfiddle.net/jjx4cf8L/
Related
I have a small question.
What would be the best way to make a sibling push on the last element of said div?
this is the structure:
<div class="row">
<div class="formContainer col-lg-6">
<form>
<fieldset>
...content....
<button>Submit Form</button>
</fieldset>
</form>
</div>
<div class="col-lg-6" id="datePicker">
calendar where user picks dates
</div>
</div>
and the CSS (more or less)
form > button {
width: 200px;
margin: auto;
display: block;
margin-bottom: 15px;
position: relative;
right: -54%;
}
Here is an image as an example:
I want the right col-6 div to push on the save button which is in the left col-6, because there are elements of the rightmost div that are being added that start overlapping. How should I go about doing so?
This will do it:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="row">
<div class="formContainer col-lg-6">
<form>
<fieldset>
...content....
</fieldset>
</form>
</div>
<div class="col-lg-6" id="datePicker">
calendar where user picks dates
</div>
<div class="col-lg-12 text-center">
<button class="btn btn-default"
onclick="$('.formContainer form', $(this).closest('.row')).submit();">Submit Form</button>
</div>
</div>
Notice I moved the button in a new column and I'm using inline Javascript to submit the form when it's pressed.
I'm trying to create a virtual roulette wheel. Right now my concerns are strictly aesthetic. In the text-well on the right, the number in the #chipsInv won't center, except when I put an html "center" tag, and then for some reason it creates a huge amount of empty space at the bottom.
Here is my code, I've left out the Javascript since I assume it's irrelevant:
<!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
#ball {
position: absolute;
left: 208px;
top: 40px;
z-index: 1;
width: 20px;
height: 20px;
transition: top 1s;
}
#wheel {}
form {}
.row {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-5">
<img id="ball" src="ball.png" onclick="spin()"></img>
<img id="wheel" src="Rwheelbg.png" onclick="spin()"></img>
</div>
<div class="col-lg-1">
<button id="reset" onclick="reset()">Reset</button>
</div>
<div class="col-lg-6">
<div class="well well-lg">
<span><center>Chips</center></span>
<br>
<span style="font-size: 180px; text-align: center;" id="chipsInv">10</span>
<!-- Why won't this center!? -->
<br>
<span style="float:right;" id="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></span>
</div>
</div>
<!-- Row ends here -->
</div>
<p>Bet on:</p>
<form action="">
<input type="checkbox" name="21" value="310" id="310"> 21
<br>
<input type="checkbox" name="9" value="100" id="100"> 9
<br>
<input type="checkbox" name="14" value="120" id="120"> 14
<br>
<input type="checkbox" name="13" value="240" id="240"> 13
</form>
<p>Bet on up to four numbers. However, be warned, the more numbers you bet on, the lower your chip return will be.</p>
<!-- container ends here -->
</div>
</body>
</html>
In Bootstrap, as best you can / where you can, use the Bootstrap classes to provide the styling you're looking for, as the Bootstrap classes are designed to be compatible with one another.
<div class="col-lg-6">
<div class="well well-lg">
<div class="text-center">Chips</div>
<div class="text-center" style="font-size: 180px;" id="chipsInv">10</div>
<div class="float-right" id ="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></div>
</div>
</div>
If you want to text center everything in your example you can simply add the text-center class next to your well well-lg classes, as follows :
<div class="col-lg-6">
<div class="well well-lg text-center">
<div>Chips</div>
<div style="font-size: 180px;" id="chipsInv">10</div>
<div class="float-right" id ="purchase"><a style = "color:green !important;" href = "#">$ Purchase More Chips?</a></div>
</div>
</div>
Additionally;
with Bootstrap, they recommend you use div's where possible, and then
you can specify different behaviour by modifying the classes of those
divs, such as "d-inline", or "d-block". That was the reason I changed
your spans to divs.
Ensure your col-lg-6 div is contained within a div with class "row", and that according to the docs, these divs specifying col div when added together do not exceed 12. Bootstrap Grid Docs
I'm trying to implement a mobile view where the first column of the row goes on top of the second column.
Here's the code:
<div class="container-fluid">
<div class="row">
<div class="col-md-4"><div class="loginpart"><img id ="icon" src="../images/athletics-logo.png"/><h2>Athletes Profiling </h2>
<input type="button" class="login" name="login" value="Log In"/></div></div>
<div class="col-md-8" style="padding: 0"><img id ="header"/><div class="mantra"><h2>Go Wolves!</h2></div></div>
</div>
</div>
Now the thing is, I want the loginpart class to go on top of the col-md-8 when on mobile. I tried searching for answers but ended with nothing. I don't want it to stack on top of each other.
A | B = A goes on top of B
If the implementation or my understanding is faulty, please do educate me. Thanks!
Edit: I tried the push-pull bootstrap function, but all it does is put the second column under the first column (which isn't what I was hoping for), but instead overlap both columns when switched to mobile view, not stacked on top of each other.
Try position absolute with push. You can use Z-index to get the correct column on top.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="position: absolute; z-index: 1;">
<div class="loginpart">
<img id ="icon" src="" />
<h2 style="color: grey;">Athletes Profiling </h2>
<input type="button" class="login" name="login" value="Log In"/>
</div>
</div>
<div class="col-md-8 col-md-push-4">
<img id="header" src="" />
<div class="mantra">
<h2 style="color: blue;">Go Wolves!</h2>
</div>
</div>
</div>
</div>
I'm having trouble figuring out why my jumbotron container is covering the entire page. I am trying to have the jumbotron stop right before "Find your university".
Second, I am also having trouble with moving the search bar to the middle of the jumbotron. Can anyone help? I'm new to HTML, CSS and Bootstrap.
HTML:
<div class="center jumbotron">
<div class="container">
<h1>MOVE ABROAD WITH EASE</h1>
<h2>Find out about the cities, where to live and eat, hangout groups.</h2>
<div class="container">
<div class="row">
<div id="custom-search-input">
<div class="input-group col-md-6">
<input type="text" class=" search-query form-control" placeholder="Which city are you moving to?" />
<span class="input-group-btn">
<button class="btn btn-danger" type="button">
<span class=" glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.center {
text-align: center;
}
#custom-search-input {
margin: 0;
margin-top: 50px;
margin-bottom: 50px;
padding: 10;
}
Your jumbotron is likely filling your page because you have all your content inside of it. Just move everything from Find Your University and below out of it.
As for centering your input, Bootstrap provides the col-xx-offset-# concept to help with this.
Here's a Fiddle with your code updated to illustrate.
Some additional notes and pointers:
padding: 10; is invalid css (possibly just a typo). make sure to include px if that was your intention.
Creating your own .center class is unnecessary. Bootstrap comes with a .text-center class for this purpose.
I am pretty new in Twitter BootStrap and I am going crazy trying to do the following thing related to this JSFiddle example: https://jsfiddle.net/AndreaNobili/DTcHh/11406/
So, in the previous example, I have this row:
<div class="col-md-4">
<div class="row">
<div class="col-md-10" style="text-align: right !important;">
<p>TEST</p>
</div>
<div class="col-md-2">
<i class="glyphicon glyphicon-home"></i>
</div>
</div>
</div>
So I correctly obtain a row that contains 2 columns: a bigest one on the left for the text and a smaller one on the right for an icon.
As you can see in the JSFiddle the problem is that I want to align the text on the right so I will have that it is near the icon but I can't do it.
As you can see I done:
<div class="col-md-10" style="text-align: right !important;">
but I still obtain that the text is on the left of its container.
Why? What am I missing? How can I fix this issue and align the text on the right near my icon?
This is why using !important is considered a bad practise and is to be avoided unless it's very important.
Your definition
.container p {
text-align: justify !important;
}
in index.css is taking precedence over all the styles. I would suggest removing the important from the above definition and making it more precise to apply to only certain dom elements as required(by using appropriate classes).
Regarding aligning it to the right, the other answer should work fine; i.e using the text-right class provided by Bootstrap.
<div class="col-md-4">
<div class="row">
<div class="col-md-10" style="text-align: right !important;padding-right: 0">
<p>TEST</p>
</div>
<div class="col-md-2" style="padding-left: 0">
<i class="glyphicon glyphicon-home"></i>
</div>
</div>
</div>
Just use Bootstrap's text-right..
<div class="col-md-4">
<div class="row">
<!-- CONTENT: -->
<div class="col-md-10 text-right">
TEST
</div>
<!-- ICONA: -->
<div class="col-md-2">
<i class="glyphicon glyphicon-home"></i>
</div>
</div>
</div>
http://codeply.com/go/ICgJMj82ue
first of all i want all i want to say that you need to improve of
using the sequences of the elements how to use them this can easily
solve your problems and make code very beautiful so people work even
you will love to when you need to come back to reuse
below is my try
This is why using !important is considered a bad practise and is to be avoided unless it's very important.
test{
float:left;
}
.test1{
line-height:30px;
}
<!-- Column 3: -->
<div class="col-md-4">
<div class="row">
<!-- ICONA: -->
<div class="col-md-2 test">
<i class="glyphicon glyphicon-home"></i>
</div>
<!-- CONTENT: -->
<div class="col-md-10 test1">
<p>TEST</p>
</div>
</div>
</div>
DEMO
<div class="col-md-10" style="text-align: right !important;">
<p class="text-right">TEST</p>
</div>
<div class="col-md-2">
<i class="glyphicon glyphicon-home"></i>
</div>
</div>
You don't need to use Bootstrap's columns (col-md-x, col-sm-x, col-lg-x) in your case, if you want to display two elements side by side.
Since the screen portion in JSfiddle is quite small on the right for the HTML, your column's (col-md-xs) will get a bigger width (due to #media queries of Twitter Bootstrap).
Thus, the two columns will get stacked onto each other.
You can align the text on the right of the icon, in a way quite similar to the one you already have, by using two HTML elements which are normally displayed inline:
<div class="row">
<!-- ICONA: -->
<div class="col-md-10">
<i class="glyphicon glyphicon-home"></i>
<span>HOME</span>
</div>
</div>
JSFiddle