I've got problem with self-created sidebar in admin panel. It works fine on desktop, but I want that in mobile it should change position to top.
At this moment it looks like this:
LINK
<div class="col-3" id="sticky-sidebar">
<div class="sticky-top">
<div class="card-body" align="center">
<h4>Admin Panel</h4>
<div class="nav flex-column" align="center">
<div class="sidebar-menu-header">
<h5>Site</h5>
</div>
<button class="btn btn-outline-dark nav-link btn-admin active">Statystyki cmentarza</button>
<button class="btn btn-outline-light nav-link btn-admin dropdown-btn" data-toggle="dropdown">Osoby pochowane</button>
<div class="dropdown-container">
<a class="nav-link" href="#">Ewidencja osób</a>
<a class="nav-link" href="#">Dodaj zmarłego</a>
</div>
</div>
</div>
</div>
</div>
I use class - sticky-top to get it on site. I know that if I use something like this:
#media(max-width: 650px){
#sticky-sidebar{display: none;}
}
It should hide it. Eitherway I wanted to move it when it's on small screen to top of the site under the navbar.
It works and hide it, you can create a new navbar who displays only under 650px
#my-new-navbar {
display: block;
}
#media screen and (min-width: 650px){
#my-new-navbar{display: none;}
}
or you can use col-md-3, by default your navbar takes 100% width.
<div class="col-md-3" id="sticky-sidebar">
...
</div>
Im using bootstrap and I want that in medium, large and extra large devices get the first layout of the image below, where there is a image at the left and then some information at right. And these 2 areas (the image and the informations div) occupy the full .container div width and have always the same height.
Then in smaller devices I want to get the layout in the image below, where the image is above and the informations below.
Image to demonstrate the layout that Im trying to get:
Image:
enter image description here
But Im getting this: https://jsfiddle.net/ce228caL/
Do you know how to properly get the layouts of the image?
html:
<div class="container py-md-5">
<div class="row justify-content-md-center">
<div class="col-12 col-md-auto">
<img style="width: 100%; height: auto" src="http://via.placeholder.com/1000x400"/>
</div>
<div class="col col-lg-2 d-md-flex">
<div class="d-none d-md-block details-title d-flex flex-column align-items-start">
<span class="font-size-sm font-weight-semi-bold">Title</span>
<h1 class="h5 mb-0 title">Subtitle</h1>
Link
</div>
</div>
</div>
</div>
css
.title{
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid $light-gray;
padding: 1rem;
margin-top: 1rem;
}
.subtitle{
margin-top: 1rem;
}
.link{
margin-top: 1rem;
}
You specified your first div to have all 12 columns on every screen size
<div class="col-12 col-md-auto">
Reduce it to 10 on medium and up, so the 2nd 2-column div will fit in the row. also set the 2nd div to col-md-2, so it occupies 2 columns on medium. Also, I am not sure why you would want to solve this using flexbox instead of the classic grid
<div class="container py-md-5">
<div class="row">
<div class="col-md-10 col-12">
<img style="width: 100%; height: auto" src="http://via.placeholder.com/1000x400"/>
</div>
<div class="col col-md-2 col-12">
<div class="d-none d-md-block details-title d-flex flex-column align-items-start">
<span class="font-size-sm font-weight-semi-bold">Title</span>
<h1 class="h5 mb-0 title">Subtitle</h1>
<span class="subtitle font-size-sm font-weight-semi-bold">Subtitle 2</span>
Link
</div>
</div>
</div>
</div>
I have 2 buttons:
<div class="row pt-20">
<div class="col-xs-12 col-sm-6 text-right pr-20">
<a href="{!! URL::action('TournamentController#create') !!}" type="button"
class="btn border-primary btn-flat text-primary disabled text-uppercase p-10 ">{{ trans('core.see_open_tournaments') }}
{{--( {{trans('core.soon')}} )--}}
</a>
</div>
<div class="col-xs-12 col-sm-6 text-left pl-20">
<a href="{!! URL::action('TournamentController#create') !!}" type="button"
class="btn btn-primary text-uppercase p-10">{{ trans('core.create_new_tournament') }}
</a>
</div>
</div>
What I would like to achieve is align right/left when resolution > xs, and align center when res = xs.
What is the best way to achieve it???
I was thinking remove text-right in div, and use media queries to do it in css, but I think there is more elegant way to do it, isn't it????
Tx!
Create a class called text-center-xs and add the appropriate styles to your custom stylesheet:
#media (max-width: 767px) {
.text-center-xs {
text-align: center;
}
}
How to center a row (12 column) in Bootstrap 3 ?
I do not want to use the offset
I am using this way but not worked.
.col-centered{
float: none;
margin: 0 auto;
}
<div class="row" style="max-width: 300px;">
<div class="col-md-12 col-xs-12 col-centered">
<div class="input-group">
<div class="input-group-btn">
<button id="ItemForSearch" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
All Items
<span class="caret"></span>
</button>
<ul id="NormalSearch" class="dropdown-menu customize-dropdown-menu">
<li> Test 1 </li>
<li> Test 2 </li>
<li> Test 3 </li>
<li> Test 4 </li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
</div>
Is there any solution to this? I have not an idea for this work.
Why not using the grid system?
The bootstrap grid system consist of 12 columns, so if you use the "Medium" columns it will have a 970px width size.
Then you can divide it to 3 columns (12/3=4) so use 3 divs with "col-md-4" class:
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
Each one will have 323px max width size.
Keep the first and the last empty and use the middle one to get your content centerd:
<div class="col-md-4"></div>
<div class="col-md-4">
<p>Centered content.</p>
</div>
<div class="col-md-4"></div>
What you are doing is not working, because you apply the margin: auto to the full-width column.
Wrap it in a div and center that one. E.g:
<div class="i-am-centered">
<div class="row">...</div>
</div>
.
.i-am-centered { margin: auto; max-width: 300px;}
http://www.bootply.com/93751
Its a cleaner solution anyway, as it is more expressive and as you usually don't want to mess with the grid.
I know this question was specifically targeted at Bootstrap 3, but in case Bootstrap 4 users stumble upon this question, here is how i centered rows in v4:
<div class="container">
<div class="row justify-content-center">
...
More related to this topic can be found on bootstrap site.
Instead of
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
You could just use
<div class="col-md-4 col-md-offset-4"></div>
As long as you don't want anything in columns 1 & 3 this is a more elegant solution. The offset "adds" 4 columns in front, leaving you with 4 "spare" after.
PS I realise that the initial question specifies no offsets but at least one previous answer uses a CSS hack that is unnecessary if you use offsets. So for completeness' sake I think this is valid.
you can use grid system without adding empty columns
<div class="col-xs-2 center-block" style="float:none"> ... </div>
change col-xs-2 to suit your layout.
check preview: http://jsfiddle.net/rashivkp/h4869dja/
We can also use col-md-offset like this, it would save us from an extra divs code. So instead of three divs we can do by using only one div:
<div class="col-md-4 col-md-offset-4">Centered content</div>
Simply use text-center class
<div class="row">
<div class="col-md-12">
<h3 class="text-center">Here Comes your Text</h3>
</div>
</div>
Add this to your css:
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
Then, in your HTML code:
<div class=" row row-centered">
<div class="col-*-* col-centered>
Your content
</div>
</div>
this peace of code can help you
<div class="row" style="display: flex; justify-content: center;"></div>
Try this, it works!
<div class="row">
<div class="center">
<div class="col-xs-12 col-sm-4">
<p>hi 1!</div>
</div>
<div class="col-xs-12 col-sm-4">
<p>hi 2!</div>
</div>
<div class="col-xs-12 col-sm-4">
<p>hi 3!</div>
</div>
</div>
</div>
Then, in css define the width of center div and center in a document:
.center {
margin: 0 auto;
width: 80%;
}
I use text-align-center in a row like this
<div class="row tac">
<h1>Centered content</h1>
</div>
<style>
.tac { text-align: center}
</style>
I use this peace of code and I have successeful
<div class="row center-block">
<div style="margin: 0 auto;width: 90%;">
<div class="col-md-12" style="top:10px;">
</div>
<div class="col-md-12" style="top:10px;">
</div>
</div>
Instead of trying to center div's, just add this to your local css.
.col-md-offset-15 {
margin-left: 12.4999999%;
}
which is roughly offset-1 and half of offset-1. (8.333% + 4.166%) = 12.4999%
This worked for me.
I'm trying to customize the bootstrap gallery full screen starting from this tutorial bootstrap gallery full screen
the code:
<div class="container fill">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item">
<div class="fill" style="background-image:url('http://www.mysite/images/category/image.jpg');background-position: center;">
<div class="container">
<div class="carousel-caption">
<h1>TITLE</h1>
<p class="lead">Description</p>
</div>
</div>
<a class="btn btn-large btn-primary" href="categories.php?id=17">View Gallery</a>
</div>
</div>
</div>
<div class="pull-center">
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
as you can see, the class that contains the button "View Gallery"
is positioned within the classes "item" and "fill"
<a class="btn btn-large btn-primary" href="categories.php?id=17">View Gallery</a>
For graphic reasons, I have to place the button in the fixed position at the bottom right of the screen, but must remain within the original classes.
I have tried in various ways, but I can not get it on the visualization for mobile devices.
for example, I'm trying to optimize viewing on iphone5 (640 x 1136) #media (max-width: 768px) using this class applied to the button:
.gallery-button {
text-align:right;
background-color: transparent;
position: fixed;
max-width: 100%;
padding: 0 20px;
top: 350px; left:150px;
}
In portrait mode would be fine, but in lanscape the button disappears.
ok, how can I solve the problem for all types of display?
Thanks
To fix for all scenarios, you should specify the position from bottom and right if you want it in the bottom right.
.gallery-button {
position: fixed;
bottom: 5px;
right: 5px;
}
That should fix your problem for all screen sizes.