I'm using Bootstrap and I'm having trouble placing two divs next to each other. I've tried display: inline and that makes it look even worse. I created a div to hold them both called steven-and-leah and got the same result, however if use a specific type of inline such as inline-flex I get a result which near what I want, but they are too close together and cannot be separated when using that.
I'm sorry if this isn't specific enough, but I don't notice anything that even effects the code.
.steven-and-leah{
display: inline;
}
.team-bx{
width: 500px;
height: 570px;
margin-top: 80px;
border: 5px solid #FFF;
border-radius: 120px;
padding: 20px 0px 20px 0px;
overflow: hidden;
background-color: #111924;
}
You're using bootstrap wrong here. Remember that the strength of Bootstrap is on its grid.
If you want to place two divs next to each other, you simply have to apply a col-£-6 to them (£ being the device you want to target). For example:
<div class="row">
<div class="col-md-6">div number one!</div>
<div class="col-md-6">div number two!</div>
</div>
This will automatically place both divs next to each other as if they were "inline", with the huge plus of them being automatically responsive.
If this is not your question, please reframe it.
You can find great examples in their getting started site
Did you try with this. check the demo
.steven-and-leah > * {
display: inline-block;
}
Demo
You better use grid system if you have specific pattern in mind (as Obed mentioned). But if you want to have a bit of freedom use d-inline
<div class="d-inline p-2 bg-primary">box1</div>
<div class="d-inline p-2 bg-dark">box2</div>
You should manage the spacing and alignment by your own and you should not wrap the divs with class="row" div to allow d-inline to take effect.
Related
First post so I am unsure of the format works for post but I have created a site as a newbie in which I got it to work on desktop but when on mobile, the right hand side of the website goes over another text instead of under. Any thoughts? I have trouble with getting the side bar update to appear where I want to. The solution now is to add the code between two left side divs which in turn, when minimized, the stripo goes over there divs and the following ones.
My trouble is that if i put the div at the end of the code, then the div only appears next to the last div then going down. The website is http://clinicalresearch-apps.com/index.html. Thank you.
HTML CODE
<div class="col-md-5">
<br>
<div class="navigation">
Center for Biostatistics Updates
<br>
<div class="my-text">
<p><font size="4"> Application cycle open for our Center for Biostatistics-sponsored 1-year MS in Biostatistics Program in Theory and
Methods! Learn more here
<br>
<p><font size="4">Apply now for our Center for Biostatistics-sponsored 1-year MS in Biostatistics
Program in Clinical Applications geared specifically for clinically-trained professionals! Learn more here
</div>
</div>
</div>
CSS CODE
.navigation
{
position:absolute;
left: 20px;
padding-left: 10PX;
background-color:#221f72;
opacity: .9;
width:502px;
height:745px;
color:white;
}
First off let me say good job for creating the site as newbie, many comments on what you could be doing better but awesome start, everyone starts somewhere.
Your have two main issues:
1) Your class of "navigation" is causing issues with it's current rules.
2) You are not utilizing bootstrap html/css correctly.
First update your class to something like this:
.navigation {
background-color: #221f72;
opacity: .9;
width: 100%;
height: auto;
color: white;
padding-bottom: 15px;
padding-left: 20px;
padding-right: 20px;
padding-top: 15px;
}
Removing the position : absolute solves a lot, let the element flow naturally.
Add this for your video iframes, particularly for mobile:
.navigation iframe { width: 100%; }
Next, since you are already using bootstrap, utilize it correctly. Bootstrap specifies that you should place columns inside of rows, and your rows inside of a container. You have columns and a container, but not rows around your columns!
You looks like you want to have the main column be col-md-7 and the right/side column be col-md-5, surround both of these with a <div class="row"></div>, then seeing what you get. Remember to refer to the docs: https://getbootstrap.com/docs/3.3/css/#grid
Use media screen, you can control it through its width size. Make the position relative instead of absolute
I'm working on a thing with Bootstrap/Angular and am using ng-repeat to populate divs from an array retrieved from the database. My issue is that while the divs themselves need to have word-wrap set to auto, this causes them to be inconsistent heights depending on the content.
I'm displaying three per well, so how would I get all three divs heights to be uniform, depending on the tallest one?
Here's the html:
<div class="well tickets" ng-repeat="tickets in chunkedTickets">
<div class="col-sm-4 task clearfix" ng-repeat="ticket in tickets">`
<form name="editForm" class="editForm">
<h4 ng-show="!ticket.edit">{{ticket.name}}</h4>
<h4 ng-show="ticket.edit">Ticket Name:</h4>
<!-- more stuff -->
</div>
</div>
chunkedTickets is the array of data chunked into a nested array of threes.
And here is the CSS applying to the well and the 'task' divs:
.tickets {
overflow: auto;
}
.task {
word-wrap: break-word;
background-color: #fbfbfb;
border-radius: 4px;
border: solid 1px #aaaaaa;
border-left: -5px;
border-right: -5px;
};
The well and clearfix classes are bootstrap of course. I've tried flexboxes, tried setting a height to 90%, tried everything. I've always been very bad at this, and can't find any help on search since questions are relating to bootstrap's .row class and I need to specifically use .well. I would greatly appreciate some help.
Screenshot of the app now: http://i.imgur.com/70F34tM.png
I'm usually using this solution:
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
It's pretty robust, just add classes for the row and desired columns (I usually use row-md-height and col-md-height, for smartphones it's usually not needed.
Working on a project, did some standard inline block elements. To get the count display to the right area I had to put in a negative margin-top. I'm not sure why it wouldn't just position there on it's own accord. Is it because the count title is taking up an area or something else? I'd like to know why I had to do that and if there's a better way to avoid having to do that in the future or if I did it right and how to identify what happened so I can make sure I do it the same way in the future.
https://jsfiddle.net/ybh9qz37/
.count-display {
height: 35px;
width: 65px;
background: black;
color: red;
display: flex;
float: left;
align-items: center;
border-radius: 5px;
//why is this needed
margin-top: -60px;
margin-left: 40px;
font-family: Orbitron, sans-serif;
font-size: 200%;
}
The best way to organize any div with a lot of divs is to group subdivs.
For example, in your case you have 3 subdivs with different height going one under another. This causes a lot of problems, you should use this schema:
<div class="row2">
// your left side div
<div class="left" style="display: inline-block;vertical-align: top;">
<span class="count-title">Count</span>
<span class="count-display"><p>00</p></span>
</div>
// the right way is to create here <div class='right'> with similar styles as left
<span class="strict-button">
<a rel="external" href="#button" class="button">Strict</a>
<span></span>
</span>
</div
And change your .count-title to :
.count-title {
display:block;
}
This way you can easily extend your stucture in future without problems and save it organized
I think you should better know how the float works and you will get the reason why you require a negative margin in your case.
You can refer this I hope that you will get a better understanding of the issue
Everything You Never Know about css float
Simple html formatting that I just can't seem to gt right.
I have the following div:
<div class="fc-event-time" data-hasqtip="true" aria-describedby="qtip-6">
2:54 - 6:54
<i class="icos-refresh" style="float: right; margin-top: -17px; margin-right: 2px"></i>
<i class="icos-acces-denied-sign" style="float: right; margin-top: -17px; margin-right: 2px"></i>
</div>
that according to firebug has the following css classes acting on it:
padding-left: 5px;
white-space: nowrap;
font-weight: 500;font-size: 12px !important;
padding: 0px 1px;
color: rgb(0, 0, 0) !important;
cursor: pointer;
direction: ltr;
text-align: left
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 18px;
Now the above code is rendering like below:
if you can see, there are two icons on top of one another, the <i></i> elements', my problem is that I would like to have it side by side. My first thought was to adddisplay:block;` but that doesn't work. how can I have them line up rather than superimposed?
UPDATE:
After taking out the margin-top: -17px; I get the following results, but I need them (the text and the icons) to be in the same row.
UPDATE 2:
Finally Figured out the problem and fixed this issue, it turned out to be the 2:54 - 6:54 plain text that was not allowing the <i>s to get in the same line. all I did was modify the Full Calendar source to place the time inside a <span> and gave it a style attribute of `float: left' and its all lined up and working now. Thank you all for helping, if a better answer is submitted (one that I don't need to modify the javascript I will still award it as an answer since that would be a better method.
As far as I can tell you don't have any widths applied to your i icons, plus the negative margin-tops could be playing havock with the floats. If you define actual widths for your i elements you shouldn't have a problem (at least based on what I can see).
If that doesn't work you may also have some kind of absolute positioning involved. If this is the case, and is applied to the i elements, then you'll need to remove it.
But without seeing the style applied to the i elements it's a bit impossible to tell.
update
Ah, ok so the negative top margin was causing the issue. In order to get your text and your icons to align on the same line you'll have to wrap the text with a span and apply a float:left to it.
<span style="display: block; float:left;">2:54 - 6:54</span>
<i class="icos-refresh" style="float: right; margin-right: 2px"></i>
<i class="icos-acces-denied-sign" style="float: right; margin-right: 2px"></i>
However I'd recommend that you not use inline styles and extract these to specific css classes.
I would like to vertically align the div ".person-user" so that is vertically in the center of the parent element ".person" (The text to be in the center of the photo but to the right) How can I do this?
Thanks
http://jsfiddle.net/mpBW5/5/
This is something that should be simple, but is actually a pain in the backside to do. Here's a quick jsFiddle, using display: table on the person div, and display: table-cell on the picture wrapper and info divs:
http://jsfiddle.net/2yfDs/1/
What follows is a combination of markup and style that will accomplish exactly what you want, without JavaScript and JQuery.
Markup:
<div class="person">
<img class="profile" src="http://sphotos-a.xx.fbcdn.net/hphotos-ash4/320450_10151028382307410_534533150_n.jpg"/>
<div class="profile">
<div class="name">Colin Pacelli</div>
<div class="fact">Ohio University</div>
</div>
</div>
Style:
.person {
display: table;
}
.person img.profile{
height: 50px;
margin-right: 10px;
/*border-radius: 4px 4px 4px 4px;*/
}
.person div.profile {
display: table-cell;
vertical-align: middle;
/*font-family: calibri;
font-size: 14px;
color: #444;*/
}
/*.person .profile .name {
font-weight: bold;
}*/
I have commented out the rules that do not principally affect the solution, so that all can see how little it takes with CSS if done right. Compared to 10 lines of code running using 32Kb of client side code running on top of a virtual machine. And you thought Adobe Flash Player was evil. I do not mind JQuery much, especially for things it can do well, but frankly, involving JQuery in a clear cut case of pure style is a just bit too much.
As you probably can figure, I have edited your JSFiddle, stripping it of non-essentials and cutting it down to a minimal example that exhibits the desired behavior while leaving the visuals in place.
Since you specified html and css as tags, and since it is in nearly all cases a better idea not to resort to JavaScript/JQuery when they can be avoided, I would really use a markup and style solution like the above instead.
The most precise way is to do this with jQuery and calculate it dynamically for each div. This is useful if some/all image/text divs have different heights. The example. The code:
$("div.person-user").each(function() {
$(this).css("marginTop", function() {
var imgH = $(this).prev("div.person-user-pic").height(),
thisH = $(this).height(),
h = (imgH/2) - (thisH/2);
return h;
});
});
BUT: if every div and image has the same height, you could just do this:
div.person-user {margin-top: 8px;}
I hope that this answers your question?
This is a very common question and the best explanation so far is here:
http://phrogz.net/css/vertical-align/index.html