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>
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 am generating Bootstrap columns with a PHP for loop(from a repeater field in ACF for Wordpress). I need to find a way to center a row of columns when the columns within the row don't add up to 12. I saw some other questions regarding this issue, but most involved manually adding a different class to the uneven row. Hoping to avoid that solution since I am generating these columns with a for loop.
Here's an example of the outputted HTML:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
</div>
</div>
So in this example, I would want the 3 last col-sm-3 elements to be centered below the 4 above them.
I recommend you to use Bootstrap 4. In this case, you can simply add the justify-content-center class to your row.
Heres the working snippet. (probably you won't see, cz you are using sm)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</div>
<div class="col-sm-3">
Lorem
</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.
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>
I am looking to create a page in my Joomla Template where I will have 2 columns that will take up 50% of the page showing an image and text underneath. My code is shown below:
<div id="services" class="span12">
<div id="services-img-new" class="span6"></div>
<div id="services-img-new" class="span6"></div>
</div>
<div id="services" class="span12">
<div id="services-text" class="span6">
<h4>Heading 1</h4>
<p>Lorem ipsum dolor</p>
</div>
<div id="services-text" class="span6">
<h4>Heading 2</h4>
<p>Lorem ipsum dolor</p>
</div>
</div>
The problem I have is that if the screen size is reduced then this doesnt show the correct text under the right image and from my code i can see this is obviously because i have grouped the 2 images together and the text together.
How am i able to group the image and text together as one?
If somebody could please advise, would really appreciate it.
Btw I am currently using Joomla 3.5.1 and Twitter Bootstrap 2.3.2 hence not using the col classes as it is in Bootstrap 3.
Ok, so if I understand correctly your looking for something like this:
<div id="services" class="span6">
<div id="services-img-new" class="span12"></div>
<div id="services-text" class="span12">
<h4>Heading 1</h4>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div id="services" class="span6">
<div id="services-img-new" class="span12"></div>
<div id="services-text" class="span">
<h4>Heading 2</h4>
<p>Lorem ipsum dolor</p>
</div>
</div>
Link to jsbin example