I am trying to learn Bootstrap grid more. I am trying to get two columns in two rows in the middle of my page.
So it should look like this:
Here is what I got so far:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6">
<div id="text1">
<label>Text 1</label>
</div>
<div id="text2">
<label>Text 2</label>
</div>
</div>
<div class="col-xs-6 col-sm-6">
<div id="text3">
<label>Text 3</label>
</div>
<div id="text4">
<label>Text 4</label>
</div>
</div>
</div>
</div>
But my elements are not in place where I want them.
Here is the solution in a fiddle: Solution 1
Now for the explanation of the problem:
First you need to set specific columns. Keep in mind that Bootstrap has a grid of 12. So your maximum can be 12 at all time. However, you don't need to have the columns fill the entire grid.
You can use something called offset which allows you to put empty space in your elements. Having the class class="col-md-5 col-lg-5 col-sm-5 offset-1" gives you a column with a value of 5 so you can actually position 2 columns and have space on the side.
I would suggest to go through the Bootstrap grid and play around in order to get a familiar feeling on how to manipulate it.
The style sheet margin-left:25px; margin-top:25px; gives you the space on the top and on the side of the columns themselves.
Related
This picture should help sum up what I want done.
The code for this can be found here: https://codepen.io/MatteCrystal/pen/xxXpLmK
<div class="container">
<div class="row">
<div class="row gy-2">
<div class="col text-end minWidth200 maxWidth200">
<b>Title: </b>
</div>
<div class="col minWidth350">
Info that spans <br />
multiple lines
</div>
</div>
<div class="row gy-2">
<div class="col text-end minWidth200 maxWidth200">
<b>Title 2: </b>
</div>
<div class="col minWidth350">
More info, that gives lots of details about somthing to the user
</div>
</div>
<div class="row gy-2">
<div class="col text-end minWidth200 maxWidth200">
<b>Title 3: </b>
</div>
<div class="col minWidth350">
Even more info. To give the user a very detailed overview of somthing super important and relevant to their task. This info is integral if you want you're users to have a good user experince.
</div>
</div>
</div>
</div>
Basically, I want the contact page to be made of two pieces of content each. The title portion and then info portion to the right of the title. But on small screens instead of having the title take up valuable width I would prefer to just place the info portion underneath the title.
the title elements are forced to be the same size so they all look uniform, The text portion has a minimum size it can be but it can also grow larger to fit the page.
The problem is the title elements have the bootstrap text-end class to align the title right. But when the minimum size constraints are met the two columns will be stacked on top of each other. When this happens the title element needs to be aligned left otherwise it looks awkward. You can see what I mean in this image.
So is there any elegant or built in class for bootstrap that can achieve the results I want? I want a solution that will be flexible and not require additional changes if I decide to increase or decrease the min or max width allowed for the title or info elements. Ideally I need an option that can detect when a bootstrap row with two or more cols becomes sized small enough that each col becomes stacked on top of each other instead of side by side. Due to various factors this can't be a hard coded value since the moment this happens could differ depending on the circumstances.
This is a classic stacked to horizontal bootstrap layout.
You just need to use the responsive .col-* classes.
Remember BS uses the "mobile first" scheme, so start with .col-12 to ensure full-width on the smallest screens. Then add the appropriate col class(es) for the width(s) you want above each particular breakpoint i.e. .col-md-2 to be 2/12 of the width for medium and above. You can combine this with the responsive text alignment class .text-md-end to only right-align above medium.
Also, note in the example below there is no need to nest multiple .row.gy-2s (unless you have another requirement), columns will automatically wrap to a new line at 12 columns so, I have simplified your markup.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row gy-2">
<div class="col-12 col-md-2 text-md-end">
<b>Title: </b>
</div>
<div class="col-12 col-md-10">
Info that spans <br /> multiple lines
</div>
<div class="col-12 col-md-2 text-md-end">
<b>Title 2: </b>
</div>
<div class="col-12 col-md-10">
More info, that gives lots of details about somthing to the user
</div>
<div class="col-12 col-md-2 text-md-end">
<b>Title 3: </b>
</div>
<div class="col-12 col-md-10">
Even more info. To give the user a very detailed overview of somthing super important and relevant to their task. This info is integral if you want you're users to have a good user experince.
</div>
</div>
</div>
Im fairly new to bootstrap and the concept of responsive design.
I was reading over the bootstrap docs and following some tutorials on w3schools. All mentions col- must = 12 in a single row class. They also mention you can combine different col classes and sizes example <div class="col-md-3 col-xs-6">
What I am not getting is when should you break the viewport with the </row> class when you combine different col sizes ?
Consider the following, where I want a mobile device to display 2 rows and 2 columns and on desktop a single column with 4 rows
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-6">
</div>
<div class="col-md-3 col-xs-6">
</div>
<div class="col-md-3 col-xs-6">
</div>
<div class="col-md-3 col-xs-6">
</div>
</div><!--/row -->
</div><!--/container -->
Considering all columns inside rows must = 12, the row class would need to be closed on different points for mobile and desktop...?
How would I tackle the above problem, hope the question makes sense.
Thank you
Your code is correct and doesn't need more .rows. The W3schools tutorial is misleading, and it's wrong to say ".col-*-* should always add up to 12 for each row".
It's ok to have more (or less) than 12 column units in a Bootstrap .row. It's known as column wrapping, and will simply make the extra columns wrap to the next line...
From the Bootstrap docs:
"If more than 12 columns are placed within a single row, each group of
extra columns will, as one unit, wrap onto a new line"
That's why there are examples in the Bootstrap docs that demonstrate using more than 12 columns in a single .row. When using column wrapping you do need to be aware of responsive resets (known as "clearfix") if the columns vary in height.
There are many responsive scenarios (like your example) where it's necessary to have column units exceeding 12 in a single .row element. It's a common misconception that column units must be 12 or less in a single .row.
Similar Questions..
Bootstrap what will happen if I put more than 12 columns in a row?
Bootstrap 3 - row can I have columns add up to more then 12?
Just change the "col-md-3" class to "col-md-12" in all divs to show 4 rows and single column on desktop and two rows and two columns on mobile.
<div class="container">
<div class="row">
<div class="col-md-12 col-xs-6">
</div>
<div class="col-md-12 col-xs-6">
</div>
<div class="col-md-12 col-xs-6">
</div>
<div class="col-md-12 col-xs-6">
</div>
</div><!--/row -->
</div><!--/container -->
The .row class is not required inside a .container, but it is a good idea to include it anyways when you start incase you want multiple rows later on.
All that .row really does is make sure that all of the divs inside of it appear on their own line, separated from the previous and the following .rows
It's just proper nesting..the problem that you have mentioned in your question can be solved in the following way--
As you can see a mobile device will display 2 rows and 2 columns and on desktop a single column will have 4 rows--
Although it can be achieved using many other div nesting methods, I have shown only one such configuration to achieve your desired layout.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.btn-xs {
display: inline-block;
margin-right: 2%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
AAAAAAA
</div>
<div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
BBBBBBBBBB
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
CCCCCCCCCCC
</div>
<div class="col-xs-6 col-sm-6 col-lg-12 col-md-12">
DDDDDDDDDDD
</div>
</div><!--/row -->
</div><!--/container -->
</div>
</body>
</html>
Sorry for the really confusing title. What I'm trying to do should be quite easy in theory.
I think the best way to demontrate it is by showing you an image:
1 row at the top with 2 columns, and every other column coming after that should be positioned under the second column...
Is this doable?
Thanks
That's what the "offset" classes are for. col-md-offset-1 applied to the elements in the second column (as additional class) should do what you want (for medium viewport size)
(probably you use wider columns with classes like col-md-3 that span three columns of the grid. In this case you'd need col-md-offset-3for the offset)
use col-md-offset-* class
<div class="row">
<div class="col-md-offset-6" style="text-align=center;"><p>fixed column</p></div>
<div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>
<div class="row">
<div class="col-md-offset-6" style="text-align=center;"></div>
<div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>
<div class="row">
<div class="col-md-offset-6" style="text-align=center;"></div>
<div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>
for more information :
Bootstrap Grid System - Bootstrap Grid Examples -
Try HTML display : flex for such layout. For example refer below link.
https://css-tricks.com/snippets/css/a-guide-to-flexbox
Try below code snippet.
<div class="row-fluid">
<div class="span4"><div class="well">1</div></div>
<div class="span8">
<div class="row-fluid">
<div class="span6"><div class="well">2</div></div>
</div>
<div class="row-fluid">
<div class="span6"><div class="well">3</div></div>
</div>
<div class="row-fluid">
<div class="span6"><div class="well">4</div></div>
</div>
</div>
</div>
I've been trying to adapt my website to extra small window sizes with Bootstraps but I didn't found any solution for myself.
I want to shown one column when the window is too small and keep the left version otherwise. At this point, the code is something like:
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="divLeft">
<div class="panel panel-success" id="divChart">
<!-- Some progress bars -->
</div>
</div>
<div class="col-xs-12-offset-6 col-sm-6" id="divMain">
<h2>Observations</h2>
<div class="list-group" id="observations">
<!-- Some panels -->
</div>
</div>
What I have to do? I tried to add multiple classes to my divs divLeft and divMain but it doesn't work as I want.
Thanks in advance fellas! : D
Each row should always add up to 12 columns.
Have a look at the Bootstrap Docs which tell you about how to work with their grid system:
http://getbootstrap.com/css/#grid
I'd suggest something like the below for your example:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-3"></div>
<div class="col-xs-12 col-md-9"></div>
</div>
</div>
The above should result in the two columns displaying one above the other on extra small devices.
I've got a couple of elements that I'm really struggling to align horizontally. I've got a JSFiddle example to try and illustrate it. The layout that I'm trying to achieve in particular is looking at the first/left most Email field.
I wish to have both the slider and input field aligned with the label if space, or both of them sitting below the label otherwise.
What I find however is that I end up with the controls wrapping, or large amounts of whitespace (or greyspace even) around the textbox - rather than it filling to take up the space.
Unfortunately I've found that I can't seem to use col classes on the toggle because this causes issues with the rendering of it.
EDIT
So I've tried using a bootstrap library for my sliders instead in the hope that it'll allow for a better layout, and attempted to use bootstrap column sizing. This leaves me with the similar problems as you can see in the following JSFiddle.
I would still prefer to use the first library if I can so bonus if I can solve the problem with the first library.
My HTML looks something like this:
<div id="settingsBar" class="">
<div class="well bs-component col-sm-6">
<form class="form-horizontal">
<fieldset>
<legend style="color: #ccc;">General</legend>
<div class="form-group row">
<label for="txtBackColor" class="col-sm-12 col-md-3 col-lg-4 control-label">Background Colour</label>
<div class="col-sm-12 col-md-9 col-lg-8 row">
<div class="col-xs-1 col-sm-0"></div>
<input id="tglBackColor" type="checkbox" name="tglBackColor" class="bootstrap-toggle form-control" checked data-on-color="success" data-off-color="danger">
<input id="txtBackColor" type="text" class="colorPicker form-control col-xs-10 col-sm-7 col-md-10 col-lg-11" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
The problem I have is that depending on the size, the boxes overlap. What I want is for the final colour box to shrink down to fit on the same line, and the label sits either above or inline if there's enough space.
Bootstrap has col- controls for different sizes.
You can control rendering of collumns by using proper classes, e.g.:
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>
This means, collumn with such class will render over responsivity like 100% of container width (smartphones), 50% of container width (tablets), 33% of container width(small notebook/desktop screens) and 25% of container widht on high resolution displays.
You can also try put div with class="row" before your columns. Class row will cancel left and right padding of collumns. E.g.:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">some div</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">some div</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">some div</div>
</div>
You can find more info about bootstrap basics here