Bootstrap 4 - Multi row cards are not responsive correctly - html

I'm trying to make my cards row responsive with some margin but when I apply margin:5px; to my cards, the row overflows. They are not aligned at the center correctly. There is some space left on the right side of the cards. How can I make them aligned at the center properly?
Here is my HTML and CSS:
http://codepen.io/reklamarsiv/pen/vgPLLv

You need to put the padding and margin inside of the col-* tags. Create a div inside with the class of card instead of putting the class of card in the same div.
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="card">
// contents of card...
</div>
</div>
Updated codepen: http://codepen.io/anon/pen/rjRpQd

Related

Why is my Bootstrap column not centering its content?`

I have the following basic layout, in which to show a flash-card - the detail-card:
<div class="col-md-4"></div>
<div id="cardContainer" class="col-md-4 text-center detail-card-container">
#Html.Partial("_DetailCard", cardModel)
</div>
<div class="col-md-4"></div>
I know I could just use col-offset but I have plans for the other two columns.
My vision here was to divide the page into three columns, give the middle one, detail-card-container, class text-center so that the content of that div should be horizontally centered inside it.
Yet when I start up the app, I get a display as follows:
The blue is the available space in the detail-card-container for the 'detail-card, outlined in red. The detail card is fixed width 200, and the available space is about 400+ .This is displaying at the left of its available space, not in the centre as intended. The empty spaces to the left and right of the green in the image are the emptycol-md-4` divs.
What am I doing wrong?
Maybe you could give a specific width, display: block, plus margin-left: auto, margin-right: auto.
Use
<div class="col-md-4" align="center">

Responsive, alternating divs with CSS and Bootstrap's grid system

I am attempting to create a pattern of two divs, side by side, repeating vertically. One side is to contain an image (which I've done using CSS background image) and the other text. The side which contains the image alternates each row.
The divs use the Bootstrap grid's col-sm-6 class. It looks great on desktop but I'm having trouble getting it to look good on smaller devices.
The issue is that because of the order in which the code is written, when it collapses down to 100% width on mobile it goes:
image
text
text
image
image
text
instead of:
image
text
image
text
image
text
The only workaround I've thought of so far is to have two of each image div, one before and one after the text div, and to hide or display them based on the size of the screen. Not a great solution though. Any thoughts?
put your content like following
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
This will give you what you want
In the end I put them all in the same order and then went with this:
.campaign-idea:nth-child(odd) {
.image {
float: right;
}
}

Is it ok to use col class inside col class in bootstrap?

I want to draw a line below a paragraph with hr element. The propbelem is that the p element has 15px padding in bootstrap but the hr element spans to the full available width. The line below the paragraph extends 15px left and 15 right to the paragraph's width. So I just did the following:
<div class="row">
<div class="col-lg-12 text-justify">
<p>
Some text is here.
</p>
</div>
<div class="row">
<div class="col-lg-12"> <div class="col-lg-12"><hr></div></div>
</div>
I nested col-lg-12 directly inside col-lg-12. But in bootstrap we ought to nest .col inside .row classes. So is it okay use col class inside col class here?
No. It's not a Bootstrap best practice since as you mentioned col should be inside row.. The effect will be extra spacing on the left and right side of the inner col. The inner columns will wrap and not layout horizontally as expected.
"content must be placed within columns and only columns may be
immediate children of rows"

Bootstrap - Aligning two rows accordingly / padding

i want to create a responsive webpage with twitter bootstrap. I have a picture which should be a certain width and a bar with a background color which should have the same width and both should be aligned on the left and right side.
As Bootstrap uses padding-left:-15px; padding-right:-15px; I have this effect:
http://codepen.io/anon/pen/thsgC
This confuses me. How can I align both rows with Bootstrap accordingly without overwriting bootstraps own css classes .row and .col-xs-12
Thanks.
In Bootstrap the col-* class has padding on it. To get around it you can either override it (not recommended) or place the background coloured div inside another div:
<div class="col-xs-12">
<div class="navigation">color</div>
</div>
Like this http://codepen.io/anon/pen/ixcmg
Actually both rows are aligned correctly. The problem is in the first row, image element is child of col-xs-12 element while in second row, navigation class is on the same div element which has col-xs-12 element
try to put navigation class in child element of col-xs-12 like this
<div class="row">
<div class="col-xs-12">
<div class = "navigation">
color
</div>
</div>
</div>
also its not good practice to overwrite bootstrap's own classes, you can give extra class to the element which should be used to overwrite bootstrap css property values.

Bootstrap 3 divs positioning

I have a layout that i need to build as can be seen in the image:
Grey stands for header, and there are no problems there. As for the body, I've split it into 3 divs as follows:
<div class="row">
<div class="col-lg-3">
<p>text positioned right here</p>
</div>
<div class="col-lg-6">
<img src="path/to/image.jpg">
</div>
<div class="col-lg-3">
<p>text positioned right here</p>
</div>
</div>
The problem I have is that I need that text to be vertically centered, and I don't know how. I've tried this solution Twitter Bootstrap 3, vertically center content but it doesn't seem to work for me (maybe I'm doing something wrong). I've tried adding padding-top to fix it, but it messes up the mobile display (as expected).
Please, can anyone help?
Thank you.
Text align property is only for horizontal text align, if you want to make text align vertically you need to use position property, we can make using text align something like that. for example: use center of the screen property.
position:relative;
left:50%; top:50%;
also minus margin property off of the container with.
The simplest way to center vertically is to add display:table to the containing element, and display:table-cell to the element you want centered. Bootstrap has a .text-center class to handle the horizontal centering.
http://www.bootply.com/lTigluKakK
Using your example as template:
<div class="col-xs-3 text-center v-align-container">
<p class="v-align-content">text positioned right here</p>
</div>
<div class="col-xs-6 text-center">
<img src="//placehold.it/400x400">
</div>
<div class="col-xs-3 text-center v-align-container">
<p class="v-align-content">text positioned right here</p>
</div>
CSS:
.v-align-container{display: table;height:400px} /* height set to match img (plus padding if needed) */
.v-align-content{display:table-cell;vertical-align:middle}
This works great if you're able to define the height of the sidebar divs. But, if you need them to match the height of the center element dynamically, you'll need a little more bootstrap magic to tie them together, but this will still apply to centering the content within those sidebars.