This might be a bit of a silly question - but I could not find an answer to what I'm trying to do..
I'm trying to make the entire container div responsive (like a column inside a row).
e.g. I want to have the effect that this would produce:
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-6 cold-sm-10">
...
</div>
</div>
</div>
but in one line... something like:
<div className="container-lg-6 container-sm-10">
...
</div>
Is there something in Bootstrap that could achieve this?
I tried the classes container-sm but they are not working like what I want.
That is not how the containers work. But you can easily achieve the layout by just nesting everything inside of a .col-12.col-sm-10.col-lg-6 inside a .row inside a .container-fluid
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container-fluid p-0">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 col-lg-6">
<div class="row">
<div class="col bg-primary">
<h1>1</h1>
</div>
<div class="col bg-secondary">
<h1>2</h1>
</div>
<div class="col bg-info">
<h1>3</h1>
</div>
</div>
<div class="row">
<div class="col bg-info">
<h1>4</h1>
</div>
<div class="col bg-primary">
<h1>5</h1>
</div>
</div>
</div>
</div>
</div>
Related
I have the following bootstrap-4 column structure:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">A</div>
<div class="col-xs-6 col-sm-4">B</div>
<div class="col-xs-6 col-sm-4">C</div>
</div>
</div>
The expected column layout according to screen size is:
XS:
[ A ]
[B][C]
SM and up:
[A][B][C]
However, at XS each div takes the full width like this:
[A]
[B]
[C]
Check JSFiddle snippet here.
What could be wrong here?
col-xs-* simply does not exists on Bootstrap
The grid options are:
col-*
col-sm-*
col-md-*
col-lg-*
col-xl-*
Soucre: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options
So probably what you wanted to use is col-*
.row {
background: #E2E2E2;
}
.card {
border: solid 1px #6c757d;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-sm-4 text-center">
<div class="card">
<div class="card-body">
A
</div>
</div>
</div>
<div class="col-6 col-sm-4 text-center">
<div class="card">
<div class="card-body">
B
</div>
</div>
</div>
<div class="col-6 col-sm-4 text-center">
<div class="card">
<div class="card-body">
C
</div>
</div>
</div>
</div>
</div>
You're using col-xs- but it doesn't exist in Bootstrap version 4.x.
So the small breakpoint is actually the first one defined mobile and up.
If you intend to have B & C to be half the size on mobile, I suggest to program it like this:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="card text-center">
<div class="card-body">
A
</div>
</div>
</div>
<div class="col-6 col-sm-4">
<div class="card text-center">
<div class="card-body">
B
</div>
</div>
</div>
<div class="col-6 col-sm-4">
<div class="card text-center">
<div class="card-body">
C
</div>
</div>
</div>
</div>
</div>
If not, move the breakpoint of sm up to md.
Moving "div class row" one line below will solve your problem.
I've tested your code on "codepen.io", and works just fine. Maybe the "CDN" that "jsfiddle" uses is some version that does not render the classes in the appropriate manner. It is important whether you are using a "CDN" or you are downloading the files on you pc (.js, .css, etc.), that they support the Bootstap version you are using.
I'm new in bootstrap and css, and I want to design this output:
For that purpose write this :
<div class="row">
<div class="col-md-12 col-md-1 col-md-4 col-md-8" style="background-color: yellow; width: 100%; height: 100%; position: fixed;">
<nav class="navbar navbar-default navbar-left">
<div class="container">
behzad
</div>
</nav>
<div class="col-md-1">
</div>
</div>
</div>
But that is not correct, how can I solve that?
You are not using bootstrap correctly. Put your col definitions within separate div's: Also make use of bootstrap's xs, and md definitions. Finally, put your row inside a container.
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-9">
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
</div>
</div>
</div>
Working example: https://jsfiddle.net/mspinks/zf0q5cLk/3/
Bootstrap should follow pattern: container - row - col. Then use -xs (xsmall devices), -sm (small devices), -md (medium devices), -lg (large devices) to change grid design based on device.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<!-- Left panel, top panel on mobile device -->
</div>
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<!-- Content -->
<div class="row">
<div class="col-xs-1">
<!-- First empty col (Also can use offset) -->
</div>
<div class="col-xs-1">
</div>
<div class="col-xs-1">
</div>
.
.
.
<div class="col-xs-1">
<!-- Last empty col (Also can use offset) -->
</div>
</div>
</div>
</div>
</div>
If u want to use col-offset try this approach:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<!-- Left panel, top panel on mobile device -->
</div>
<div class="col-xs-8 col-lg-offset-2">
<!-- Content -->
<div class="row">
<div class="col-xs-1">
</div>
<div class="col-xs-1">
</div>
.
.
.
</div>
</div>
</div>
</div>
Offset moves columns to the right using .col-xs(sm, md, lg)-offset-*. These classes increase the left margin of a column by * columns. In this example, .col-xs-offset-2 moves columns over two columns.
I'm using Bootstrap 3 and trying to solve this what's mocked on the image. I used one row with two cols, and they are next to each other like in the image, but when I resize to mobile I want the right side to fall beneath the left. Any help is appreciated, thank you.
Code sample:
<div className="container">
<div className="row">
<div className="col-xs-4 col-offset-xs-1">
<h1>1</h1>
</div>
<div className="col-xs-4">
<div className="row">
<h1>2</h1>
</div>
</div>
.black{background-color:#000; height:320px;}
.red{background-color:#F00; height:100px;margin-bottom:10px;}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 black">
black
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 red">
one
</div>
</div>
<div class="row">
<div class="col-xs-12 red">
two
</div>
</div>
<div class="row">
<div class="col-xs-12 red">
three
</div>
</div>
</div>
</div>
</div>
Bootstrap allows nesting your elements easily, here you go: https://jsfiddle.net/denea/DTcHh/25594/
<div className="container">
<div class="row">
<div class="col-sm-6 col-xs-12" id="first">
<h1>1</h1>
</div>
<div class="col-sm-6 col-xs-12" id="second">
<div class="row">
<h1>2</h1>
</div>
<div class="row">
<h1>3</h1>
</div>
<div class="row">
<h1>4</h1>
</div>
</div>
</div>
and read this: http://getbootstrap.com/css/#grid-nesting
Bootstrap allows for nesting which will provide what you need:
<div class="row">
<div class="col-sm-6">
Left column
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
Right column, row 1
</div>
</div>
<div class="row">
<div class="col-sm-12">
Right column, row 2
</div>
</div>
<div class="row">
<div class="col-sm-12">
Right column, row 3
</div>
</div>
</div>
</div>
More info here.
You can achieve this by using flexbox and media query
#media (max-width: 360px) {
.container > .row {
display:flex;
flex-flow: row-reverse wrap;
}
}
Demo: https://jsfiddle.net/xs3joev8/1/
I know how to do standard columns and such in Bootstrap. However, I have something I haven't encountered yet and I can't seem to Google the answer. Maybe I don't know what to call it, hence why I can't find it.
I have essentially a bunch of boxes, with one large box on the right, and more of the smaller boxes under it. I think I am confused because normally I would have a row, with 4 columns 3 wide, but the larger column needs to take up multiple rows..
Here is a quick example I made in paint:
The smaller boxes are kind of like thumbnails for a portfolio, they are all the same size. The larger box is a Twitter news feed, which is a div Twitter provides to place a newsfeed on your site.
I am not sure if I should create two sections (top half and bottom half) or how to approach this. I thought about making the top section 2 columns, then in the 1st have it split into two more (6 and 6). Then do a separate section below it as normal.
However, you can easily add an image into a paragraph and have the text wrap around the image. I am wanting the same thing, only with the Twitter newsfeed and columns..
I can add code once I get an approach if I am still stuck.
I tried to put another set of rows and cols inside my 1st column, but it broke the spacing between the columns which would mean adding CSS to fix the spacing.
Hoping someone has done something like this, or can see by my image, how to approach this.
Can you show your HTML/CSS to see where and why the code broke ? As you approach is correct, I would have done the same. see below
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
<div class="col-xs-6"></div>
</div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
</div>
Try something like this:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
row1-col1
<div class="row">
<div class="col-sm-6">
Sub-row1-Sub-col1
</div>
<div class="col-sm-6">
Sub-row1-Sub-col2
</div>
</div>
<div class="row">
<div class="col-sm-6">
Sub-row2-Sub-col1
</div>
<div class="col-sm-6">
Sub-row2-Sub-col2
</div>
</div>
<div class="row">
<div class="col-sm-6">
Sub-row3-Sub-col1
</div>
<div class="col-sm-6">
Sub-row3-Sub-col2
</div>
</div>
</div>
<div class="col-sm-6">
row1-col2
</div>
</div>
<div class="row">
<div class="col-sm-3">
row2-col1
</div>
<div class="col-sm-3">
row2-col2
</div>
<div class="col-sm-3">
row2-col3
</div>
<div class="col-sm-3">
row2-col4
</div>
</div>
<div class="row">
<div class="col-sm-3">
row3-col1
</div>
<div class="col-sm-3">
row3-col2
</div>
<div class="col-sm-3">
row3-col3
</div>
<div class="col-sm-3">
row3-col4
</div>
</div>
</div>
You have just to annidate more rows inside an existing column.
Eg:
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
</div>
<div class="row">
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
<div class="row">
<div class="col-lg-3">5</div>
<div class="col-lg-3">6</div>
</div>
</div>
<div class="col-lg-6">Big content</div>
</div>
</div>
I want to create a (more or less Pinterest like) grid layout like in the below below. The two columns have different rows, but do appear side to side. How can I do this using the twitter bootstrap grid framework?
If I'm not mistaken the normal row/col behaviour would give me the layout below.
You should be able to achieve the layout by using two columns which themselves have rows:
<div class="row">
<div class="col-xs-6">
<div class="col-xs-12">1</div>
<div class="col-xs-12">2</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">3</div>
<div class="col-xs-6">4</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="col-xs-12">5</div>
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6">6</div>
<div class="col-xs-6">7</div>
</div>
</div>
<div class="col-xs-12">8</div>
</div>
</div>
http://jsfiddle.net/zz4ug/
Create the illusion of incongruous rows via background color or image:
<div class="container">
<div class="row">
<div class="col-xs-6 red"> </div>
<div class="col-xs-6 orange"> </div>
</div>
<div class="row">
<div class="col-xs-6 red"> </div> <--This will appear to be on row 1
<div class="col-xs-3 blue"> </div>
<div class="col-xs-3 green"> </div>
</div>
</div>
Check out this jsFiddle