I'm new to bootstrap. Overall the official manual is easy to understand but I'm trying to stack columns in a certain way between desktop and mobile view and can't figure it out. Image shows what I'm attempting to achieve.
What I'm trying to do
Thanks for any help!
You need to do something like this :
<div class="row">
<div class="col-lg-6">
<div class="row">
<div id="column1" class="col-lg-6 col-sm-12">column1</div>
<div id="column2" class="col-lg-6 col-sm-12">column2</div>
</div>
<div class="row">
<div id="Desc1&2" class="col-lg-12 col-sm-12">desc1&2</div>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div id="column3" class="col-lg-6 col-sm-12">column3</div>
<div id="column4" class="col-lg-6 col-sm-12">column4</div>
</div>
<div class="row">
<div id="Desc3&4" class="col-lg-12 col-sm-12">DESC3&4</div>
</div>
</div>
Related
I want to resize column width in bootstrap.
Curently, I have 3 <div> with col-md-4. But when one of the <div> hides then I want to change another 2 <div>'s into col-md-6.
Is this possible in bootstrap?
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div class="col-md-4">
</div>
<div id="txthide">
<div class="col-md-4">
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
Please I'm using bootstrap 4 beta to build a website, the columns don't stack on mobile devices, however they do when I use Google Chrome to resize the window.
Even in chrome responsive mode, they don't stack also
Any help please?
<!--main-->
<section>
<div class="container">
<div class="row">
<div class="col-md-9">
<section class="news-items">
<h1>AfEI News</h1>
<div class="col-md-12">
<div class="row">
<div class="col-md-4 col-sm-6 col-12 col-lg-3">
</div>
<div class="col-md-4 col-sm-6 col-12 col-lg-3">
</div>
<div class="col-md-4 col-sm-6 col-12 col-lg-3">
</div>
<div class="col-md-4 col-sm-6 col-12 col-lg-3">
</div>
</div>
</div>
</section>
</div>
<div class="col-md-3">
<div class="row">
</div>
</div>
<div class="row">
<div class="col-md-12 aside-col" id="coming-up">
</div>
</div>
<div class="row">
<div class="col-md-12 aside-col" id="opportunities">
</div>
If it works properly when you resize the window but not on a mobile device, you are probably missing this in your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Have you tried to view it on an actual mobile device? I've noticed using chrome the responsive elements and dev options don't actually simulate a mobile device. Also, you do not need to use col-md-12 just use col and it will auto fit.
You should also use the current full release of bs4, here is the documentation. https://getbootstrap.com/docs/4.0/layout/grid/
it is due to you are placing all together like
<div class="col-sm-6 col-xs-6" >
</div>
<div class="col-sm-6 col-xs-6" >
</div>
<div class="col-sm-6 col-xs-6" >
</div>
<div class="col-sm-6 col-xs-6" >
</div>
So in this can it will tough for browser to align it proper as it wont know where to place the third one as space is filled.
So what you need to do is tell the browser to place it in next row by using the bootstrap class itself
<div class="row" >
<div class="col-sm-6 col-xs-6" >
test
</div>
<div class="col-sm-6 col-xs-6" >
test
</div>
</div>
<div class="row" >
<div class="col-sm-6 col-xs-6" >
test
</div>
<div class="col-sm-6 col-xs-6" >
test
</div>
</div>
Now you will get it proper.
I am new to Skeleton framework and am trying to build a two column layout for a blog project. So far this is what I have:
<section class="list-posts">
<div class="container">
<div class="row">
<div class="nine columns posts">
[NINE COLUMNS]
</div><!--nine columns-->
<div class="three columns aside">
[ASIDE]
[/ASIDE]
</div>
</div><!--row-->
</div>
but as more columns are added to the .posts class the aside collapses. Your help will be appreciated.
Not sure if I understand your problem, but if you are trying to nest columns you need to put a row div within the nine columns, and end the row(s) for every twelve columns.
If this is not the case, could you please provide a more specific clarification of your problem with a link or image.
Well after waiting for some hours without getting any help, i decided to get my hands dirty, this is what i did
<section class="content">
<div class="container">
<div class="row">
<!--LIST ALL THE POSTS HERE-->
<div class="twelve columns">
<div class='twelve'>
<div class='row single-entry'>
<div class='six columns'>
...
</div>
<div class='six columns'>
...
</div>
</div><!--row-->
</div><!--twelve-->
</div><!--row-->
<!-- ASIDE-->
<div class="four columns aside border-between">
<div class="row ">
<div class="twelve columns">
<div class="twelve">
<h4 class="standing">Recommendations</h4>
</div>
<div class="twelve columns recommended-articles">
<div class="three columns">
<img src="images/footer.png" class="u-max-full-width">
</div>
<div class="nine columns recommended-articles-details">
<h6 class="article-title">4 top SEO trends for 2017</h6>
<p class="author_name">Joel Orok</p>
</div>
</div>
</div>
</div>
</div>
</section>
I am looking to implement the following table where the name column uses two rows while age and location uses one. The text would be centered in their own row:
Is this bootstrap compliant? If so, how would you implement such a table?
Thanks.
Yep, you can nest rows and columns in bootstrap. The markup would look something like this.
<div class="container">
<div class="row">
<div class="col-sm-4">
<h1>Name</h1>
<div class="row">
<div class="col-sm-6">
<p>John Smith</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<p>Contractor</p>
</div>
</div>
</div>
<div class="col-sm-4">
<h1>Age</h1>
</div>
<div class="col-sm-4">
<h1>Location</h1>
</div>
</div>
</div>
I have a problem at aligning columns inside rows in bootstrap. I have the following structure:
<section class="container-fluid centerP">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-10 col-xs-offset-1">
<h1></h1>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
<div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
<div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
</section>
It should look like a 1-2-2-1 (vertically aligned boxes of cntent). Currently they are centered but too far apart because of the overset of 2. I found a solution that mentioned using classes of "row-centered" and "col-centered" and it worked untill i modified the classes to "col-xs" and "col-lg". So what i was trying to do for the last two days was to bring them closer together but with no success.
I started coding a couple of weeks ago so please bear with me if the question is stupid
Each row should split to 12 col.
for exemple:
<div class="row">
<div class=col-md-6>
something
</div>
<div class=col-md-6>
something
</div>
</div>
A few suggestions:
I think you mean to use <div class="container-fluid centerP"> rather than <section class="container-fluid centerP>. Check out What is the difference between <section> and <div>? for more on why you should probably use a div rather than a section here.
A simple 1-2-2-1 block of vertically aligned central columns could be written like this:
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 id="headerBox">Dolloping doubloons!</h1>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="contentText">Dolloping doubloons!</p>
</div>
<div class="col-md-2"></div>
<div class="col-md-5">
<p class="contentText">Dolloping doubloons!</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 id="footerText">Dolloping doubloons!</h3>
</div>
</div>
`
You can then use the ids and classes to set the text's padding and margin properties in CSS, which in turn will offer you more precise control over where the text displays. For example, if you wanted to centre the text within its respective box, you could use margin: 0 auto;.