I've got these divs that I would like to align in their container in a 4 by 6 grid. I've got this code for the first row:
<div class="container-fluid">
<div class="swb col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="row">
<div class="swb-button col-xs-3">
<p class="swb-button-name">1</p>
</div>
<div class="swb-button col-xs-3">
<p class="swb-button-name">2</p>
</div>
<div class="swb-button col-xs-3">
<p class="swb-button-name">3</p>
</div>
<div class="swb-button col-xs-3">
<p class="swb-button-name">4</p>
</div>
</div>
</div>
</div>
but they're clumping together like so:
Since they are 3 bootstrap widths wide, they should be spacing out.
What am I doing wrong?
Just change col-xs-3 to col-sm-3. If you want them to go completely across the screen get rid of your second div. col-xs-* no longer exists in the latest v4 release.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="swb col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="row">
<div class="swb-button col-sm-3">
<p class="swb-button-name">1</p>
</div>
<div class="swb-button col-sm-3">
<p class="swb-button-name">2</p>
</div>
<div class="swb-button col-sm-3">
<p class="swb-button-name">3</p>
</div>
<div class="swb-button col-sm-3">
<p class="swb-button-name">4</p>
</div>
</div>
</div>
</div>
Related
I'm trying to put extra margin space between columns on my Bootstrap grid layout.
I've tried adding custom CSS class like this
.classWithPad {
margin: 10px;
padding: 10px;
}
but didn't solve my problem, also I've tried adding ml-1 and mr-1 but I didn't get desired. Here is my code:
When I tried to add some extra margin/padding the corresponding column is moved to a new row.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="row mt-4 justify-content-between">
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>General Information</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
paragraphs...
</div>
<div class="col-md-6 pl-0 text-right">
paragraphs...
</div>
</div>
</div>
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>Features</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
</div>
<div class="col-md-6 pl-0 text-right">
</div>
</div>
</div>
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>Game Manufacturers</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
</div>
<div class="col-md-6 pl-0 text-right">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
You generally don't want to mix structural and presentation elements. In this case, you've combined columns with cards. Put the cards inside the columns, and if you wanted them full-height you can use h-100 on them.
That, along with the container that should be present around outer rows, and you're all good. If you want more spacing, use px-* classes on the columns.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row mt-4 justify-content-between">
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>General Information</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>Features</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>Game Manufacturers</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
I have used following strategy: Dividing it into two equal columns col-md-6. Again splitting col-md-6 into 3 columns each i.e. col-md-4. Same for right side. but problem occurs that how to do even spacing between columns on right side.
My code
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="col-md-4 text-center">
<p>My Earning</p>
</div>
<div class="col-md-4 text-center">
<h5>100</h5>
<p>Number of Notes Sold</p>
</div>
<div class="col-md-4 text-center">
<h5>$10,000</h5>
<p>Money Earned</p>
</div>
</div>
<div class="col-md-6">
<div class="col-md-4 ">
<h5>38</h5>
<p>My Downloads</p>
</div>
<div class="col-md-4">
<h5>12</h5>
<p>My Rejected Notes</p>
</div>
<div class="col-md-4 data">
<h5>102</h5>
<p>Buyer Requests</p>
</div>
</div>
</div>
</div>
Based on your design I just created the same kind of layout. I used grid-based we can use flex also.
I added the gutter also.
I think this will help you.
.row div div{
border: 1px solid #000;
text-align:center;
}
.row .no-gutters{
padding:0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">
<div class="col-sm-2 no-gutters">
<div>one</div>
</div>
<div class="col-sm-4 no-gutters">
<div>two</div>
</div>
<div class="col-sm-2">
<div>three</div>
</div>
<div class="col-sm-2">
<div>four</div>
</div>
<div class="col-sm-2">
<div>five</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
In small screens, my responsive image gets smaller till it disappears, even tho I specified that I wanted the images to be on top of each other on small screens, hence my col-md-6 col-sm-12. Any idea what's wrong with my code ?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-12 d-flex">
<div class="media block-6 services d-flex align-items-center">
<div class="col-md-6 col-sm-12 d-flex">
<div class="media-body pl-4 pl-md-0 pr-md-4 text-md-left">
<h3 class="heading">Title</h3>
<p class="mb-0">Description</p>
</div>
</div>
<div class="col-md-6 col-sm-12 d-flex">
<div class="d-flex align-items-center justify-content-center">
<img class="img-fluid" src="https://www.plantes-et-sante.fr/images/photo-8.jpg_720_1000_2">
</div>
</div>
</div>
</div>
</div>
Go ahead and resize the screen here, knowing that I need to have the flex display.
https://jsfiddle.net/ero14xqf/
.col-* must always be contained inside .row...
<div class="row">
<div class="col-md-12 d-flex">
<div class="row media block-6 services d-flex align-items-center">
<div class="col-md-6 col-sm-12 d-flex">
<div class="media-body pl-4 pl-md-0 pr-md-4 text-md-left">
<h3 class="heading">Title</h3>
<p class="mb-0">Description</p>
</div>
</div>
<div class="col-md-6 col-sm-12 d-flex">
<div class="d-flex align-items-center justify-content-center">
<img class="img-fluid" src="https://www.plantes-et-sante.fr/images/photo-8.jpg_720_1000_2">
</div>
</div>
</div>
</div>
</div>
I tried looking this up here but I can't find anything related to this specific problem.
I'm trying to make a header which has a button on the left and right of the screen with a logo in the middle, but whenever I make the window smaller or larger the button on the right doesnt stay aligned.
Small window
Large window
Here is the code:
<header>
<div id="container-fluid">
<div class="row">
<div class=" col-2">
Menu
</div>
<div class="col-8 text-center ">
Logo
</div>
<div class="col-2 float-right">
Contact
</div>
</div>
</div>
</header>
What am I missing here?
Thanks in advance.
Fixed it, code now looks like this:
<body>
<header>
<div id="container-fluid">
<div class="row">
<div class="col">
<span class="float-left">Menu</span>
</div>
<div class="col text-center">
Logo
</div>
<div class="col">
<span class="float-right">Contact</span>
</div>
</div>
</div>
</header>
</body>
wrap your content so it can be aligned according to the parent container.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<header>
<div id="container-fluid">
<div class="row">
<div class="col-2">
<span class="float-left">Menu</span>
</div>
<div class="col-8 text-center">
Logo
</div>
<div class="col-2">
<span class="float-right">Contact</span>
</div>
</div>
</div>
</header>
You can use the flex-bootstrap-class and justify-content for this approach:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row d-flex justify-content-between bg-light">
<div class="p-2 bg-dark text-light">
Menu
</div>
<div class="p-2 bg-dark text-light">
Logo
</div>
<div class="p-2 bg-dark text-light">
Contact
</div>
</div>
</div>
You havn't defined what size of column grid you are using. Using col-xs,col-sm, col-md,col-lg will have different effects for the particular code. Run the snippet code in full page below and see how the col-size affects when the browser is resized.
Update - Bootstrap 4 has replaced the col-xs with col- .
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="container-fluid">
Col:xs
<div class="row">
<div class=" col-2">
Menu
</div>
<div class="col-8 text-center ">
Logo
</div>
<div class="col-2 float-right">
Contact
</div>
</div>
</div>
<br>
<br>
<div id="container-fluid">
Col:sm
<div class="row">
<div class=" col-sm-2">
Menu
</div>
<div class="col-sm-8 text-center ">
Logo
</div>
<div class="col-sm-2 float-right">
Contact
</div>
</div>
</div>
<br>
<br>
<div id="container-fluid">
Col:md
<div class="row">
<div class=" col-md-2">
Menu
</div>
<div class="col-md-8 text-center ">
Logo
</div>
<div class="col-md-2 float-right">
Contact
</div>
</div>
</div>
<br>
<br>
<div id="container-fluid">
Col:lg
<div class="row">
<div class=" col-lg-2">
Menu
</div>
<div class="col-lg-8 text-center ">
Logo
</div>
<div class="col-lg-2 float-right">
Contact
</div>
</div>
</div>
Here is the html:
<div class="container-fluid">
<div class="row fluid">
<div class="nav clearfix">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
<div class="hotel">
<div class="hotel_img"></div>
<h1>Accomodation</h1>
<div class="bottom_border"></div>
<p>
Perfect solution:
<span>hotel, apartment, hostel, guest house</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
<div class="tour">
<div class="tour_img"></div>
<h1>Tourist Attractions</h1>
<div class="bottom_border"></div>
<p>
Search your favorite:
<span>restaurant, museum, hotel, attractions</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
<div class="clearfix restaurant">
<div class="restaurant_img"></div>
<h1>Restaurants</h1>
<div class="bottom_border"></div>
<p>
You are hungry:
<span>chinese food, burgers, traditional foods</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
<div class="event">
<div class="event_img"></div>
<h1>Events & Tickets</h1>
<div class="bottom_border"></div>
<p>
It's time to have fun:
<span>concerts, cinema, exhibitions</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
<div class="coffee">
<div class="coffee_img"></div>
<h1>Coffee Shop</h1>
<div class="bottom_border"></div>
<p>
You must wake up:
<span>Starbucks, Filicori, Nescafe, Lavazza</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2 col-xl-2 clearfix">
<div class="gov">
<div class="gov_img"></div>
<h1>Government</h1>
<div class="bottom_border"></div>
<p>
Must see:
<span>parliament building, district court, royal house</span>
</p>
</div>
</div>
</div>
</div>
It wont break, instead it just stays as 1 column and forces a scroll bar.
I want it to look like
1 2 3 4 5 6
1 2 3
4 5 6
and stacked on mobile. instead it stays 1 2 3 4 5 6 on any screen size. The code looks right to me, I'm not sure if something is stoping it from breaking or if I am just doing it wrong. Any ideas?
Make sure you are importing the Bootstrap library. Your code as pasted won't do anything without it.
For the small screens, use col-12 to get full width, and for the large screens, use col-6 to get half width (side by side columns).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="hotel">
<div class="hotel_img"></div>
<h1>Accomodation</h1>
<div class="bottom_border"></div>
<p>
Perfect solution:
<span>hotel, apartment, hostel, guest house</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="tour">
<div class="tour_img"></div>
<h1>Tourist Attractions</h1>
<div class="bottom_border"></div>
<p>
Search your favorite:
<span>restaurant, museum, hotel, attractions</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="clearfix restaurant">
<div class="restaurant_img"></div>
<h1>Restaurants</h1>
<div class="bottom_border"></div>
<p>
You are hungry:
<span>chinese food, burgers, traditional foods</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="event">
<div class="event_img"></div>
<h1>Events & Tickets</h1>
<div class="bottom_border"></div>
<p>
It's time to have fun:
<span>concerts, cinema, exhibitions</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="coffee">
<div class="coffee_img"></div>
<h1>Coffee Shop</h1>
<div class="bottom_border"></div>
<p>
You must wake up:
<span>Starbucks, Filicori, Nescafe, Lavazza</span>
</p>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="gov">
<div class="gov_img"></div>
<h1>Government</h1>
<div class="bottom_border"></div>
<p>
Must see:
<span>parliament building, district court, royal house</span>
</p>
</div>
</div>
</div>