I'm working with a 16 columns Bootstrap.
The design I'm trying to achieve is it:
And my code is it:
<div class="row">
<div class="col-xs-12 col-xs-offset-1">
<!-- Images goes here -->
</div>
<div class="col-xs-3">
<!-- Paginator Links -->
</div>
</div>
The main problem is that inside my col-xs-12 div, I have 3 big columns with an image inside each one and in this "scope" my columns are reseted to 16 so I cant divide it by 3.
Am I doing it the right way?
If you're using a 16-column Boostrap you could still use the top-level grid as long as you don't nest other .row elements.
Instead of
<div class="col-xs-12 col-xs-offset-1">
<!-- images here -->
</div>
Try using:
<div class="col-xs-4 col-xs-offset-1">
<!-- image here -->
</div>
<div class="col-xs-4">
<!-- image here -->
</div>
<div class="col-xs-4">
<!-- image here -->
</div>
If you run into problems with columns not floating properly you could use a .clearfix method.
Related
I want to make something like this image in bootstrap 5 .
image
also I want to add image inside every three of them . How can I Do this with the bootstrap grid system?
This should be the raw Bootstrap flex box based layout for your design:
<div class="container">
<div class="row">
<div class="col-6">
<div class="row flex-column">
<div>
<img>
</div>
<div>
<img>
</div>
</div>
</div>
<div class="col-6">
<img>
</div>
</div>
</div>
i have 3 divs in a bootstrap well
i want my btn-groups on the same line, the first on the left, the second in the center and the last one on the right
is it possible ?
i don't want to use an external CSS file
<div class="well">
<div>
Unit of time
<div class="btn-group">
<!-- button -->
<!-- button -->
<!-- button -->
</div>
</div>
<div>
Offset
<div class="btn-group">
<!-- button -->
<!-- button -->
</div>
</div>
<div>
Dates padding
<div class="btn-group">
<!-- button -->
<!-- button -->
</div>
</div>
You can get it 3 in a row by using bootstrap grid system as like,
<div class="container">
<div class="row">
<div class="col-xs-4>
</div>
<div class="col-xs-4>
</div>
<div class="col-xs-4>
</div>
</div>
</div>
Yes it's, you can simply use a grid, by adding each button group in a column, the three button in a row and the whole group inside a container
See an example there : http://getbootstrap.com/css/#grid
Is there any way that i achieve this design but still using the bootstrap griding system?
I want to make that design. In the sides of the div there should be an accordion like div so that i can click to close the div. I tried using col-md-5 but the grid is to much space just for side panel like. I just want a small div in right side and left side.
What about putting the text <div> inside the <div class="col-md-6">
It would be something like this :
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-1">
<!-- text -->
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-offset-11 col-md-1">
<!-- text -->
</div>
</div>
</div>
</div>
</div>
I have a container that contains two rows. I want there to be a border around the container (not between the two rows). When I tried to set a border around the container, it gave me a border between the two rows - not sure what I should be doing differently here.
<div class="container-fluid" style="border:1px solid #cecece;"
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Text here </div>
</div>
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Buttons here </div>
</div>
</div>
Your code is almost perfectly fine.
Look at first line of it - > is missing.
See working example below.
http://jsfiddle.net/864cw2fn/
<div class="container-fluid" style="border:1px solid #cecece;">
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Text here </div>
</div>
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Buttons here </div>
</div>
</div>
<div class="container-fluid table-bordered">
<div class="row">
<!-- Need to add theme, buttons -->
<div class="col-xs-12"> Text here </div>
</div>
</div>
So basically I want to have 2 extra panels show up on the left and right on md and higher, but hide it when on sm and xs. The hiding works fine, but not the showing.
They do show up on the left and right, but the problem is the spacing between the crumbs and navigation. The crumbs get pushed down as I add content to the right panel. When I add to the left panel it gets pushed to the side..
Nothing on the left but something on the right is the same as the first picture
Here's what I mean:
I need it to be on the third picture so that crumbs stay right below nav.
Here's my code:
<div class="container">
<h1>Bootstrap grid (Bootstrap)</h1>
<div class="site-box">
<div class="container-fluid">
<div class="row">
<!-- HEADER -->
<!-- Logo -->
<div class="col-xs-4 col-md-3">
logo
</div>
<!-- Search -->
<div class="col-xs-8 col-md-6">
search
</div>
<!-- Control Panel -->
<div class="col-xs-12 col-md-3">
control panel
</div>
</div>
<div class="row">
<div class="col-md-3 hidden-xs hidden-sm">
extra panel
</div>
<!-- NAVIGATION -->
<div class="col-xs-12 col-md-6">
nav
</div>
<div class="col-md-3 hidden-xs hidden-sm">
extra panel
</div>
<div class="clearfix visible-md-block"></div>
<!-- Crumbs -->
<div class="col-xs-12 col-md-6 col-md-offset-3">
crumbs
</div>
</div>
</div>
</div>
</div>
If you want the crumb to stay under nav, then put both in one container with col-md-6, and give them both col-md-12.
The reason I suggest that is because it looks like the content in 'extra panel's changes (pic 2 to pic 3), so affecting the height of the 'extra panel's.Getting crumb to sit in the middle with the container heights next to it changing could be challenging.