I have been struggling to get the contents of a boostrap well to center. My badge goes to the right, instead of under the arrows, and my arrows (aka, vote buttons) are not centered in the well either. I have attached a screenshot, and here is the relevant code:
HTML:
<div class="col-md-1 col-sm-1 well">
<div class="votingButton" data-ng-controller="pfcArticleVoting" data-ng-click="upVote(article);">
<i class="glyphicon glyphicon-chevron-up"></i>
</div>
<div class="badge badge-inverse">
<div>{{article.articlevotes}}</div>
</div>
<div class="votingButton" data-ng-controller="pfcArticleVoting" data-ng-click="downVote(article);">
<i class="glyphicon glyphicon-chevron-down"></i>
</div>
Here is the only custom CSS beyond default bootstrap:
/* Voting styling */
.votingButton{
cursor: pointer;
}
Here is the screenshot:
try class="text-center", that should do the trick, if not you can reposition it using style="postion: absolute; margin-left: -5px;", if you're not too picky about the well size, that might be another problem as "well". fix the size to be a little bigger, that would help.
Your column width is too small to render correctly. You need to change col-md-1 col-sm-1 to col-md-2 col-sm-2 or reduce the padding inside the div.
Related
I'm trying to align the text just above the hr tag like the logout button using bootstrap.
Here's what I want to achieve:
bootstrap code :
<div className="position-relative">
<hr/>
<div className="position-absolute end-0 bottom-0 d-flex">
<p className="align-baseline //not working">Logged in as {user?.email}</p>
<button onClick={handleLogout} className="btn btn-primary ms-2 m-1">Logout</button>
</div>
</div>
Glad for any help
#Edit :
after adding mb-0 to my p tag :
Given the image, your <p> has some margin-bottom, add the bootstrap class mb-0 to the <p> tag.
Then to align the <p> to the bottom, you'd need to have the flex content pushed to bottom, that will be done with adding align-items-end to the div.
I also added a small padding to stop it from sticking to the bottom.
JSFiddle
Edit: As per the answer from G-Cyrillus, you actually don't need the positions either (I overlooked it before). A little change in structure and whole thing looks the same with lesser code. Updated JSFiddle
Here both <p> and <button> are part of d-flex. You can align both the items by using align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column).
<div class="d-flex align-items-center">...</div>
You can find more resource here link.
You probably do not need absolute position , flex & order can do .
example
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="d-flex flex-column"><!-- make it a flex column to use order -->
<hr class="order-2 m-0" /><!-- resets margin & order -->
<div class="d-flex justify-content-end"><!-- here use the justify-content-xx class you need -->
<p class="m-0 mt-auto">Logged in as <b>SO User</b></p><!-- reset margins-->
<button onClick={handleLogout} class="btn btn-primary ms-2 m-1">Logout</button>
</div>
</div>
</div>
</div>
Lately, I've run into a problem when trying to get my web aps to work with small devices. Even then, this doesn't seem to always be an issue, it will depend upon the orientation of the phone. What I'm seeing is say I have a Bootstrap 4 ROW with a col-3 col-6 col-3 setup. The center col has more height and includes images where fade in and out of opacity, so the height is constant. When BS does its thing for smaller displays, the first col-3 breaks properly, leaving space for the col-6. The problem is the col-6 seems to break at the col-3 height and I get over lapping. When using the dev tools, I can see this is the case but I dont want to set a hard height because that makes the spacing go weird and defeats the whole BS purpose. Here are some examples:
<div class="row" style="margin: 0vh 5vw;">
<div class="col-md-3 col-sm-12 text-center wow fadeInLeft">
<div>
<i class="fa fa-eye features-icon"></i>
<h2 style="color: white; font-size: 3vmin">Something</h2>
</div>
</div>
<div class="col-md-6 col-sm-12 text-center wow" style="height: 53vh;">
<img id="img1" src="myImage.jpg" alt="dashboard" class="img-fluid img1" style="margin-top: 3vh;
display:block; position:absolute; opacity: 1;">
<img id="img2" src="~/anotherImage.png" alt="dashboard" class="img-fluid img2" style="margin-top:
3vh; display:block;position:absolute; opacity: 0;">
</div>
<div class="col-md-3 col-sm-12 text-center wow fadeInRight">
<div>
<i class="fa fa-database features-icon"></i>
<h2 style="color: white; font-size: 3vmin">More blah blah</h2>
</div>
</div>
</div>
This image shows where col is over lapping (blue icon)
BTW, I've set the center col height because without it, I get no height to that col. I've tried manipulating it, but it seems that whatever I do, it will fix it for one layout orientation and mess up the others. I must be missing something simple in BS. Thanks in advance for your help.
That row has an inline style defining a margin, maybe the view units are causing the problem. Try changing that around to % or px to see how it behaves or remove that margin all together and use bootstrap's margin utilities. Other thing I can think of would be to try and wrap the overlapping elements in two different .container-fluid
So, I ended up doing what I consider a cheat using jQuery. I gave the col div an id of #mcsCol and put this in my $(document).ready(function)
$("#mcsCol").css({ "height": $("#img1").css("height") });
So essentially, it will check the height of the image and set the col to the same height. If you have a more native solution, I'd love to see it.
I'm just wondering what's the best way to format three buttons so that they show correctly on various screen sizes. So, this is what I've done so far and it looks good on 1200px width screen.
What I've done is I used the buttons and put them into span4 classes. Like so:
<div class="row-fluid">
<div class="span4">
<a class="header-btn" href="#">Testbutton 1</a>
</div>
<div class="span4">
<a class="header-btn" href="#">
Testbutton 2
</a>
</div>
<div class="span4">
<a class="header-btn" href="#">Testbutton 3</a>
</div>
</div>
However, when I shrink the screen size it looks bad and the buttons break up.
I would like to have the buttons displayed below one another once the screen size gets too small.
I could edit the span4 class from bootstrap but this could mess with the other layout... So should I just add a new class and make everything reponsive, or work with the bootstrap framework?
Please advise.
Thanks!
You seem to be using it right for v2, so maybe you might not be having bootstrap loading in correctly.
but I suggest upgrading to v3 or v4, you can learn more in the Docs. http://getbootstrap.com/css/#grid
All buttons will be inline horizontally with each other but as the screen gets smaller. the buttons will adjust and then go vertically with each other. depending on how you have it set up. But this makes it responsive.
You might want something like this, in the html:
! To see everything working the way it should, when you click the run snippet button. Click full page and then drag the side of the browser smaller and smaller, and you will see the buttons adjust. !
I hope this helps!
.div-container{
border: 1px solid black;
padding: 10px;
margin: 10px;
border-radius: 5px;
}
button{
margin-left: 45% !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class='div-container'>
<div class='row'>
<div class='col-sm-4'>
<button class='btn btn-primary'>CLICK</button>
</div>
<div class='col-sm-4'>
<button class='btn btn-primary'>CLICK</button>
</div>
<div class='col-sm-4'>
<button class='btn btn-primary'>CLICK</button>
</div>
</div>
</div>
I recognize that this question has been asked a hundred times. However, the answers that I see do not work in my situation. This makes me believe there is something additional in my content.
<div class="row" style="margin-left:6px; margin-right:6px;" ng-repeat="product in products">
<div class="col-xs-6 col-sm-6 col-lg-6">
<a>
<h4>{{product.name}}</h4>
<h5>{{product.description}}</h5>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6">
<span class="pull-right">
remove
<i class="glyphicon glyphicon-remove pull-right"></i>
</span>
</div>
</div>
I want the remove [x] in the second column to be vertically centered in relation to the first column. Right now, the remove [x] is vertically centered across the top. I thought I could vertically center the content by doing the following:
<div class="col-xs-6 col-sm-6 col-lg-6" style="float:none; display:table-cell; vertical-align:center">
<span class="pull-right">
remove
<i class="glyphicon glyphicon-remove pull-right"></i>
</span>
</div>
Unfortunately, that did not work. I'm not sure what I'm doing wrong.
First, I'd recommend you to add an additional class to the columns you want to work with. In your bare-bones example, it won't make a difference, but once you start adding more elements, you'll find out the advantages of managing elements by their re-usable class.
So, first step, a tiny change in your HTML. Not really needed since you could easily target (for example) .col-xs-6 , but this is a general approach (as we're at it, I'd add a class to that row and remove that inline style)
<div class="row" style="margin-left:6px; margin-right:6px;" ng-repeat="product in products">
<div class="col-xs-6 col-sm-6 col-lg-6 midvert">
<a>
<h4>{{product.name}}</h4>
<h5>{{product.description}}</h5>
</a>
</div>
<div class="col-xs-6 col-sm-6 col-lg-6 midvert">
<span class="pull-right remove">
remove
<i class="glyphicon glyphicon-remove"></i>
</span>
</div>
</div>
Now that we can SAFELY target Bootsrap element without affecting the flow of the same re-usable classes in further uses, we simply give a vertical-align to them, like this:
.midvert {
display:inline-block;
vertical-align:middle
}
See how the vertical align is added to the CONTAINING BLOCK ELEMENT, not the element you want to align itself. But of course, that won't do anything at all, because our .remove element needs some sort of defined height, so we add the following:
.remove {
line-height: 4;
}
While the reasons for single numbers is open to discussion (you could use px, rem, em, %, etc), and I have seen that most people here use the px approach, I prefer to use single numbers. You can see the rationale here Prefer unitless numbers for line-height values , but again, use as you please. You'll notice that a number between 4 and 4.5 is the perfect fit, just resize window and see it by yourself.
I've forked a Bootply to demonstrate the issue
You could achieve this by adding a line-height to your "remove" link.
For example if you add this class to your link:
.remove {
line-height: 40px;
vertical-align: middle;
}
It will be aligned.
Bootply demo
I have created Fiddle for you, Hopefully this work for you.
Please observe css tab where i have added display:table-cell; for other col-sm-6 css class as well.
I'm working on an app that has a group of icons in the footer of a column. Currently, the icons are left-justified. However, I'd like to make them centered. To demonstrate, I have a fiddle that can be found here. The HTML looks like the following:
<div class="ui full-height grid">
<div class="full-height row">
<div id="navDiv" class="four wide full-height column" style="background-color:navy; color:white;">
<div id="nav-tab-items" class="row">
<div class="nav-tab-frame column">
<div class="ui active tab nav-tab-content" data-tab="home">
First Tab
</div>
<div class="ui tab nav-tab-content" data-tab="info">
Second Tab
</div>
<div class="ui tab nav-tab-content" data-tab="third">
Third Tab
</div>
</div>
</div>
<div id="nav-tab-control" class="bottom aligned row">
<div class="ui pointing secondary menu drawer" style="margin-bottom:0rem;">
<a class="active red item" data-tab="home">tab 1</a>
<a class="blue item" data-tab="info">tab 2</a>
<a class="green item" data-tab="third">tab 3</a>
</div>
</div>
</div>
<div class="eight wide full-height column">
[Content Goes Here]
</div>
</div>
</div>
There are two problems with nav-tab-control. First, as soon as I set 'bottom:0' for the , the nav-tab-control style, the row takes up the entire width of the page. I can't repro that error in the fiddle. But I have no idea what would even cause that. Second, and I believe this is related to the first problem, is that I can't figure out how to center the icons within the width of the navDiv.
I sincerely appreciate any insights that someone can provide.
This code centers the buttons at the bottom (I couldn't think if what else you would mean by 'icons').
You say #nav-tab-control is claiming the full width of the screen. That is actually needed to make it possible to center its contents. So because it didn't do it automatically, I've set the width to 100% in the css:
#nav-tab-control {
position:absolute;
bottom:0;
left: 0;
width: 100%;
text-align: center;
}
.ui.pointing.secondary.menu.drawer { display: inline-block; }
This makes #nav-tab-control the full width of the page, and centers any text in it.
Then, the container of the icons is displayed as inline-block, so it respects that centering.
http://jsfiddle.net/62eMj/3/
If you don't want to center it in the whole screen, you can also set position: relative to one of the parent elements. For instance to to center them inside the blue bar (also causing them to wrap):
http://jsfiddle.net/62eMj/4/
I found it a bit hard to find out what your actual problem is. I thought I knew but now I', not so sure. I hope these hints will help you solve it.