I´m new here, and I have a bit of a struggle with a, most lightly, simple problem.
I want to use the glyphicon-arrow-right, as a button, with the text "to test" centered inside it, is there an easy way to do this? I have this code line atm:
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a class="btn btn-default" style="color:green" href="textview" id="totestarrow">
<span style="font-size:10em;" class="glyphicon glyphicon-arrow-right">
</span><br>Til testene
</a>
</div>
With this I get a green arrow pointing right, with the text centered underneath it. so how do I manage to put it inside of the arrow?
Thanks!
You can set your button to use position:relative, which will cause all of the elements within it to be positioned relative to it and simply use position:absolute on your actual <span> containing your text and adjust the top and left properties to get it in the proper position :
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<a class="btn btn-default" style="color:green; position: relative;" href="textview" id="totestarrow">
<span style="font-size:10em;" class="glyphicon glyphicon-arrow-right"></span>
<span class='centered-text'>
Til testene
</span>
</a>
</div>
<style>
.centered-text {
/* This will cause your element to be positioned freely over it's container */
position: absolute;
/* This will bring the element roughly halfway down the existing element */
top: 47%;
/* Colored white to stand out */
color: white;
/* The following styles will center the element in it's container */
text-align: center;
left: 0;
width: 100%;
}
</style>
You can see an example of this here and the output demonstrated below :
Related
I have a simple div that contains a few anchor tags and a button. I want the first three anchor tags to be aligned to the left, and the button to be aligned to the right. But I want them to be all on the same row. My example shows all four elements to the right. How can I achieve that? Thanks
Please see
My example
I just want the first three buttons to the left of the page and the last one to the right. However, I want to keep them aligned and on same row.
You can use flexbox for that, there are many ways, one of them is the following :
.extra-buttons {
display: flex;
margin-bottom: 5px;
}
button {
margin-left: auto;
}
Another (cleaner) way would be to wrap your links in a div and apply justify-content: space-between on the .extra-buttons:
HTML:
<div class="extra-buttons">
<!-- How do I align these three anchor tags to the left -->
<div>
<a class="btn">
<span class="glyphicon glyphicon-refresh"></span> Refresh
</a>
<a class="btn">
<span class="glyphicon glyphicon-print"></span> Print
</a>
<a class="btn">
<span class="glyphicon glyphicon-plus"></span> Add
</a>
</div>
<!-- But keep this at the right (end) -->
<button>Reset</button>
</div>
CSS:
.extra-buttons {
display: flex;
justify-content : space-between
margin-bottom: 5px;
}
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
As the title says, I am trying to center an icon with an "a" tag which spans its div container. The idea is that I want the whole side/container to be clickable to navigate the carousel and not just the icon.
I am only able to get the two things that I want to happen separately. As you can see in the image, the whole container with the left chevron arrow is clickable and for the right chevron arrow, only the icon itself is clickable. I achieve the effect on the left using absolute position and the effect on the right using text-align with bootstrap's my-auto.
How can I achieve both effects at once?
Here is the corresponding html
<div class="carousel slide mt-3" data-ride="carousel">
<div class="row no-gutters">
<div class="col-2">
<a class="h1 text-danger debugborder2 sizer my-auto" href="#lusCarousel" style="text-align: center">
<i class="fas fa-chevron-left"></i>
</a>
</div>
<div class="mycard-carousel-inner col-8" role="listbox">
...
</div>
<div class="col-2 my-auto h1" style="text-align: center"><a class="h1 text-danger debugborder2" href="#lusCarousel"><i class="fas fa-chevron-right"></i></a></div>
</div>
</div>
And css
.sizer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
Bootstrap 4 solutions are welcome.
Since you're using Bootstrap 4, you could add d-flex align-items-center justify-content-center classes to your <a>.
If you prefer plain CSS (which I recommend), select it using any valid selector and apply:
display: flex;
align-items: center;
justify-content: center;
... to it.
Also, instead of giving it h1 class (which, besides increasing font-size, also adds in some margins), you could simply give it the desired font-size (i.e: font-size: 5rem;)
So I'm using Bootstrap 4's Jumbotron to style a landing page. Inside the jumbotron I have the standard headings and paragraphs with 2 call to action buttons. I have wrapped these elements in a div to position them correctly for a desktop screen. however when I shrink the window, the elements fall out of the jumbotron and mess up the look of the page.
Here is how it looks on desktop
And Here is how it looks on "mobile"
I hope you can see what I mean from the images. The background image of the jumbotron is perfectly responsive but the contents (text, buttons) are overflowing down the page.
Here is the relevant html
<div class="jumbotron jumbotron-fluid">
<div class="jumboContents">
<h1 class="display-3">Welcome to Other Mother!</h1>
<p class="lead">Scroll Down To See Whats On Offer</p>
<hr class="my-4">
<p>Click Below To Start Shopping or Make a Request Instantly</p>
<p class="lead">
<a class="btn btn-info btn-lg" href="#" role="button">Shop Now</a>
<a class="btn btn-info btn-lg" id="contactBtn" href="#" role="button">Contact OM</a>
</p>
</div>
</div>
And Here is the relevant CSS
.jumbotron {
position: relative;
top: -170px;
height: 100vh;
background-image: url(images/homepg.jpg);
background-size: 100% 100%;
margin: 0 auto;
color: white;
z-index: -1;
}
.jumboContents {
position: relative;
top: 30%;
left: 30%;
}
I suggest using the bootstrap grid classes on your divs to let them stack properly when shrunken screen. (ex: div class="col-md-4 col-sm-1")
I have a bootstrap row containing a header tag and a link tag. They are aligned on the same row when the screen width is less than 768 pixels. When the container width is 768 or greater the link element shifts a few pixels higher.
Here is an example that demonstrates this behaviour: https://jsfiddle.net/bz3399x8/
<div class="row">
<div class="col-sm-12">
<a class="btn btn-primary" href="#" style="width: 80px; float: right;">
<i class="icon-plus">
Add
</i>
</a>
<h1>
Hello World
</h1>
</div>
</div>
Here are screenshots demonstrating this behaviour.
There are two issues:
what is causing this?
how to i fix this?
your syntax according to Bootstrap Docs is wrong,
it needs the .container to wrap .row
and
h1 and a button elements needs to be wrapped in Bootstrap columns.
So, you can use .col-sm-10 + .col-sm-2 in this case.
Added .col-xs for demo
.row {
/* demo*/
background:red
}
.btn {
margin-top:20px /* choose as it fit you better */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-10 col-sm-10">
<h1>
Hello World
</h1>
</div>
<div class="col-xs-2 col-sm-2">
<a class="btn btn-primary" href="#">
<i class="icon-plus">
Add
</i>
</a>
</div>
</div>
</div>
While wrapping elements in different column will help answer your problem. If you are looking at wrapping both elements inside single column you need to specify elements to be inline. Problem is occurring since h1 element and a element even though in same row for bootstrap but are displayed as block and inline-block.
Add display: inline-block to h1 element with top padding to a element. This should answer it as well.
Try it with display: inline on h1 see the difference in behavior. inline element dont support vertical margins.
Fiddle: https://jsfiddle.net/dk_dragonknight/m8ey6mba/
I'm trying to put a button in between bootstrap columns using position absolute.
My problem is that once my button enters another column, the button goes under the column instead going over it.
What I want to Achieve
What I have
My Html code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-3">
<ol>
<li>
Option
<button class="btn btn-default feedback-option--feedback-button">PressMe</button>
</li>
<li>
Option
<button class="btn btn-default feedback-option--feedback-button">PressMe</button>
</li>
<li>
Option
<button class="btn btn-default feedback-option--feedback-button">PressMe</button>
</li>
</ol>
</div>
<div class="hidden-xs col-sm-9">
Main Body
</div>
</div>
</div>
my CSS
.feedback-body--main-content {
background-color: #003B59;
}
.feedback-sidebar--main-content {
background-color: red;
}
.global--row-no-padding [class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
.feedback-option--feedback-button {
position: absolute;
top: -10px;
right: -30px;
}
.feedback-option-content {
position: relative;
list-style-type: none;
}
Mozilla has a good write-up of the order in which things are put on top of each other. Here's a summary:
Elements that appear first in the markup go under those that appear later.
Within each context (generally just the whole page), you can specify what order things stack with a z-index. Higher numbers are on top of smaller numbers.
Usually when absolutely positioning things you'll need to give it a z-index for it to show up right, assuming you'd like to keep your code in a semantically sensible order.