This question already has answers here:
Center a column using Twitter Bootstrap 3
(34 answers)
Closed 5 years ago.
I am currently using the center column of this code for my content.
<div class="row ">
<div class="col-md-3">
</div>
<div class="col-md-6">
<h3>
Title
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3">
</div>
</div>
The two <div class="col-md-3">elements are only placed there so the content of <div class="col-md-6"> is centered. Is there another way for me to have a centered box without having two additional empty elements. I assume there is a row attribute I can use or some other approach.
A small minimal example is appreciated.
Thanks
The other way is using offset...
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-offset-3"></div>
<div class="col-xs-3"></div>
</div>
</div>
Demo: http://codeply.com/go/HV3yrjxKtB
Taken from the docs: add the class .row-centered to the row and .col-centered to the columns.
<div class="container">
<div class="row row-centered">
<div class="col-xs-6 col-centered"></div>
<div class="col-xs-6 col-centered"></div>
<div class="col-xs-3 col-centered"></div>
<div class="col-xs-3 col-centered"></div>
<div class="col-xs-3 col-centered"></div>
</div>
</div>
Related
Using Bootstrap 4 Grid system, I have the following structure:
https://i.imgur.com/Qa0xXAk.png
I have the content column and two blank columns inside each row.
Sometimes I need to apply CSS style to the whole row.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
Lorem ipsum
</div>
<div class="col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
dolor sit amet,
</div>
<div class="col-sm-3"></div>
</div>
....
<div class="row custom-background-color">
<div class="col-sm-3"></div>
<div class="col-sm-6">
consecteur adipiscing elit,
</div>
<div class="col-sm-3"></div>
</div>
</div>
But in the same time it becomes not handy to have multiple duplicate code. I want to regroup the code, to have column definition only once.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<div class="row">Lorem ipsum</div>
<div class="row">dolor sit amet,</div>
...
<div class="row custom-background-color">consecteur adipiscing elit,</div>
</div>
<div class="col-sm-3"></div>
</div>
</div>
I expect to have the CSS style not for one column, but for the whole page width.
Is it possible to make a workaround or find solution to solve the problem?
Yes it is possible if you have the same amount of rows in each column.
Then, you can use the nth-child selector to pass styles to e.G. the fifth row in each column.
div[class^="col"] .row:nth-child(2) {
background: green;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="row">ipsum</div>
<div class="row"> amet,</div>
<div class="row"> elit,</div>
</div>
<div class="col-sm-6">
<div class="row">Lorem ipsum</div>
<div class="row">dolor sit amet,</div>
<div class="row">consecteur adipiscing elit,</div>
</div>
<div class="col-sm-3">
<div class="row">Lorem ipsum</div>
<div class="row">dolor</div>
<div class="row">consecteur</div></div>
</div>
</div>
i try to use bootstrap portfolio-item in datalist
the code is
<div class="row">
<asp:Panel ID="Pnl_prodL" runat="server" Width="100%">
<asp:DataList ID="dlst_prodNP" runat="server" OnItemDataBound="dlst_prodNP_ItemDataBound" RepeatColumns="2" DataKeyField="id" Width="100%">
<ItemTemplate>
<div class="col-lg-6 portfolio-item" style="background-color: red">
<div class="card h-100">
<a href="#">
<img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
<div class="card-body">
<h4 class="card-title">
Project Three
</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
</div>
</ItemTemplate>
<FooterTemplate></FooterTemplate>
</asp:DataList>
</asp:Panel>
</div>
and I face a problem, what I want is like this example in the link Portfolio 2 Subheading
but the problem with me all record come like this
so could anyone tell me what my mistake here?
Thanks for everyone
According to the link you mentioned the html should look like this
<div class="row">
<div class="col-lg-6 portfolio-item">
<div class="card h-100">
But since you wrap the DataList in a Panel, your html looks like this.
<div class="row">
<div ID="Pnl_prodL"> // extra div from panel
<div class="col-lg-6 portfolio-item" style="background-color: red">
<div class="card h-100">
A Panel creates a <div> element in html. I don't know what the use of that Panel is, but a PlaceHolder has most of the functionality without creating a div of it's own.
Maybe that will solve your problem...
I'm working on amending a HTML5 template. The default setup of the Bootstrap parameters were:
col-sm-12 col-md-4 col-lg-4
col-sm-12 col-md-8 col-lg-8
This meant that the latin text took up 20% of screen width and pics 80%, but I want it the other way round... Text taking up 80% width, photo 20%.
Can someone please advise what the bootstrap parameters need to be for this for responsive to work? I've tried loads of options but can't get it right!
Is this possible or do I need to revise CSS?
Thanks
Full code below:
<section id="ourteam" class="wow fadeInUp">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4">
<h2>Meet our Team</h2>
<div class="ourteamd">
<p>Lorem ipsum dolor sit eros. Pellentesque nec vulpe eros.</p>
</div>
</div>
<div class="col-sm-12 col-md-8 col-lg-8">
<div class="responsive">
<div>
<div class="third-effect">
<img src="http://www.placehold.it/384x444" class="img-responsive" alt="Our Team">
<div class="mask">
Facebook
Twitter
</div>
</div>
Just switch the size value of both columns, 4 becomes 8, and 8 becomes 4.
Try with below code.
<div class="row">
<div class="col-sm-12 col-md-8 col-lg-8">
<h2>Meet our Team</h2>
<div class="ourteamd">
<p>Lorem ipsum dolor sit eros. Pellentesque nec vulpe eros.</p>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="responsive">
<div class="third-effect">
<img src="http://www.placehold.it/384x444" class="img-responsive" alt="Our Team">
<div class="mask">
Facebook
Twitter
</div>
</div>
</div>
</div>
Im using bootstrap 4.0.0-beta.2 and I have a css problem.
I want following layout
This is the html:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div id="task" class="container">
<div class="row">
<div class="col-12">
<div class="card card-shadow">
<div class="card-header accent-color">
FOOOOOOOO
</div>
<div class="card-body">
<h4 class="card-title">BAAAR</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12">
<div class="card card-shadow" id="paint">
<div class="card-header accent-color">
paint
</div>
<div class="card-body">
<app-paint></app-paint>
</div>
</div>
</div>
</div>
</div>
And what im trying to create is a layout of cards.
I want the first card to stay within the col-12 width and adapt the hight after content. And then I want the second div to always end at bottom of page. No margin between. So I tried to add position:fixed, bottom:0 and height:100% but then the width get wierd and it cant handle resize of the page. So How can I force the second div to end at page bottom?
You may use height and margins.
Boostrap class: .h-100 sets height:100% , but parent need an height where % can be calculated from (css added for html & body)
margin-top:auto and bottom 0 will send the second element at the bottom. boostrp classes used : mt-auto mb-0
html,
body {
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container h-100"><!-- class added -->
<div class="row h-100"><!-- class added -->
<div class="col-12">
<div class="card card-shadow">
<div class="card-header accent-color">
FOOOOOOOO
</div>
<div class="card-body">
<h4 class="card-title">BAAAR</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12 mb-0 mt-auto"><!-- class added -->
<div class="card card-shadow" id="paint">
<div class="card-header accent-color">
paint
</div>
<div class="card-body">
<app-paint>app-paint</app-paint>
</div>
</div>
</div>
</div>
</div>
or do you need the second div to expand ?
html,
body {
height: 100%;
}
.custom-flex {
flex: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container flex-column h-100">
<!-- class added -->
<div class="d-flex flex-column h-100">
<div class="">
<div class="card card-shadow">
<div class="card-header accent-color">
FOOOOOOOO
</div>
<div class="card-body">
<h4 class="card-title">BAAAR</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
Go somewhere
</div>
</div>
</div>
<div class="d-flex flex-column custom-flex">
<div class="card card-shadow custom-flex" id="paint">
<div class="card-header accent-color">
paint
</div>
<div class="card-body">
<app-paint>app-paint</app-paint>
</div>
</div>
</div>
</div>
</div>
I think the answer of this question would be to change the css of the card. If you are looking for to increase or decrease the space between the cards from top or from bottom you should change the css like so:
In your case for card shadow it would be
.d-flex [class*='card-shadow'] {
margin-top: 2.5em;
margin-bottm: 2.5em;
}
Use your own unit for css calculation em, px or whatever suit you.
Using Bootstrap 4 alpha 6, I want to show a testimonial, comprising:
On the left: person photo
On the right: quote, name and company logo (left-aligned)
That is at tablet and desktop width.
But, when the window width shrinks, I want to stack the set, so that the image is on top of the text set, and each part becomes center-aligned.
Currently, this is my code...
<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
<div class="container">
<div class="media">
<img class="d-flex mr-4 rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
<div class="media-body">
<p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." link</i></p>
<h2 class="mt-0">Joe Smith</h2>
<img src="http://placehold.it/150x40" class="img-fluid" width="150">
</div>
</div>
</div>
</div>
This successfully produces the following outcome at desktop width...
However, when shrunk, the arrangement looks like this...
Instead, I would like the image to go on top, rather than be wrapped, and preferably be centered. The text below should preferably be centered.
That code is the media object.
I have also tried using two columns to accomplish this - one of width 2, the other of 10...
<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
<div class="container">
<div class="row">
<div class="col-md-2 text-center">
<img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
</div>
<div class="col-md-10 text-center">
<p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <i class="material-icons md-inverse pmd-sm">link</i></p>
<h2 class="mt-0">Joe Smith</h2>
<img src="http://placehold.it/150x40" class="img-fluid" width="150">
</div>
</div>
</div>
</div>
... This successfully produces the right-looking result at mobile width...
... However,
a) I'm not sure whether this mark-up is correct, and
b) This means the text is centered even at desktop width, which is inappropriate...
I'm getting confused about the right approach, whether/when I should use img-fluid versus a fixed-width image etc. Can I have text be aligned differently depending on the browser width/breakpoint?
The d-flex/mr-auto stuff, I am not wedded to. This was copied from Bootstrap 4 documentation code for the media object.
What's the way to go?
The "correct" approach is a subjective, but you can use the responsive utilities to change the text alignment at different breakpoints. text-md-left will keep item left align on larger screens, and then use text-center to center on smaller screens.
<!-- testimonial -->
<div class="container-fluid cxt-padded bg-faded">
<div class="container">
<div class="row">
<div class="col-md-2 text-md-left text-center">
<img class="rounded-circle" src="http://placehold.it/150x150" width="150" alt="Generic placeholder image">
</div>
<div class="col-md-10 text-md-left text-center">
<p class="lead">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius venenatis neque, id commodo magna fermentum id." <i class="material-icons md-inverse pmd-sm">link</i></p>
<h2 class="mt-0">Joe Smith</h2>
<img src="http://placehold.it/150x40" class="img-fluid" width="150">
</div>
</div>
</div>
</div>
http://www.codeply.com/go/tuTd2OiZFx