This question already has answers here:
Center a column using Twitter Bootstrap 3
(34 answers)
Closed 8 years ago.
Is there a alternative way to write to have content in the middle and blank on both sides?
For example:
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="form-group">
....
</div>
</div>
<div class="col-md-3"></div>
You might take a look at bootstrap offset property
Your code might look something like this:
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
....
</div>
</div>
Related
This question already has answers here:
One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
(1 answer)
Bootstrap with different order on mobile version
(3 answers)
Closed 3 years ago.
I have the following order of cols in Bootstrap in desktop screen:
COL-A COL-B COL-C
<div class"container">
<div class="row">
<div class="col-lg-4 col-md-4">Text 1</div>
<div class="col-lg-4 col-md-4"><img src="myimage"></div>
<div class="col-lg-4 col-md-4">Text 2</div>
</div>
</div>
When I change my screen to medium size (min width: 768px to 990px), I want to achieve the next:
Thanks in advance for your help.
If I'm understanding your diagram, just do two columns of half-width, with the 2nd column having two rows within it containing full width columns.
Something like:
<div class="row">
<div class="col-sm-6">Column 1</div>
<div class="col-sm-6">
<div class="row">
<div class="col">Column 2</div>
</div>
<div class="row">
<div class="col">Column 3</div>
</div>
</div>
</div>
The sm breakpoints and width numbers should be optional if you're only doing these.
This question already has answers here:
Center the content inside a column in Bootstrap
(7 answers)
Closed 4 years ago.
I am trying to use the bootstrap 4 grid system to center a single column. In bootstrap 3 I was able to do:
<div class="col-md-10 col-md-offset-2">
</div>
In bootstrap 4 the same does not work even when using the new offset class: offset-md-2.
The following works, but something feels wrong about having empty columns on the page, just to center a col-md-5.
<div class="row">
<div class="col"></div>
<div class="col-md-5 align-self-center">
<img src="img/myimage.gif" style="width: 100%;">
</div>
<div class="col"></div>
</div>
As per the documentation you can use justify-content-center on the row to center any number of columns in a row.
<div class="row justify-content-center">
<div class="col-4">
One centered column
</div>
</div>
You can add
justify-content-center
on "row" div.
so it would be something like this:
<div class="container">
<div class="row justify-content-center">
<div class="col-2">
//content ...
</div>
</div>
</div>
This is an example from the official bootstrap documentation
https://getbootstrap.com/docs/4.0/layout/grid/
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 4 years ago.
I'm trying to come up with a CSS-only solution to target any cards that only have headers in them with no body (so that they can automatically have no margin-bottom). I realize I am most likely missing a relatively basic concept of CSS here, so I don't mind if this question isn't "solved" per se, but that I understand why this isn't valid.
Thank you
Edit: here is the example HTML to pair with this. Sorry about that.
I would want to be able to target this .card-header, but not the .card-header of the example below this.
<div class="row">
<div class="col-sm-12">
<div class="card card-default">
<div class="card-header">Card Title</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card card-default">
<div class="card-body">
<div class="row">
<div class="col-sm-12">
<p>What information do we want here?</p>
</div>
</div>
</div>
</div>
</div>
</div>
Does that make more sense? I'm not trying to target the .card, so it isn't that I'm trying to target a parent, but rather a sibling when a specific sibling doesn't exist.
This question already has answers here:
Bootstrap Grid System new line does not look nice
(4 answers)
Closed 6 years ago.
I have 4 divs, div 2 is very lengthy,
div 1,3,4 are of equal sizes,
I want them to display in a compact form,
but it displays full contents of div2 then only displaying div3 ,it displays div 3 as a new row after all the contents of first row
<div class ="row">
<div class="col-xs-12"> //content 1 </div>
<div class="col-xs-12"> //content 2 </div>
</div>
<div class ="row">
<div class="col-xs-12"> //content 3 </div>
</div>
<div class ="row">
<div class="col-xs-12"> //content 4 </div>
</div>
please help me
Solved the problem myself
Used row inside col div
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12"></div>
<div class="col-xs-12"></div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12"></div>
</div>
</div>
</div>
This question already has answers here:
Remove spacing between cols
(11 answers)
Closed 6 years ago.
I have a bootstrap, 3 column web page. Currently there is a small amount of space between each column that I would like to remove. How can I do this without editing the bootstrap.css file? Thank you.
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="customDiv">
<div id="collapsible-panels">
<p>Question One goes here?</p>
<div><p>Page 2</p></div>
<p>Question Two goes here?</p>
<div><p>Answer to Question Two goes here.</p></div>
<p>Question Three goes here?</p>
<div><p>Answer to Question Three goes here.</p></div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="customDiv">Main Content Area</div>
</div>
<div class="col-md-2">
<div class="customDiv">Right Side Bar</div>
</div>
</div>
</div>
Remove padding-left & padding-right from col-*-* classes in a new css file by giving them an additional class (in my case div-holder), like:
CSS:
.div-holder {
padding-left: 0;
padding-right: 0;
}
HTML:
<div class="container">
<div class="row">
<div class="col-md-2 div-holder">
<div class="customDiv">
<div id="collapsible-panels">
<p>Question One goes here?</p>
<div><p>Page 2</p></div>
<p>Question Two goes here?</p>
<div><p>Answer to Question Two goes here.</p></div>
<p>Question Three goes here?</p>
<div><p>Answer to Question Three goes here.</p></div>
</div>
</div>
</div>
<div class="col-md-8 div-holder">
<div class="customDiv">Main Content Area</div>
</div>
<div class="col-md-2 div-holder">
<div class="customDiv">Right Side Bar</div>
</div>
</div>
</div>