I'm faced two issues
col-6 center text what should we do in order change to center,need change to row?
when the size is small, how to set image and text always at bottom
<div class="container-fluid ">
<div class="col-md-6 ser-first-grid text-center">
<img src="https://www.picwallz.com/wp-content/uploads/2017/02/wallpaper-landscap-sunrise-nature-view-hd-photos-famous-on-high-quality-for-pc.jpg" />
</div>
<div class="col-md-6 ser-first-grid text-center">
<h3>PRODUCT SOURCING</h3>
<p>We assist clients in sourcing suppliers to meet specific product requirements.</p>
</div>
</div>
<div class="container-fluid">
<div class="col-md-6 ser-first-grid text-center">
<h3>DESIGN DEVELOPMENT</h3>
<p>MALCORP possesses the capacity to design specific and specialized products to meet the most discerning of customer requirements.</p>
</div>
<div class="col-md-6 ser-first-grid text-center">
<img src="https://www.picwallz.com/wp-content/uploads/2017/02/wallpaper-landscap-sunrise-nature-view-hd-photos-famous-on-high-quality-for-pc.jpg" />
</div>
</div>
Check this jsfiddle out link
Use bootstrap flex-order here for responsive ordering of columns.More info Bootstrap flex-order
Add this class order-md-1 on second column and order-md-2 on first column.
As for the centering part, a text-center class on column should've worked.
Also you must put your columns inside rows.
Related
I have a Bootstrap-card but there is a problem with its width. I'd like to that card will take a full with of the column which I set. Here is a piece of code that I use and screenshot which presents actual width and wanted (with blue background).
Do you know any nice solution to make my goal fixed? Please take into consideration the responsive view.
<div class="row">
<ng-container *ngFor="let event of events">
<div class="col-12 col-lg-6 d-flex mt-5">
<!-- Card -->
<div class="card shadow-light-lg lift lift-lg">
<a class="card-body my-auto">
<div class="d-flex justify-content-between align-content-center align-items-center py-3">
<!-- some content -->
<h3 class="mt-auto">
{{event.title}}
</h3>
<div class="mb-0 text-muted" id="card-description">
{{event.description}}
</div>
</div>
</a>
</div>
</div>
...
</ng-container>
</div>
The width is not being applied properly. Either give width of 100%. Secondly you are using display-flex. So like parent has flex then items be given respective width.
Kindly share your code on stackblitz so we can better assist you. It will be much easier to debug.
So basically while making a simple website with Django and bootstrap 4.4 I came up with this issue. I was using 'cards' to add images of books in a grid format like in a bookstore web application. But the cards are not having equal dimensions.
How to align card images in bootstrap 4.4 so that all the cards have equal width and height while keeping it responsive to the window size change.??
My problem in the image below. As you can see there the cards are not of same size when i add different images it changes its size as well.
enter image description here
html
<div class="container">
<div class="row">
{% for book in object_list %}
<div class="col s3">
<div class="card">
<img class="img-fluid" src="{{book.book_image}}" alt="">
<div class="card-body">
</div>
</div>
<p class="text-white">{{book.name}}</p>
</div>
{% endfor %}
</div>
</div>
and .css
body{
background: white url('images/webbg.jpg') no-repeat center center;
background-size: cover;
}
Example image of what I actually want to have enter image description here
I want exactly like what there is in the above picture with images loading from my database in a loop.(so not hardcoded image links embedded in html code)
It sounds like you could use .card-deck to achieve your goals
https://getbootstrap.com/docs/4.4/components/card/#card-decks
If .card-deck won't work for you you can use the new Grid Cards. They allow you to select how many cards you want per row based on screen size. The don't automatically set themselves to being equal height however that is easily remedied by adding .h-100 to the cards.
As an example, if you wanted 4 cards per row after the xl breakpoint, 3 after md and 2 on mobile you would write the following. Note there is some margin on the columns to give them some space as they wrap.
<div class="row row-cols-2 row-cols-md-3 row-cols-xl-4">
<div class="col mb-4">
<div class="card h-100">
<!-- content -->
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<!-- content -->
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<!-- content -->
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<!-- content -->
</div>
</div>
</div>
I am having trouble with my css. I am trying to have my contact information, the quote, and my contact form to be in the same row but different columns. And also why is it that my html doesn't all fit on one page, I can scroll to the rigth and there's just empty white space. I figure its because I added -1.23em in my navbars margin; However, I only did this because my navbar was not filling the whole page. Here is a link to my gist and bitballon. Thank you in advance.
https://gist.github.com/bklynbest/a19565b1b5289f045919e76d657848ea
http://sad-goodall-e4f115.bitballoon.com
You have a .row div in the nested directly under the body on line 103 that is causing the page to spread past 100% width
Bootstrap requires a containing element to wrap site contents and
house our grid system. You may choose one of two containers to use in
your projects. Note that, due to padding and more, neither container
is nestable. bootstrap containers
Regarding the contact info your nesting and class names are not correct, you currently have the following:
<div class="container-fluid" id="contact">
<div class="row">
<div class="column">
<div class="col-xs-12 col-md-12">
<div id="quote">...</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="contact">...</div>
</div>
</div>
</div>
</div>
<form>
you will need to change this to follow bootstrap3 grid conventions, something like the following:
<div class="container">
<div class="row" id="contact">
<div class="col-sm-4">
<div id="quote">...</div>
</div>
<div class="col-sm-4">
<div class="contact">...</div>
</div>
<div class="col-sm-4">
<form>
</div>
</div>
</div>
I have the following structure of my page:
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<div class="picture">
<div class="row" style="margin-left:0px !important;margin-right:0px !important;padding-bottom:10px;">
<div class="col-md-1">
<img src="url" />
</div>
<div class="col-md-11">
Some name <br/>
Some email
</div>
</div>
</div>
</div>
<div class="col-md-3">
some text here
</div>
</div>
</div>
My issue is that when device width is smaller, name and email goes on the next row but not in the same row where image is. How to fix that? It should be responsive. Thanks!
Every column at a mobile breakpoint will have a width of 100%, which means your .col-md-* classes will all have a width of 100% at smaller sizes. This is a common expectation for responsive grid systems.
To get the image and inputs on the same line, you will have to add another class that overrides the widths set by the bootstrap col classes. Bootstrap has specific classes to target different breakpoints that you can use. See: https://getbootstrap.com/examples/grid/
HTML
<div class="col-md-1 col-xs-6">
<img src="url" />
</div>
<div class="col-md-11 col-xs-6">
Some name <br/>
Some email
</div>
This should do the trick.
I'm using a Bootstrap grid to create a quad chart, and leveraging the CSS3 flexbox layout mode discussed here to make each column in the same row the same height. However, I want to use a Bootstrap well in each quad to highlight the "quad-ness" of the chart and I can't seem to figure out how to get the wells to fill all the space in the column divs.
<div class="row row-eq-height">
<div class="col-md-6">
<div class="well">
hello<br/>world<br/>how<br/>are<br/>you?
</div>
</div>
<div class="col-md-6">
<div class="well">
hi!
</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-md-6">
<div class="well">
hi!
</div>
</div>
<div class="col-md-6">
<div class="well">
hello<br/>world<br/>how<br/>are<br/>you?
</div>
</div>
</div>
I have a playground here (be sure to go full screen on the result to see the quad chart).
I tried modifying the well class' CSS to set height to 100%, but that just seems to increase the height of the outer divs as well (example here).
Any ideas how I can get the wells to fill up the divs they're in without increasing the height of the divs?
Edit #1
To be clear, I'm not asking how to get all of the columns in a row the same height. The Flexbox solution using the row-eq-height class does that for me.
What I'm trying to figure out is how to make the Bootstrap well within a column div be the full height of the column div, regardless of how much content the well contains.
I've updated my two examples (linked above) to include border lines around the column divs to try and better articulate what I'm talking about.
Check this DEMO
<div class="row row-eq-height">
<div class="col-xs-6 "><div class="well">column 1</div></div>
<div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>
</div>
<div class="row row-eq-height">
<div class="col-xs-6 "><div class="well">column 1</div></div>
<div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>
</div>