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>
Related
Sorry for my English...
My code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"> </script>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="product-grid">
<div class="product-image">
<a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
<img alt="" class="bild" src="photo/111.jpg">
</a>
</div>
<div class="product-content">
<a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
<p class="title">Mochila doble tirantes Violeta</p>
</a>
</div>
<div class="price">$16.00</div>
<div class="div-zoom">
<span class="zum-warenkorb">zum warenkorb hinzufügen</span>
<a href="#">
<i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color: #595959; padding: 3%;" data-toggle="modal" data-target="#zoomWindow"></i>
</a>
</div>
</div>
<div class="modal fade" id="zoomWindow" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close text-right" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-body">
put here, whaterver you want
</div>
</div>
</div>
</div>
</div>
</div>
I to want the modal window open beside from original image.
I tried with flex in <style>,
.modal-content {
/* Styles to make the modal visible */
display: flex !important;
opacity: 1 !important;
margin-top: 500px;
}
.modal-dialog {
justify-content: left !important;
}
.modal-content {
width: left !important;
}
But because of modal open per default at the top, to come this image,
I to want which modal centred the open window and it open besides from the original image.
Can please someone help me with this problem, Thanks!
What you want is not easily achievable, as Bootstrap modal wasn't developed for this purpose. That's not to say it can't be done, but rather that there are better UX solutions than trying to crowbar a modal into this UI behavior.
That's because Bootstrap modal is designed to completely ignore the layout of the page over which it renders and to occupy the entire viewport. It also disables scrolling on the page while it's open and it creates a backdrop at <body> level which covers the entire page.
A better approach for your use case would be to dynamically inject the product into the modal and display it there.
Another possible solution is to use a Bootstrap popover (which was pretty much designed for your use case - a "modal" relative to a particular element). Think of it as the result of breeding a tooltip with a modal. But the more it is like a modal, the bigger UI problems it's going to generate.
In my opinion, popovers break a lot of UX best practice principles and typically require a lot of fixes/workarounds for various device + platform combos. Overall they tend to make your application more brittle, your code less flexible, so I strongly advise against using them.
As far as I'm concerned, the only decent solution is to disable popovers on mobile devices and provide a mobile-friendly alternative (accordion, modal, drawer). But, if you're gonna do that, why not try to be consistent and provide the same alternative on desktops as well, adapted to the extra available space?
If you need help implementing either solution, please consult Bootstrap documentation for a) dynamically injecting content into modals or b) using popovers.
If you run into any trouble, I suggest you ask a new question focusing that specific problem.
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.
I'm trying to structure a Bootstrap nav bar such that I can have both left and right aligned content, while working for both desktop & mobile screens. I have a feeling like I'm trying to have my cake and eat it too here, but I would imagine that this should be possible.
Note that in the screenshots below, the hamburger menu icon is just a custom image (e.g., not the default Bootstrap nav bar collapse icon).
This is what I want my mobile view to (roughly) look like:
But what I'm getting is this:
Here is the desktop version, only for comparison:
And finally, here is the code I'm working with:
<div id="navbar" class="navbar navbar-custom navbar-custom-bordered-header">
<div class="navbar-header">
<div class="navbar-brand">
<img class="navbar-menu-button-custom" src="/assets/menu_button.png"/>
</div>
<a class="navbar-brand navbar-custom-brand" href="<%= root_path %>">My App</a>
</div>
<ul class="nav navbar-nav navbar-right" style="margin-right: 15px; width: auto;">
<div class="navbar-brand">
<a id="search" href="#"><span class="glyphicon glyphicon-search" style="color: white;" aria-hidden="true"></span></a>
</div>
</ul>
</div>
I'm just not sure what I need to do to achieve my desired view above. I can see that the problem appears to boil down to navbar-header's width being too large:
But I'm not sure how to enforce a smaller width for navbar-header or just one that hugs navbar-header's content. Any thoughts?
Add this to your css file.
#media (max-width: 768px) {
.navbar-header {
max-width: 250px;
}
}
You may have to change 768 and 250 values according to your bootstrap setting. But most probably this will do.
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.
I need to achieve something like this:
<a style="display:block;" href="#">
<div style="float:left;display:block;">Left</div>
<div>
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
</a>
Basically a button with 2 columns and the right column having 2 rows.
It shows up correctly in modern browsers with inline/block support but in IE6 and IE7, whenever I hover the left div (with float) it'll display as the 'select' text icon instead of the hand icon (i believe once float, block will be cancelled and displayed as inline). Is there any way I can achieve this without using an image as a whole? I need it to be text because it's important for SEO and retina displays.
:( :(
<a href="http://www.google.com/" target="_blank" style="display:block; overflow: hidden" href="#">
<div style="float:left; width:150px;">Left</div>
<div style="float:right; width:150px;">
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
<div style="clear: both;"></div><!-- This will clear the floats for IE -->
</a>
To avoid text cursor add this CSS -
a div{cursor: pointer;}
Demo - http://jsfiddle.net/ZhKmr/4/