How to use

Col

in

styled-bootstrap-grid

const SourcesList = ({sources, handleSubcribeChange}) => {
  return ( 
    <div className="sources-container row">
      {sources.map(source => {
        const {name, description, url, category, language, country, isSubscribed} = source;
        return (
          <Col col={12} xs={12} sm={12} md={12} lg={6} xl={4} key={source.id}>
            <SourceCard
              name={name}
              description={description}
              url={url}
              category={category}
              language={language}
              country={country}
              isSubscribed={isSubscribed}
              handleSubcribeChange={() => handleSubcribeChange(source)}
            />
          </Col>
        )
      })}
    </div>
   );
}

const NotFound = (props) => {
  useEffect(() => {
    document.title = "Not Found"
  }, []);
  const handelBackToHome = () => {
    props.history.push('/home');
  }
  return (
    <div className="notfound-container">
      <Container>
        <Row>
          <Col xs={12} sm={10} md={8} lg={8} xl={8} xsOffset={0} smOffset={1} mdOffset={2} lgOffset={2} xlOffset={2}>
            <img src={logo} alt="404"></img>
            <h1>Oops! Page Not Be Found</h1>
            <p>Sorry but the page you are looking for does not exist, have been removed, name changed or is temporarily unavailable</p>
            <div className="link-container">
              <div className="back-to-home-btn" onClick={() => handelBackToHome()} >Back to home page</div>
            </div>
          </Col>
        </Row>
      </Container>
    </div>
  )
}

<div className="login-page-container container-fluid">
  <Row>
    <Col lg={12} xl={6} >
      <div className="left-section ">
        <Container>
          <Row>
            <Col xs={12} sm={12} md={12} lg={10} xl={8} mdOffset={0} lgOffset={1} xlOffset={2}>
              <div className="forms-container">
                <Row>
                  <Col col={5}>
                    <div className='login-tap' onClick={() => this.handleTapChange('login')}>Login</div>
                  </Col>
                  <Col col={5} offset={2}>
                    <div className='register-tap' onClick={() => this.handleTapChange('register')}>Register</div>
                  </Col>
                </Row>
                <Row>
                  <Col col={12}>
                    {isLogin && 
                      <div className="login-form-content">
    <Col xl={6} >
      <div className="right-section d-lg-none d-xl-block">
        <img className="col-12 img-fluid" src={background} alt="logo"/>

const NewsList = ({news}) => {
  return ( 
    <div className="news-container row">
      {news.map(news => {
        const {title, description, content, url, urlToImage, source, publishedAt} = news;
        return (
          <Col col={12} xs={12} sm={12} md={12} lg={6} xl={4} key={news.title}>
            <NewsCard
              title={title}
              description={description}
              content={content}
              url={url}
              urlToImage={urlToImage}
              source={source.name}
              publishedAt={publishedAt}
            />
          </Col>
        )
      })}
    </div>
   );
}

const NewsList = ({news}) => {
  return ( 
    <div className="news-container row">
      {news.map(news => {
        const {title, description, content, url, urlToImage, source, publishedAt} = news;
        return (
          <Col col={12} xs={12} sm={12} md={12} lg={6} xl={4} key={news.title}>
            <NewsCard
              title={title}
              description={description}
              content={content}
              url={url}
              urlToImage={urlToImage}
              source={source.name}
              publishedAt={publishedAt}
            />
          </Col>
        )
      })}
    </div>
   );
}

const SourcesList = ({sources, handleSubcribeChange}) => {
  return ( 
    <div className="sources-container row">
      {sources.map(source => {
        const {name, description, url, category, language, country, isSubscribed} = source;
        return (
          <Col col={12} xs={12} sm={12} md={12} lg={6} xl={4} key={source.id}>
            <SourceCard
              name={name}
              description={description}
              url={url}
              category={category}
              language={language}
              country={country}
              isSubscribed={isSubscribed}
              handleSubcribeChange={() => handleSubcribeChange(source)}
            />
          </Col>
        )
      })}
    </div>
   );
}

const NotFound = (props) => {
  useEffect(() => {
    document.title = "Not Found"
  }, []);
  const handelBackToHome = () => {
    props.history.push('/home');
  }
  return (
    <div className="notfound-container">
      <Container>
        <Row>
          <Col xs={12} sm={10} md={8} lg={8} xl={8} xsOffset={0} smOffset={1} mdOffset={2} lgOffset={2} xlOffset={2}>
            <img src={logo} alt="404"></img>
            <h1>Oops! Page Not Be Found</h1>
            <p>Sorry but the page you are looking for does not exist, have been removed, name changed or is temporarily unavailable</p>
            <div className="link-container">
              <div className="back-to-home-btn" onClick={() => handelBackToHome()} >Back to home page</div>
            </div>
          </Col>
        </Row>
      </Container>
    </div>
  )
}

<div className="login-page-container container-fluid">
  <Row>
    <Col lg={12} xl={6} >
      <div className="left-section ">
        <Container>
          <Row>
            <Col xs={12} sm={12} md={12} lg={10} xl={8} mdOffset={0} lgOffset={1} xlOffset={2}>
              <div className="forms-container">
                <Row>
                  <Col col={5}>
                    <div className='login-tap' onClick={() => this.handleTapChange('login')}>Login</div>
                  </Col>
                  <Col col={5} offset={2}>
                    <div className='register-tap' onClick={() => this.handleTapChange('register')}>Register</div>
                  </Col>
                </Row>
                <Row>
                  <Col col={12}>
                    {isLogin && 
                      <div className="login-form-content">
    <Col xl={6} >
      <div className="right-section d-lg-none d-xl-block">
        <img className="col-12 img-fluid" src={background} alt="logo"/>