I don't know how to use Bootstrap Grid classes combined with BEM. Especially I mean container, row and col- classes. I want to do this in the best semantic way too.
I found a question like that in:
How to properly mix Bootstrap and BEM?
but there was not a satisfactory answer there.
when the "header" is a block I should do like this?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<header class="header">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-3">
<div class="header__logo">...</div>
</div>
<div class="col-xl-3">
<div class="header__logo">...</div>
</div>
</div>
</div>
</header>
this looks like a lot of unnecessary nesting
Related
I'm new to CSS and Bootstrap .
Whenever I try to make a picture stick to left position so I can write text on the right side, I use this Bootstrap class rounded float-left
The problem is the image gets over other content in my webpage like the footer.
I know because it's floating .
How can I fix this ? Thank you.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<img class="rounded float-left" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3rcu77cYuBPWjgD_I1CLIQ0hoD6iArebYfA&usqp=CAU">
</div>
<div class="span10">
<h2> This is a Course Name </h2>
</div>
</div>
</div>
Try like this
Try like this please
<div class="container-fluid">
<div class="row-fluid">
<div class="span2 clearfix">
<img class="rounded float-left" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3rcu77cYuBPWjgD_I1CLIQ0hoD6iArebYfA&usqp=CAU">
</div>
<div class="span10">
<h2> This is a Course Name </h2>
</div>
</div>
You are correct that you should use the "clearfix" class (under the condition that you use float).
You can achieve what you want by inserting a "clearfix" where appropriate.
I attach an image below. I sincerely hope this helps.
upload image
The easiest solution is to use the clearfix utility class, ideally adding it to the div that encloses your float (which would be the div with the class span-2 in your code above). This utility class ensures that the floats are cleared properly, and avoids problems like the one you encountered.
use flexbox or bootstrap grid, or even <table></table>
flexbox tutorial: https://www.tutorialspoint.com/flexbox/index.htm
My question above below is my current code:
<!-- Masthead-->
<header class="masthead">
<div class="container">
<div class="masthead-subheading" style="color: black;">Welcome</div>
<div class="masthead-heading" style="color: black;">Dr. Lim Wee Chai</div>
<div class="ml12" style="color: black;">My Life, My Journey</div>
<div style="float:left;"><img src = "about.png" width="50%" height="32%"/></div>
</div>
</header>
and below is the result
Can anyone help to on how to make sure that the image is at the left side (beside word Dr. Lim Wee Chai)?
You should use rows and columns
https://getbootstrap.com/docs/4.0/layout/grid/
You are not using bootstrap grid utility. Read the Grid doc to learn more.
You can set a two-column grid that set div side-by-side using col class assign to the div. However, the grid has a defined structure that you will have to follow. See below.
Any column must have a row. In another word, the column/s should be the child/s of the row.
<div class="row">
<div class="col"></div>
...
</div>
You can set a min one and max twelve columns per row. Read bootstrap grid doc to learn more.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<img class="img-fluid" src="https://cdn.pixabay.com/photo/2019/12/30/14/13/snail-4729777_960_720.jpg"/>
</div>
<div class="col">
<h2>Equal-width</h2>
<p>For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.</p>
</div>
</div>
</div>
You are looking for < nobr> !
I want to wrap a group of rows in bootstrap while still having everything in one container. Are there any rules/conventions about this regarding bootstrap?
I put a fiddle below of what i want to do, but i am not sure if this is the right method.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="extraDiv" id="topdiv">
<div class="row">
<div class="col-md-12">Bla</div>
</div>
<div class="row">
<div class="col-md-6">Bla</div>
<div class="col-md-6">Bla</div>
</div>
</div>
<div class="extraDiv" id="bottomdiv">
<div class="row">
<div class="col-md-12">Bla</div>
</div>
</div>
</div>
As far my understanding it is totally okay the way you use .row class in a .container class. For further understanding you can check this link Must Bootstrap container elements include row elements?
Seems fine - though it depends what you want to do with the gutters etc.
Generally you just want one .container wrapping the whole page (to give you the main central column), and within that you can nest as many rows/cols as you need to.
I have problem with centering components within col-md-12. For example I have 12 columns with <h1> or <h2> inside. I want to <h1> to be centered.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="naglowek">
<h1>Something</h1>
</div>
</div>
</div>
</div>
I tried to access css class text-center or block-center to divs, but everytime <h1> was floated to the left. I need have this centered and set padding on my own. How can I solve this?
<div class="col-md-12 text-center"> works for bootstrap, no need to add any style unless you have already some style for h1. even if that's the case, you can use .text-center for h1
seems you are using width in that parent div. don't do that ever if you need content to be 100% width. and as per background, if you need 100% area occupy the background, you can simply use it in the div if not, you better use it with some pseudo classes :before or :after
In bootstrap 4
I know it's not the direct answer to this question but it may help someone
to center the childs horizontally, use bootstrap-4 class
justify-content-center
to center the childs vertically, use bootstrap-4 class
align-items-center
but remember don't forget to use d-flex class with these
it's a bootstrap-4 utility class, like so
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
copy and paste this snippet to check how it works
Note: make sure to add bootstrap-4 utilities if this code does not work.
Hope this will help someone.
Add class="text-center" to div.
<div id="naglowek" class="text-center">
<h1>Something</h1>
</div>
text-center class is from bootstrap.
You can add the text-center class to the h1.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="naglowek">
<h1 class="text-center">Something</h1>
</div>
</div>
</div>
</div>
I know the very basics of CSS and recently went on with using CSS frameworks because it made my life much easier. I have a question in terms of grid systems, am currently using zurb foundation 3 (http://foundation.zurb.com/)
The problem am facing is mostly when creating a row i cannot give it a specific height. It seems to me like grid systems are designed to use as it is, I read in different places that it is not recommended to try and change the height of a row and to just place items inside it as it is.
In my project, I have a content area whereby I want to display a fixed height and width div but its not working for me. so, can any one advise me what should i do? below is my html code
update: edited the html
<div class="row">
<div class="six columns">
<div style="height:6em; width:5em;>
<!-- my block -->
</div>
</div>
<div class="six columns">
<div style="height:6em; width:5em;>
<!-- my block -->
</div>
</div>
</div>
Your 'style' declarations are wrong
style="height=6em; width:5em;
should be
style="height:6em; width:5em;"
NOTE: you used = instead of : AND you missed the closing quotation "
And you should not use inline styles - separate to a .css file and target them by class
<html>
<head>
<link rel="stylesheet" type="text/css" href="/foundation3/stylesheets/foundation.css"/>
</head>
<body>
<div class="row">
<div class="six columns">
<div style="height:6em; width:5em;">
<!-- my block -->
</div>
</div>
<div class="six columns">
<div style="height:6em; width:5em;">
<!-- my block -->
</div>
</div>
</div>
</body>
</html>
NOTE: I have not declared a DOCTYPE here - this is barebones. It does work I have tested it in Firefox and Chrome. Just stating it does not work is not helpful OP