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
Related
I'm writing a landing page using bootstrap 4.3.1.
After adding the "row" div, the horizontal ruler disappears and I just can't get it back.
The funny thing is when I'm adding the commented section tag, I can see the horizontal line again.
Any suggestions to why it happens/how to make the horizontal line visible again without the section tag?
<div class="container">
<div class="row">
<header class="text-center">
<h1 class="text-uppercase"><strong>The biggest startup event of the year</strong></h1>
</header>
<!-- <section> -->
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
<!-- </section> -->
</div>
</div>
what you are trying to do is bit confusing as hr tag gives the horizontal line with width=100% and the row occupy a horizontal row
so think again is this possible, try to close the div of rows and then try to put the hr tag
<div class="container">
<div class="row">
<header class="text-center">
<h1 class="text-uppercase"><strong>The biggest startup event of theyear</strong></h1>
</header>
</div>
<!-- <section> -->
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
<!-- </section> -->
</div>
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>
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.
I'm attempting to correctly vertically align offsetting elements using Twitter Bootstrap with a fluid grid. (Note: Grid is customized to 30 columns)
Considering the red boxes, this is the attempted div placement: http://imgur.com/IkB2G
This is the current actual placement with my code: http://imgur.com/oJ2mG
Here is the code I am using. Unsure how to get the lower red box to move into the empty space above it, per the images.
<div class="container-fluid nomargin">
<div class="row-fluid span30 nomargin"><div style="height:10px"></div></div> <!-- Vertical spacing between menu and content-->
<div class="row-fluid">
<div class="span4"></div>
<div class="span16 white-box">
<!--Body content-->
<div style="height:100px"></div>
</div>
<div class="span6 white-box">
<!--Body content-->
<div style="height:300px"></div>
</div>
<div class="span16 white-box">
<!--Body content-->
<div style="height:100px"></div>
</div>
</div>
You need to think of it as 2 columns, and in the left column you have nested rows. I can't make out the proper sizes from the code you posted. But hopefully this code will give you some inspiration.
<div class="row">
<div class="span18">
<div class="row">
<div class="span18">This is a row on the left side.</div>
</div>
<div class="row">
<div class="span18">This is a row on the left side.</div>
</div>
</div>
<div class="span12">
This is the content on the right side.
</div>
</div>